打造属于自己的前端开发神器

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