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

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