打造屬於自己的前端開發神器 -- 給Sublime Text加上Eclipse的光環

標籤：blog   http   java   color   使用   os   

打造屬於自己的前端開發神器 -- 給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>

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