打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环

2013-05-16 14:39:15

将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>