Sublime Text幾乎是任何開(kāi)發(fā)者在其工具箱的必備應(yīng)用程序。Sublime Text是一款跨平臺(tái)的，高度可定制的，高級(jí)的文本編輯器，既適合全功能的IDE（出了名的資源匱乏），又可匹配命令行編輯器，例如Vim和Emacs（具有陡峭的學(xué)習(xí)曲線）。

Sublime Text如此受歡迎的其中一個(gè)原因就是它的可擴(kuò)展插件架構(gòu)。這使得開(kāi)發(fā)人員可以輕松使用新功能，例如代碼完成，或遠(yuǎn)程API文檔嵌入，來(lái)擴(kuò)展Sublime的核心功能。Sublime Text的插件并不是開(kāi)箱即用的——通常需要通過(guò)一個(gè)叫Package Control的第三方軟件包管理器來(lái)安裝。要在Sublime Text中安裝Package Control，請(qǐng)遵照其網(wǎng)站上的安裝指南。

在這篇文章中，我將介紹10個(gè)JavaScript開(kāi)發(fā)人員必備的Sublime插件，每一個(gè)都可以幫助你改進(jìn)工作流程，讓你更高效。下面，就讓我們開(kāi)始吧！

1.Babel

第一個(gè)當(dāng)屬Babel插件。該插件添加了合適的語(yǔ)法高亮到ES6 / 2015和React JSX代碼。安裝插件后，你要做的第一件事就是設(shè)置默認(rèn)的語(yǔ)法為.es6，.jsx，以及甚至.js文件。但是，如果你工作于ES3 /5，并且不想使用Babel改變你的代碼的話，那么要慎用最后一個(gè)。

如果你還沒(méi)有發(fā)現(xiàn)Babel的樂(lè)趣，那么我強(qiáng)烈推薦它。它允許你編譯ES6 / 2015和JSX代碼到ES5。它可以很好地集成到所有流行的構(gòu)建工具和CLI。雖然它不支持舊版瀏覽器，但如果你需要支持IE10及以下版本，那么可以按照警告頁(yè)面上的提示去做。

可惜的是，Babel插件不允許在Sublime中快速編譯ES6代碼。所以如果你非要這么做，那么我建議你試試Compile Selected ES6。

2. JSHint

接下來(lái)是Sublime中的JSHint插件。JSHint是一個(gè)JavaScript Linter，可用于查看你的代碼并確認(rèn)它有正確的式樣，正確的語(yǔ)法，擺脫常見(jiàn)錯(cuò)誤。無(wú)論你是一個(gè)初學(xué)者，還是已經(jīng)編寫(xiě)了好多年的程序，JSHint都是一個(gè)必備品。查看JSHint相關(guān)頁(yè)面以了解更多的信息。

要讓JSHint Sublime Text插件工作，你需要通過(guò)npm安裝好全局性的JSHint：

npm install -g jshint

如果你不知道如何做到這一點(diǎn)，那么請(qǐng)查看我們關(guān)于從Node Package管理器開(kāi)始的教程。

一旦安裝好了JSHint npm模塊和JSHint Sublime Text插件，你就可以通過(guò)打開(kāi)你的JavaScript文件并按下 Ctrl + J (或 Alt + J on Linux/Windows)，來(lái)調(diào)用JSHint?；蛘撸氵€可以通過(guò)上下文菜單訪問(wèn)JSHint。

如果你已經(jīng)安裝了這個(gè)插件，但想要在發(fā)生錯(cuò)誤的地方有一個(gè)更明確的警告，那么請(qǐng)使用JSHint Gutter。或者，如果你想在安裝NPM包或該插件之前試用JSHint的話，JSHint.com也有一個(gè)很棒的在線互動(dòng)工具，你可以使用這個(gè)工具粘貼你的代碼查看即時(shí)反饋。

3. JsFormat

JsFormat基于JS Beautifier，可以自動(dòng)幫助你格式化JavaScript和JSON。如果你只單獨(dú)使用它的JSON格式，也是可以的。但對(duì)我來(lái)說(shuō)，它的最大優(yōu)勢(shì)出現(xiàn)在當(dāng)我工作于其他開(kāi)發(fā)人員的代碼，或我自己在很久以前寫(xiě)的代碼的時(shí)候。

這樣的代碼往往是難以閱讀，但是遵循一種通用的代碼格式樣式是有幫助的。雖然格式化可能不適合每一個(gè)人，但確實(shí)可以通過(guò)引入一個(gè)共同的結(jié)構(gòu)來(lái)幫助開(kāi)發(fā)人員讀懂代碼。Linter雖然關(guān)注到這一點(diǎn)，但不一定全面做到，并且不會(huì)自動(dòng)修復(fù)格式。代碼格式化節(jié)省了大量的時(shí)間，避免了大量令人頭痛的問(wèn)題。

安裝好了之后，要使用JSFormat，先進(jìn)入JS文件，然后在Windows / Linux上按Ctrl + Alt + f ，或在Mac上按 Ctrl + ⌥ + f 。當(dāng)然也可以使用上下文菜單。

你也許會(huì)想：“要是我不喜歡它們?cè)O(shè)計(jì)JavaScript樣式的方式呢？”

別擔(dān)心！ JsFormat不但基于JS Beautifier設(shè)置，而且高度可配置。要調(diào)整適合于Sublime Text 3，請(qǐng)這樣做：Preferences -> Package Settings -> JsFormat -> Settings – Default

然后根據(jù)自己的喜好編輯JSON設(shè)置。

4. DocBlockr

將注釋添加到你的代碼中有時(shí)是一件非常非常痛苦的事情。雖然很多人都不喜歡干這件事，但又絕對(duì)是有必要的。 DocBlockr可通過(guò)制造簡(jiǎn)單的注釋來(lái)減輕一些痛苦。安裝DocBlockr后，所有你需要做的是，用 /* 或 /** 開(kāi)始一行代碼，然后剩下的就都可以交給它了。如果你在函數(shù)上面以 /**開(kāi)頭，那么它會(huì)基于JSDoc格式為你生成注釋。有些東西雖然你以前從來(lái)沒(méi)有用過(guò)，但一旦用過(guò)之后，你會(huì)懷疑自己以前是怎么活下來(lái)的，DocBlockr就是其中的一個(gè)例子。

DocBlockr支持許多其他的語(yǔ)言，包括：CoffeeScript，TypeScript、PHP、ActionScript、Haxe、Java、Apex、Groovy、Objective C、C、C++以及Rust。

5.SideBar Enhancements

Sublime Text在側(cè)邊欄文件樹(shù)中可用于處理文件的選項(xiàng)非常少。簡(jiǎn)單地說(shuō)，SideBar Enhancements可修復(fù)這個(gè)問(wèn)題。這款插件特別為文件和文件夾提供了一個(gè)“move to trash”的選項(xiàng)，一個(gè)“open with..”選項(xiàng)，以及一個(gè)剪貼板。它也可以讓你在web瀏覽器中打開(kāi)文件，復(fù)制文件內(nèi)容作為data:uri base64 （這在CSS中嵌入圖像特別方便），并提供大量的搜索操作。此外，它可以很好地與SideBarGit集成，直接從側(cè)欄提供Git命令。

隨著JavaScript代碼庫(kù)規(guī)模的不斷擴(kuò)大，于是，找到一種瀏覽項(xiàng)目并處理項(xiàng)目文件的合理手段迫在眉睫。因此，這個(gè)插件就成為了必需品。

6. AngularJS

由Angular-UI團(tuán)隊(duì)開(kāi)發(fā)，并且可能是這些SublimeText插件中比較大（但也更有用）的軟件包之一。它的主要功能包括：

• 核心AngularJS指令（ng-model，ng-repeat等）的代碼完成
• 自定義指令的指令完成
• 指令、控制器和過(guò)濾器的快速面板搜索
• Angular相關(guān)的代碼片段
• 核心Angular JS指令的GoToDocs
  

Angular是一個(gè)大型的庫(kù)，AngularJS出乎意料地有用。你可以在項(xiàng)目的主頁(yè)上閱讀它的很多設(shè)置。

要利用這個(gè)插件語(yǔ)法高亮的優(yōu)勢(shì)，那么你需要到View -> Syntax -> HTML (Angular.js)中改變你的HTML文件的視圖類型。

7.TypeScript

TypeScript是JavaScript編譯為普通JavaScript的一個(gè)類型超集。這對(duì)于普通開(kāi)發(fā)者而言，可能不知道它也沒(méi)什么大的關(guān)系，但是今年三月出來(lái)的小公告——Angular 2將建造在TypeScript上，意味著，如果你工作于Angular的話，并且你打算以后使用Angular2的話，那么這個(gè)插件是必備的。

基于微軟的支持，這款插件添加了代碼完成，正確的語(yǔ)法高亮，代碼格式化和擴(kuò)展導(dǎo)航功能到TypeScript項(xiàng)目。它還配備了一個(gè)構(gòu)建系統(tǒng)，允許你編譯TypeScript文件為JavaScript。

要訪問(wèn)構(gòu)建系統(tǒng)可以這么做 Tools -> Build System，然后選擇TypeScript 。接著用 .ts 結(jié)尾打開(kāi)一個(gè)文件，選擇Tools -> Build，或者干脆按 Ctrl + B。你會(huì)被要求構(gòu)建參數(shù)，之后插件將在同一目錄中輸出編譯好的JavaScript文件。唯一需要注意的是，它需要Node。

從插件的角度說(shuō)，它提供了“工作于TypeScript代碼時(shí)加強(qiáng)版的Sublime Text體驗(yàn)”。千真萬(wàn)確，從上述臃腫的IDE中，它做了一個(gè)令人耳目一新的改變。

8.Handlebars

如果你正在使用Ember.js，或只是將Handlebars作為模板語(yǔ)言一種選擇，那么你不能沒(méi)有它。沒(méi)有它的話，你還不如干脆關(guān)掉所有的語(yǔ)法高亮。

除了語(yǔ)法高亮（在個(gè)別模板文件和腳本標(biāo)簽的內(nèi)聯(lián)模板中都有這個(gè)功能），它還提供了用于觸發(fā)各種表情的選項(xiàng)卡。例如，鍵入 x-temp并按 TAB鍵會(huì)產(chǎn)生：

<script type="text/x-handlebars" data-template-name=""></script>

另外，鍵入 ifel 再按TAB鍵，你會(huì)得到：

{{#if }}

{{else}}

{{/if}}>

很方便，是吧？

在這個(gè)項(xiàng)目的主頁(yè)上還有一系列完整的代碼片段。

9.Better CoffeeScript

Better CoffeeScript是原先CoffeeScript-Sublime-Plugin的一個(gè)分支——然而，不幸的是，CoffeeScript-Sublime-Plugin似乎已被其創(chuàng)建者遺棄，只能工作于SublimeText 2。

此款插件不僅為那些工作于CoffeeScript的人提供了非常需要的語(yǔ)法高亮功能，而且還有其他很多功能。它增加了一堆命令到Sublime（可通過(guò)命令面板或各種快捷鍵訪問(wèn)），比如運(yùn)行語(yǔ)法檢查，編譯文件，以及顯示編譯好的JavaScript。它還配備了片段和工作于cake （Make對(duì)于CoffeeScript的簡(jiǎn)化版本）的構(gòu)建系統(tǒng)。

你可以在此項(xiàng)目的主頁(yè)上仔細(xì)閱讀插件的許多設(shè)置和選項(xiàng)。

10. jQuery

我知道現(xiàn)在的jQuery在很多地方看似都將會(huì)失寵，但它仍然非常有用，如果你不打算建立一個(gè)完全互動(dòng)的網(wǎng)站，或者你只是想添加功能到現(xiàn)有的應(yīng)用程序的話。

這個(gè)插件提供了額外的語(yǔ)法高亮和幾乎所有jQuery方法的片段。通過(guò)輸入方法名稱并選擇合適的匹配就可以訪問(wèn)這些片段——就是這么簡(jiǎn)單！我特別喜歡這個(gè)功能，因?yàn)樗?jié)省了我很多原本要用于記憶方法特征以及查詢jQuery API文檔的時(shí)間。

例如，鍵入 $.a 會(huì)出來(lái)一個(gè)讓我選擇 $.ajax()的選項(xiàng)，而 $.ajax()可以擴(kuò)展到：

$.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");
});

真是太棒了！

結(jié)論

這10款在JavaScript開(kāi)發(fā)中必備的Sublime插件，講到這里就結(jié)束了。我只用過(guò)它們中的一兩個(gè)，因此歡迎大家談?wù)勀銈冊(cè)谟眠^(guò)之后的體驗(yàn)感受。當(dāng)然，如果遺漏了你最喜歡的插件的話，也請(qǐng)?jiān)谠u(píng)論中讓我知道，我會(huì)考慮將它添加到列表中。

最后一點(diǎn)，請(qǐng)記住，Sublime Text不是免費(fèi)軟件。但它有無(wú)限的試用版（盡管會(huì)有各種煩人的畫(huà)面出現(xiàn)），而單個(gè)用戶的許可費(fèi)用是$ 70。如果你一天中的大部分時(shí)間都要使用文本編輯器，那么這將會(huì)是一筆物有所值的投資！

最新評(píng)論