Sublime Text 是每個開發者工具箱中都應該有的一個強大的應用。它是一個跨平臺的、高定製化的、高階的文字編輯器，在功能強大的 整合開發環境（眾所周知地消耗資源）和類似於 Vim 或 Emacs 的命令列編輯器（學習成本非常高）之間取得了很好的平衡。
使得 Sublime 如此強大的原因之一就是其可擴充套件的外掛架構。開發者可以很容易地擴充套件 Sublime 的核心功能，新增一些新特性，比如補全程式碼、嵌入遠端介面文件。Sublime Text 不帶有可以啟用的外掛 – 它們通常通過第三方包管理器安裝，簡稱為 包管理器。安裝 Sublime Text 的包管理器，請按照 官網的安裝教程 進行安裝。
本文針對 JavaScript 開發者，簡要介紹了十個 Sublime 外掛，每一個都能夠幫助你改善工作流，並且提高工作效率。那麼，就讓我們一起來看看吧！
1. Babel
我首先要介紹的就是 Babel 外掛。這個外掛可以在你的 ES6/2015 和 React JSX 程式碼上新增語法高亮。安裝外掛之後，第一件要做的事就是把它設定為 .es6、 .jsx、 以及 .js 檔案的預設語法。然而，如果你正在使用 ES3/5 工作，那你要注意最後一種檔案，不要使用 Babel 編譯你的程式碼。
如果你還沒有享受過 Babel 的樂趣，我強烈建議你去嘗試它。它允許你將 ES6/2015 和 JSX 程式碼編譯成 ES5。並且它很好的整合了目前流行的構建工具和命令列工具。當然，它不支援傳統瀏覽器，但是如果你想支援 IE10 或者更低版本可以在他們的 附加文件頁面 檢視相關說明。
不幸的是， Babel 外掛不允許在 Sublime 內編譯 ES6 程式碼。對於那些想實現此功能的人，我建議你檢視 Compile Selected ES6。
2. JSHint
下一個就是 Sublime 的 JSHint 外掛。JSHint 是一個 JavaScript 檢測器，它會檢視你的程式碼，並驗證其是否具有正確的樣式和語法，避免犯相關的常見錯誤。無論你是個新手還是老手，JSHint 都是必不可少的。檢視 JSHint 的「關於頁面」，可瞭解更多資訊。
為了 JSHint 外掛能夠在 SublimeText 中正常工作，你需要通過 npm 全域性安裝 JSHint：
|
1 |
npm install -g jshint |
如果你不確定應該如何做這一步，請瀏覽《getting started with the Node Package manager》這裡的教程。
一旦 npm 的 JSHint 模組和 SublimeText 的 JSHint 的外掛安裝好了，你就能夠簡便地使用 JSHint 了，只要開啟 JavaScript 檔案，然後按下 Ctrl + J （在 Linux/Windows 上是Alt + J ）。或者，你可以通過選單開啟 JSHint 功能。
如果你已經安裝了外掛，但是想要在有錯誤的地方有更明顯的提示，請瀏覽 JSHint Gutter。或者，你想在安裝 NPM 包和外掛之前試一試 JSHint，JSHint.com 有一個很棒的線上互動工具，你可以把程式碼貼上到裡面得到實時的反饋。
3. JsFormat
JsFormat 基於 JS Beautifier，可以幫助你自動格式化 JavaScript 和 JSON。如果你只想用它格式化 JSON 字串，那它值得你擁有。但是對於我來說，最大的優勢是，當我需要讀其他開發人員的程式碼，甚至於是我很久以前寫的程式碼。
這種程式碼通常可讀性差，統一的格式化程式碼樣式會非常有幫助。儘管格式化工具並不適合每個人，但它們在程式碼中使用統一的結構，這對開發者閱讀程式碼是非常有用的。檢查器會注意到這些，但是他們不需要做好每件事，不會自動格式化程式碼。程式碼格式化工具可以節約很多時間，解決很多令人頭痛的問題。
安裝好就要使用 JSFormat ，開啟你的 JS 檔案，然後在 Windows/Linux 上按下 Ctrl + Alt + f 或者在 Mac 上按下 Ctrl + ⌥ + f。或者，你也可以使用選單欄。
你可能會想：“但是如果我不喜歡它格式化 JavaScript 的樣式怎麼辦？”
好訊息！JsFormat 是基於 JS Beautifier settings 高度配置化的。在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 可以調整這些配置。
然後可以設定你喜歡的 JSON 格式。
4. DocBlockr
給程式碼新增註釋有時候真是件痛苦地事情。我幾乎不認識任何人會享受新增註釋，但是這確實是非常必要的。DocBlockr 通過新增簡潔的評論幫助我們減輕了痛苦。安裝 DocBlockr 之後，你只需要在一行的開始輸入 /* 或者 /** ，剩下的事情它會為你做好。如果你在一個方法上面使用 /**，它會生成 JSDoc 格式的註釋。如果你從沒有使用過類似的工具，DocBlockr 會讓你覺得以前沒有它是如何寫程式碼的。
DocBlockr 也支援許多其他的語言，包括：CoffeeScript、 TypeScript、 PHP、 ActionScript、 Haxe、 Java、 Apex、 Groovy、 Objective C、 C、 C++ 和 Rust。
5. SideBar Enhancements
客觀來說，SublimeText 在側邊檔案樹的位置只有很少的幾個操作選項。簡單來說，SideBarEnhancements 解決了這個問題。顯然，這個外掛提供了為檔案和資料夾提供了 “移到垃圾箱” 選項、“用…開啟” 選項以及剪貼簿相關選項。它還可以讓你用瀏覽器裡開啟檔案，以 data:uri base64（可以方便地在CSS中嵌入圖片） 格式拷貝檔案，提供一系列的搜尋操作。它很好地整合了 SideBarGit 可以在側邊欄直接提供 Git 命令，這是一個額外的功能。
隨著 JavaScript 程式碼庫的不斷增大，以一種明智的方式瀏覽你的專案和操縱專案中的檔案是很有必要的。因此這個外掛必不可少。
6. AngularJS
由 Angular-UI 團隊開發，它可能是所有推薦外掛列表上比較大的一個（但是也非常有用）。它的只要特徵包括：
- 自動完成 AngularJS 指令（ng-model, ng-repeat等）
- 自動完成你的自定義指令
- 快速檢視 directives, controllers 和 filters 的皮膚
- 相關的片段
- 核心的指令文件
Angular 是一個如此大的庫，我發現它非常有用。它有很多設定選項，可以在 專案首頁 瀏覽。
為了利用這個外掛的語法高亮特性，你可以給你的 HTML 檔案更改檢視型別：View -> Syntax -> HTML (Angular.js)
7. TypeScript
TypeScript 是 JavaScript 的超集，可以編譯成普通的 JavaScript。這可能對普通開發者來說並不重要，除了今年三月的一個小公告，Angular 2 將基於 typescript 構建。這意味著如果你使用 Angular 並打算以後繼續使用 Angular2 ，這個外掛必須安裝。
這個外掛由微軟支援，新增了程式碼自動補全、適當的語法高亮、程式碼格式化和擴充套件 TypeScript 專案的導航能力。它還帶有一個構建系統允許你將 TypeScript 編譯成 JavaScript。
要進行編譯，可以去 Tools -> Build System 選擇 TypeScript。然後開啟字尾名為 .ts 的檔案，選擇 Tools -> Build，或者按下 Ctrl + B。你可能會問構建的引數，之後外掛會將編譯後的 JavaScript 檔案輸出在相同的目錄下。唯一要說明的就是需要安裝 Node。
用外掛自己的話說，它提供了“在 Sublime Text 下使用 TypeScript 程式設計的增強的體驗”。這是確實是真的，它是的在前面提到的臃腫的 IDEs 上開發的人員眼前一亮。
8. Handlebars
如果你正在使用 Ember.js 或者僅僅是使用 Handlebars 作為你的模板語言的選擇，那麼你絕對不能缺少它。沒有它，你可能會把所有的語法高亮去掉。
除了語法高亮（它作用於單獨的模板檔案以及指令碼標籤中的內聯模板）之外，它還提供了使用 tab 鍵轉換變數為表示式。例如，輸入 x-temp 並按下 TAB 鍵就會生成：
|
1 |
<script type="text/x-handlebars" data-template-name=""></script> |
或者，輸入 ifel 然後按下 TAB 鍵，你就會得到：
|
1 2 3 |
{{#if }} {{else}} {{/if}}> |
相當的方便，對嗎？
在 專案首頁 有一個完整地程式碼片段列表。
9. Better CoffeeScript
Better CoffeeScript 是原始外掛 CoffeeScript-Sublime-Plugin （很不幸似乎它的開發者放棄了它，只在 SublimeText 2 上工作）的一個分支
這個外掛提供了 CoffeeScript 開發人員急需的語法高亮功能，而且不止於此。它在 Sublime 裡提供了一些命令（通過命令皮膚或者各種快捷鍵），比如進行語法檢查、編譯檔案和顯示編譯後的檔案。它還提供了大量的程式碼片段和可是使用 cake 的編譯系統（CoffeeScript 中 Make 的簡化版）。
你可以在 專案首頁 仔細瀏覽外掛的更多設定和選項。
10. jQuery
我知道目前在很多地方 jQuery 看似已經落伍了，但是如果你不是建立一個互動性很強的網站或者你只是想在已有應用上新增功能，它仍然是非常有用的。
這個外掛提供了額外的語法高亮功能和幾乎所有的 jquery 方法作為程式碼片段。輸入方法名字就可以選擇匹配的程式碼片段 － 就是這麼簡單！我十分喜歡這個功能，因為它讓我免於記憶所有方法的簽名和不斷檢視 jQuery 的 API 文件。
比如，輸入 $.a 就可以讓我選擇 $.ajax()，然後自動擴充套件成以下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.ajax({ url: '/path/to/file', type: 'default GET (Other values: POST)', dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)', data: {param1: 'value1'}, }) .done(function() { console.log("success"); }) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); |
Very nice! 太棒了！
結語
到此為止，我們已經介紹了 JavaScript 開發必備的十個 Sublime 外掛。我希望你可以選擇其中一兩個嘗試一下，並且在評論裡讓我知道你使用得怎麼樣。或者我可能沒有列舉到你最喜歡的外掛。請告訴我，我會考慮在這個列表上添上它。
在結束之前，提示一下 Sublime Text 不是免費的。它有無限試用的版本（螢幕時不時會出現的提示），但是價格是 一個使用者 70 美元。如果你一天工作的大部分時間都要用這個文字編輯器工作，我覺得這是一筆非常值得的投資。