sublime 插件（側重JavaScript）

Sublime Text幾乎是任何開發者在其工具箱的必備應用程序。Sublime Text是一款跨平臺的，高度可定製的，高級的文本編輯器，既適合全功能的IDE（出了名的資源匱乏），又可匹配命令行編輯器，例如Vim和Emacs（具備陡峭的學習曲線）。

Sublime Text如此受歡迎的其中一個緣由就是它的可擴展插件架構。這使得開發人員能夠輕鬆使用新功能，例如代碼完成，或遠程API文檔嵌入，來擴展Sublime的核心功能。Sublime Text的插件並非開箱即用的——一般須要經過一個叫Package Control的第三方軟件包管理器來安裝。要在Sublime Text中安裝Package Control，請遵守其網站上的安裝指南。

在這篇文章中，我將介紹10個JavaScript開發人員必備的Sublime插件，每個均可以幫助你改進工做流程，讓你更高效。下面，就讓咱們開始吧！

1.Babel

第一個當屬Babel插件。該插件添加了合適的語法高亮到ES6 / 2015和React JSX代碼。安裝插件後，你要作的第一件事就是設置默認的語法爲.es6，.jsx，以及甚至.js文件。可是，若是你工做於ES3 /5，而且不想使用Babel改變你的代碼的話，那麼要慎用最後一個。

若是你尚未發現Babel的樂趣，那麼我強烈推薦它。它容許你編譯ES6 / 2015和JSX代碼到ES5。它能夠很好地集成到全部流行的構建工具和CLI。雖然它不支持舊版瀏覽器，但若是你須要支持IE10及如下版本，那麼能夠按照警告頁面上的提示去作。

惋惜的是，Babel插件不容許在Sublime中快速編譯ES6代碼。因此若是你非要這麼作，那麼我建議你試試Compile Selected ES6。

2. JSHint

接下來是Sublime中的JSHint插件。JSHint是一個JavaScript Linter，可用於查看你的代碼並確認它有正確的式樣，正確的語法，擺脫常見錯誤。不管你是一個初學者，仍是已經編寫了好多年的程序，JSHint都是一個必備品。查看JSHint相關頁面以瞭解更多的信息。

要讓JSHint Sublime Text插件工做，你須要經過npm安裝好全局性的JSHint：

?

1	npm install -g jshint

若是你不知道如何作到這一點，那麼請查看咱們關於從Node Package管理器開始的教程。

一旦安裝好了JSHint npm模塊和JSHint Sublime Text插件，你就能夠經過打開你的JavaScript文件並按下 Ctrl + J (或 Alt + J on Linux/Windows)，來調用JSHint。或者，你還能夠經過上下文菜單訪問JSHint。

若是你已經安裝了這個插件，但想要在發生錯誤的地方有一個更明確的警告，那麼請使用JSHint Gutter。或者，若是你想在安裝NPM包或該插件以前試用JSHint的話，JSHint.com也有一個很棒的在線互動工具，你可使用這個工具粘貼你的代碼查看即時反饋。

3. JsFormat

JsFormat基於JS Beautifier，能夠自動幫助你格式化JavaScript和JSON。若是你只單獨使用它的JSON格式，也是能夠的。但對我來講，它的最大優點出如今當我工做於其餘開發人員的代碼，或我本身在好久之前寫的代碼的時候。

這樣的代碼每每是難以閱讀，可是遵循一種通用的代碼格式樣式是有幫助的。雖然格式化可能不適合每個人，但確實能夠經過引入一個共同的結構來幫助開發人員讀懂代碼。Linter雖然關注到這一點，但不必定全面作到，而且不會自動修復格式。代碼格式化節省了大量的時間，避免了大量使人頭痛的問題。

安裝好了以後，要使用JSFormat，先進入JS文件，而後在Windows / Linux上按Ctrl + Alt + f ，或在Mac上按 Ctrl + ⌥ + f 。固然也可使用上下文菜單。

你也許會想：「要是我不喜歡它們設計JavaScript樣式的方式呢？」

別擔憂！ JsFormat不但基於JS Beautifier設置，並且高度可配置。要調整適合於Sublime Text 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

Sublime Text在側邊欄文件樹中可用於處理文件的選項很是少。簡單地說，SideBar Enhancements可修復這個問題。這款插件特別爲文件和文件夾提供了一個「move to trash」的選項，一個「open with..」選項，以及一個剪貼板。它也可讓你在web瀏覽器中打開文件，複製文件內容做爲data:uri base64 （這在CSS中嵌入圖像特別方便），並提供大量的搜索操做。此外，它能夠很好地與SideBarGit集成，直接從側欄提供Git命令。

隨着JavaScript代碼庫規模的不斷擴大，因而，找到一種瀏覽項目並處理項目文件的合理手段迫在眉睫。所以，這個插件就成爲了必需品。

6. AngularJS

由Angular-UI團隊開發，而且多是這些SublimeText插件中比較大（但也更有用）的軟件包之一。它的主要功能包括：

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

Angular是一個大型的庫，AngularJS出乎意料地有用。你能夠在項目的主頁上閱讀它的不少設置。

要利用這個插件語法高亮的優點，那麼你須要到View -> Syntax -> HTML (Angular.js)中改變你的HTML文件的視圖類型。

7.TypeScript

TypeScript是JavaScript編譯爲普通JavaScript的一個類型超集。這對於普通開發者而言，可能不知道它也沒什麼大的關係，可是今年三月出來的小公告——Angular 2將建造在TypeScript上，意味着，若是你工做於Angular的話，而且你打算之後使用Angular2的話，那麼這個插件是必備的。

基於微軟的支持，這款插件添加了代碼完成，正確的語法高亮，代碼格式化和擴展導航功能到TypeScript項目。它還配備了一個構建系統，容許你編譯TypeScript文件爲JavaScript。

要訪問構建系統能夠這麼作 Tools -> Build System，而後選擇TypeScript 。接着用 .ts 結尾打開一個文件，選擇Tools -> Build，或者乾脆按 Ctrl + B。你會被要求構建參數，以後插件將在同一目錄中輸出編譯好的JavaScript文件。惟一須要注意的是，它須要Node。

從插件的角度說，它提供了「工做於TypeScript代碼時增強版的Sublime Text體驗」。千真萬確，從上述臃腫的IDE中，它作了一個使人耳目一新的改變。

8.Handlebars

若是你正在使用Ember.js，或只是將Handlebars做爲模板語言一種選擇，那麼你不能沒有它。沒有它的話，你還不如干脆關掉全部的語法高亮。

除了語法高亮（在個別模板文件和腳本標籤的內聯模板中都有這個功能），它還提供了用於觸發各類表情的選項卡。例如，鍵入 x-temp並按 TAB鍵會產生：

?

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

另外，鍵入 ifel 再按TAB鍵，你會獲得：

?

1 2 3 4 5

{{ #if }}   {{ else }}   {{/ if }}>

很方便，是吧？

在這個項目的主頁上還有一系列完整的代碼片斷。

9.Better CoffeeScript

Better CoffeeScript是原先CoffeeScript-Sublime-Plugin的一個分支——然而，不幸的是，CoffeeScript-Sublime-Plugin彷佛已被其建立者遺棄，只能工做於SublimeText 2。

此款插件不只爲那些工做於CoffeeScript的人提供了很是須要的語法高亮功能，並且還有其餘不少功能。它增長了一堆命令到Sublime（可經過命令面板或各類快捷鍵訪問），好比運行語法檢查，編譯文件，以及顯示編譯好的JavaScript。它還配備了片斷和工做於cake （Make對於CoffeeScript的簡化版本）的構建系統。

你能夠在此項目的主頁上仔細閱讀插件的許多設置和選項。

10. jQuery

我知道如今的jQuery在不少地方看似都將會失寵，但它仍然很是有用，若是你不打算創建一個徹底互動的網站，或者你只是想添加功能到現有的應用程序的話。

這個插件提供了額外的語法高亮和幾乎全部jQuery方法的片斷。經過輸入方法名稱並選擇合適的匹配就能夠訪問這些片斷——就是這麼簡單！我特別喜歡這個功能，由於它節省了我不少本來要用於記憶方法特徵以及查詢jQuery API文檔的時間。

例如，鍵入 $.a 會出來一個讓我選擇 $.ajax()的選項，而 $.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" ); });

 

轉自：http://www.jb51.net/article/80120.htm