将
Sublime Text打造成如Eclipse一般的前端开发IDE
1. 快捷键移植篇
从Java开始的梦, 到如痴如醉的Front End, 却始终摆脱不了Eclipse的束缚.
对于Javaer, Eclipse是非常不错的选择, 但对于单纯的前端而言, 是不是觉得略显笨重, 其中各种不想要的东西, 反正是诸多不爽, 曾用过Eclipse来做前端的人应该都有同感.
羡慕别人使用VIM时的酣畅淋漓, 无赖门槛颇高, 上手几天后在Eclipse的"熏陶"下又渐渐淡忘了.
当遇见Sublime Text后, 这一切都改变了, 它简直就是易用版的VIM却不失VIM的神力, 也有非常丰富的插件. 我毅然决然的选择了"抛弃"Eclipse, 投身到它的怀抱.
|
打开文件夹可以视为打开一个project
|
|
侧边栏可以列出文件夹下面所有文件
|
但用上Sublime Text后, 发现其中各种快捷键和Eclipse不一样, 苦于Eclipse的习惯时常让我记忆混乱.
为了延续Eclipse多年的使用习惯, DRY, 我决定将Eclipse中的常用快捷键适配到Sublime Text. 当我的调整完成后, 发现某个国际友人早就有了这个想法
Eclipse shortcuts for Sublime Text 2, 但是不够完整, 现在有我这份就完美了.
适配的Eclipse快捷键如下(其中部分gif动图, 万恶的豆瓣不支持...)
1) alt+/ 自动补全
|
alt+/ auto_complete
|
2) ctrl+i 重新缩进
3) alt+up / alt+down 上下行交换位置<
GIF>
|
alt+up / alt+down swap line
|
4) ctrl+alt+up / ctrl+alt+down 复制当前行到上/下一行<
GIF>
|
ctrl+alt+up / ctrl+alt+down duplicate line
|
5) ctrl+d 删除整行
6) ctrl+l 光标移动到指定行
|
ctrl+l goto-line
|
7) ctrl+k 快速定位到选中的文字<
GIF>
|
ctrl+k quickfind
|
8) ctrl+shift+x / ctrl+shift+y 转换大/小写
9) shift+enter 在当前行的下一行插入空行(这时鼠标可以在当前行的任一位置, 不一定是最后)<
GIF>
|
shift+enter newline
|
10) ctrl+shift+p 定位到对于的匹配符(譬如{})(从前面定位后面时,光标要在匹配符里面,后面到前面,则反之)<
GIF>
|
ctrl+shift+p move2bracket
|
11) ctrl+o outline
|
ctrl+o outline
|
12) ctrl+shift+r open resource<
GIF>
|
ctrl+shift+r open resource
|
13) ctrl+f 文件内查找/替换
|
ctrl+f find/replace
|
14) ctrl+h 全局查找/替换, 在查询结果中双击跳转到匹配位置<
GIF>
|
ctrl+h find in files
|
调整的快捷键和插件快捷键
1) ctrl+v 粘帖并缩进
2) ctrl+shift+v 粘帖
3) ctrl+alt+o 当前文件中的关键字(方便快速查找内容)
|
ctrl+alt+o outline keyword
|
4) ctrl+p 打开Sublime Text的命令面板, 这个命令默认使用的是ctrl+shift+p
|
ctrl+p command palette
|
5) alt+a 按等号或冒号对齐(需要alignment插件)<
GIF>
|
alt+a alignment
|
6) ctrl+shift+f 格式化JavaScript代码(需要JsFormat插件)<
GIF>
|
ctrl+shift+f Js format
|
实用Sublime Text快捷键
1) ctrl+left / ctrl+shift+left / alt+left / alt+shift+right光标一个单词一个单词的移动
2) ctrl+] / ctrl+[ 缩进
3) ctrl+backspace / ctrl+delete 删除整个单词
4) f9 行排序(例如选中几个JSON字段, 让这些字段名按字母顺序排序)
2. 推荐插件篇
如果没有各种插件的协助, Sublime Text绝对还是Text, 而非IDE, 就和Eclipse一样, 都是靠插件发展壮大的.
1)
Package Control 必装, 一旦装了这个, 你就会发现安装/卸载插件如此简单
2)
AutoFileName<
GIF>
|
AutoFileName 自动补全文件(目录)名
|
3)
BracketHighlighter<
GIF>
|
BracketHighlighter 突出显示括号/引号
|
4)
ColorHighlighter
|
ColorHighlighter 背景显示16进制颜色
|
5)
DocBlockr
|
DocBlockr 生成注释模板
|
6)
Emmet<
GIF>
完整语法请参考
emmet cheat sheet
|
Emmet (ex-Zen Coding) 用过Zen-Coding的都知道, 把你节省的时间用于享受生活
|
7)
SideBarEnhancements
|
SideBarEnhancements
|
更多插件请参考
Sublime Text Packages完整配置文件
-----------
快捷键映射(keymap)Sublime Text编辑器配置安装的插件列表Alignment插件配置参考
-----------
Using Sublime Text as your IDEWeb Development With Sublime Text 2后记
-----------
用过IntelliJ IDEA 12才知道原来IDE工具已经如此大而全了.
123开始唱(同桌的你<曲>):
如果你不仅写写Java, 和Spring打打招呼, 同时又要摆弄下groovy
什么J2EEJ2ME, 一个也不能少, 当然Web工程是必备, 少不了要写HTML(/CSS/JavaScript),
到现在又要为Android来扛, 还有一个Flex在远处向你~~挥手...
happy ending~~
|
Java/Groovy/Spring/Web/Android/Flex 来得更猛烈些吧
|
如果你更多的是前端开发, 那么还是推荐更专注的JetBrains WebStorm, Web开发和Node.js都不在话下, 最值得一提的就是JavaScript梦寐以求的API快速定位功能, 掌声在哪里?
|
JavaScript API快速定位
|
后后记
-----------
试用过
HBuilder之后, 真心觉得是国人的骄傲, 是一款非常不错的前端IDE, 推荐大家去感受一下, 不仅能够做常规的Web前端, 还能够使用集成的
HTML5+框架来开发(Android | iOS) Hybird App, 值得一试.
|
HBuilder代码自动补全, 支持HTML/CSS/JS
|