打造屬于自己的前端開發神器 -- 給Sublime Text加上Eclipse的光環
将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 |