打造屬于自己的前端開發神器 -- 給Sublime Text加上Eclipse的光環
將Sublime Text打造成如Eclipse一般的前端開發IDE
- 快捷鍵移植篇
從Java開始的夢, 到如癡如醉的Front End, 卻始終擺脫不了Eclipse的束縛.
對于Javaer, Eclipse是非常不錯的選擇, 但對于單純的前端而言, 是不是覺得略顯笨重, 其中各種不想要的東西, 反正是諸多不爽, 曾用過Eclipse來做前端的人應該都有同感.
羨慕別人使用VIM時的酣暢淋漓, 無賴門檻頗高, 上手幾天后在Eclipse的"熏陶"下又漸漸淡忘了.
當遇見Sublime Text后, 這一切都改變了, 它簡直就是易用版的VIM卻不失VIM的神力, 也有非常豐富的插件. 我毅然決然的選擇了"拋棄"Eclipse, 投身到它的懷抱.</p>
打開文件夾可以視為打開一個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字段, 讓這些字段名按字母順序排序)
- 推薦插件篇
如果沒有各種插件的協助, Sublime Text絕對還是Text, 而非IDE, 就和Eclipse一樣, 都是靠插件發展壯大的.
1) Package Control 必裝, 一旦裝了這個, 你就會發現安裝/卸載插件如此簡單
2) AutoFileName<GIF></p>
AutoFileName 自動補全文件(目錄)名
BracketHighlighter 突出顯示括號/引號
ColorHighlighter 背景顯示16進制顏色
5) DocBlockr
DocBlockr 生成注釋模板
6) Emmet<GIF>
完整語法請參考emmet cheat sheet
Emmet (ex-Zen Coding) 用過Zen-Coding的都知道, 把你節省的時間用于享受生活
SideBarEnhancements
更多插件請參考 Sublime Text Packages
來自： http://www.douban.com/note/276794943/