對于任何開發(fā)人員來說，在其工具箱中使用Sublime都是一個不錯的選擇。作為一個跨平臺、高度可定制的高級文本編輯器，雖然近年來，受到了一些其他的文本編輯器，比如Visual Studio Code和Atom的強烈沖擊，但仍然擁有粉絲無數(shù)。

讓Sublime如此受到熱捧的核心，當(dāng)然是其可擴展的插件架構(gòu)，這使的開發(fā)人員可以輕松的在Sublime的核心功能基礎(chǔ)上，根據(jù)其需要，安裝各類第三方插件。在本文中，我將給所有JavaScript開發(fā)人員，推薦10款可以極大改進(jìn)您工作流程，并提高您工作效率的Sublime插件，每個插件都可以通過Sublime的Package Control進(jìn)行安裝。

讓我們開始吧！

1. Babel

名單上的第一個插件是Babel，這個插件為您的ES6/2015和React JSX代碼添加了正確的語法高亮顯示。

插件安裝后，別忘記，您首先應(yīng)該將Babel設(shè)置為所有JavaScript/TypeScript文件的默認(rèn)語法處理器。

如果你覺得，語法高亮并不是一個特別強大的功能，Babel的另一項功能，一定會讓你喜歡上它。

Babel可以與所有流行的構(gòu)建工具和CLI很好地集成在一起，將ES6/ES7/ESNext，JSX和TypeScript代碼，編譯到ES5，以獲得完整的瀏覽器支持！當(dāng)然，如果您需要支持IE10及更低版本，可以按照其警告頁面上的提示進(jìn)行的修改。

2. SublimeLinter

接下來是SublimeLinter，它將兩款JavaScript代碼檢查工具ESLint和JSHint都集成到了一個插件下，實際上，它僅僅是一款Lint工具框架，根據(jù)您為項目選擇的具體驗證工具，您還需要安裝想要的SublimeLinter-eslint或SublimeLInter-jshint擴展包。

SublimeLinter會根據(jù)你在源代碼中的相關(guān)語法配置文件，查看你的代碼，并驗證它是否有適當(dāng)?shù)臉邮胶驼_的語法。 無論你是初學(xué)者，還是已經(jīng)是業(yè)界大牛，我都推薦在您的JavaScript代碼開發(fā)使用這一插件。而為了使其中任何一個開始工作，您首先需要通過npm工具，將linter包含到您的項目依賴項中，或者在全局中進(jìn)行安裝，比如：

如果您已正確的安裝并配置好了SublimeLinter，則當(dāng)您打開或保存JavaScript文件時，就可以看到它令人驚訝的效果，錯誤本身可以通過多種方式進(jìn)行報告， 默認(rèn)情況下，則顯示在編輯器底部的狀態(tài)欄中。

3. Vue Syntax Highlight

Vue已經(jīng)變得越來越流行了，但令大部分開發(fā)人員感到撓頭的，則是在使用*.vue模板時，我們可能需要一些額外的幫助，來讓代碼變得更為可讀。Vue Syntax Highlight就可以幫助你實現(xiàn)這一點。

4. SideBar Enhancements

SideBar Enhancements是一款Sublime的側(cè)欄文件與文件夾增強工具，稍有遺憾的是，它只能使用Sumlime3中，而不能安裝在Sublime2中，但現(xiàn)在這貌似應(yīng)該不應(yīng)該成為一個問題了。

插件安裝后，則在Sublime的側(cè)欄中，使用鼠標(biāo)右鍵，單擊任何的側(cè)欄文件與文件夾，你都可以看到遠(yuǎn)比以前更為豐富的針對文件和文件夾的操作。

特別的，這個插件提供了一個非常別致的內(nèi)容，即它可以通過Copy as Text -- Content as Data URI菜單，將一個文件的內(nèi)容復(fù)制為data:uri base64表達(dá)形式，這對于在CSS中，直接嵌入Base64形式表達(dá)的圖像特別方便。

同時，插件還提供了大量的各種姿態(tài)的搜索操作。同時，作為一個額外的好處，插件可以與另一款插件：SideBarGit，很好地集成在一起，從而在側(cè)邊欄中，直接提供各種Git操作。

隨著JavaScript代碼庫規(guī)模的不斷增加，選擇一種瀏覽項目和操作項目文件的明智方式當(dāng)然至關(guān)重要的。因此，至少我覺得，這個插件應(yīng)該成為所有Sublime開發(fā)者的必須。

5. JsPrettier

SublimeLinter（其實就是ESLint或者JSHint），可以幫助我們解決代碼格式檢查的問題，那整個團隊種，所有代碼格式化的問題怎么解決呢？一個良好的方案，就是使用Prettier ，通過配置，我們可以制定整個團隊所想要的代碼風(fēng)格，然后通過這里所介紹的編輯器插件JsPrettier來一鍵格式化/美化代碼。

關(guān)于Prettier的安裝，也是一件非常簡單的事情，通過npm工具即可完成

更多的關(guān)于pettier的使用，則不是我想在本文中所將的內(nèi)容。但如果您和您的團隊，不喜歡在很多方面都有點自以為是的Prettier，那么，在這里，還可以介紹兩個其他的Sublime插件推薦給您，一個JsFormat，另一個是配合ESLint一起使用的ESLint-Formatter。

6. TrailingSpaces

這是一款向代碼潔癖癌患者推薦的利器，因為它就一個功能，即：可以清除代碼結(jié)尾打多了幾個空格或Tab！對于他們來說，這一插件絕對是他們的好基友。

但是，如果你是那種試圖讓自己的Sublime更輕的人，那么，在用戶首選項中添加配置：

就絕對是一個好主意，因為這個配置項能讓Sublime在保存時，自動為你刪除這些插件。

突出顯示尾部空格

7. GitGutter

如果你是少數(shù)幾個不使用Git的人，那么你可以跳過這一插件。 但對于我們大多數(shù)人來說，Git已經(jīng)成為了代碼版本管理的必須，而GitGutter，雖然不會對您的工作流程，有什么大規(guī)模的改進(jìn)，但確實是一個非常好的補充，特別是直接在代碼中對各種插入，修改或刪除的狀態(tài)的提示，以及對于所修改內(nèi)容的說明，對于開發(fā)者而言，是非常有幫助的。

8. BracketHighlighter

雖然這個插件出現(xiàn)在整個列表的后面，但并不表示它不重要，甚至可以說，它可能是整個列表中最重要的一款Sublime插件。

當(dāng)然，這樣說，并不是在說，BrackHighlighter的功能繁復(fù)，恰恰相反，其實際上，就非常專業(yè)的做好了一件事，即：用最直觀的方式，匹配了代碼中的各種塊標(biāo)記，比如一對大括號，一對圓括號等等所包含的代碼。

隨著代碼規(guī)模的變大，我們實在是太想知道某個{，是在哪里開始，哪里結(jié)束的了，來一張圖，感受下它的應(yīng)用：

9. Markdown Preview

Sublime默認(rèn)包含一些非常好的Markdown語法突出顯示，但它缺少查看Markdown實際呈現(xiàn)效果的方式......如果你希望在.md文件提交前，就看到它的實際效果，那么，這個插件一定可以幫助到你 。當(dāng)然，可能這是您最不希望出現(xiàn)在這個列表中的插件，我還是少說幾句為上。

10. Boxy Theme

通常情況下，我并不會考慮在插件推薦列表中，加入對主題插件的推薦。但我還是實在忍不住向大家推薦這個插件，哪怕只為了一點，就是：現(xiàn)在我們可以在側(cè)邊欄中，為每一種不同類型的文件，指定不同的圖標(biāo)。

這非常棒！ 當(dāng)然Boxy不是唯一可以做到這一點的主題，但真的是其中非常不錯的一個，這算是一點私貨？