JavaScript 開發人員必備的10款 SublimeText 外掛程式

JavaScript 開發人員必備的10款 SublimeText 外掛程式

 

Sublime Text 是一款幾乎所有開發人員都必備的非常強大的軟體。它是跨平台的、高度可定製化的、非常先進的文字編輯器，完美的彌補了全功能的 IDE出了名的消耗資源）與命令列編輯器如VIM、Emacs有陡峭的學習曲線）的不足。

使得 Sublime 如此強大的原因之一是它的可擴充外掛程式架構，這使得開發人員可以非常容易的擴充 Sublime 的核心功能，如代碼補全、或遠程介面文檔的嵌入。Sublime Text 自身不帶有外掛程式管理功能，它們通常是通過一個稱作 Package Control的第三方工具來管理。給 Sublime Text 安裝 Package Control ，請按照它們的網站上的安裝指南。

這篇文章中，我們將為你介紹10款 JavaScript 開發人員必備的 Sublime Text 外掛程式，每一個都可以改善你的工作流程，提升工作效率。現在就讓我們開始吧。

1. Bable

列表第一個當然應該是 Bable。它為你的 ES6/2015 和 React JSX 代碼添加文法高亮功能。外掛程式安裝後的第一件事就是把它設定為 .es6, .jsx 甚至 .js 檔案的預設文法。然而你需要注意的是最後一個如果你使用的是 ES3/5 的話，請不要使用 Bable 文法。

如果你還沒有發現使用 Bable 的樂趣的話，我強烈建議你使用它。它可以把 ES6/2015 和 JSX 代碼編譯成 ES5。它與所有流行的架構工具與CLI 都整合的很好。它不支援舊版本的瀏覽器，如果你使用 IE10 以下的瀏覽器，請遵循它們的警告頁面提示。

不幸的是，它不支援在 Sublime 中動態編譯 ES6，如果你有這個需要的話，我建議你看看  Compile Selected ES6。

2. JSHint

JSHint 是一個 JavsScript Linter。它可以檢測代碼的樣式、文法以及是否是常見的相關錯誤。無論你是新手還是老手，JSHint 都是必備的。查看 JSHint 關於頁面擷取更多資訊。

為了使 JSHint 能夠運行，你需要通過 npm 全域安裝 JSHint：

 

  
npm install -g jshint
 

一旦 JSHint npm 模組和 Sublime Text 外掛程式安裝完成，你就可以通過開啟 JavaScript 檔案並按 Ctrl+J Alt+J 在Linux/Windows上）來調用 JSHint。

3. jsFormat

jsFormat 是基於 JS Beautifier 的，可以自動的幫你格式化 JavaScript 和 JSON。即使是你僅僅用它來格式化JSON也是值得的。對我來說最大的好處就是可以查看別的開發人員代碼或者是自己很久之前寫的。

你可以通過 Preferences -> Package Settings -> JsFormat -> Settings - User 來設定你想要的代碼格式。

4. DocBlockr

為你的代碼添加註釋通常是件非常痛苦的事情。我不知道多少人會享受這個過程，但它卻是必須的。DocBlockr 通過把注釋變得簡單來減少這個痛苦。安裝完 DocBlockr 之後，你需要做的只是在新的一行輸入 /* 或者 /** ，它會為你完成剩下的。

DocBlockr 還支援很多其他語言：CoffeeScript, TypeScript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C, C++, and Rust。

5. Side​Bar​ Enhancements

Sublime Text 內建的側邊欄檔案操作選項非常的少。SideBarEnhancements 彌補了此缺點。值得注意的是，它為檔案和檔案夾還提供了“move to trash”、“open with..”甚至還有剪下板選項。

6. AngularJS

它是有 Angular-UI 團隊開發的，可能是列表中比較偏大但是是必須的）外掛程式，它的功能包括：

• AngularJS 核心指令的代碼補全功能

• 自訂指令的指令完成

• directives, controllers and filters的快速搜尋

• Angular相關的程式碼片段

• GoToDocs for core AngularJS directives

7. TypeScript

由微軟支援，該外掛程式為 TypeScript 項目添加了代碼補全、文法高亮、代碼格式化以及擴充的導航功能。它還配備了一個構建系統，允許你把 TypeScript 編譯到 JavaScript。

可以用 Tools -> Build System 進入Bulid系統，然後開啟一個 .ts 結尾的檔案，然後選擇 Tools -> Build 或者直接按 Ctrl+B ，它會讓你輸入參數，直接就會在同一個目錄輸入JavaScript檔案。唯一的條件是需要 Node 支援。

8. Handlebars

如果你使用 Ember.js 或者僅僅把 Handlebars 作為模版語言，這款外掛程式都是必備的。如果沒有它，你最好把文法高亮關閉。

除了文法高亮，它還提供了各種運算式的標籤觸發器。例如輸入 x-temp 然後按 TAB會產生：

 

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

另外，如果輸入 ifel 然後按 TAB 怎產生：

 

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

非常的順手，對嗎？

該項目的首頁上有所有的程式碼片段列表。

9. Better CoffeeScript

Better CoffeeScript 是原 CoffeeScript-Sublime-Plugin 的 Fork，不幸的是原外掛程式似乎已經被作者廢棄，並且只支援Sublime Text 2。

該外掛程式為使用 CoffeeScript 的開發人員提供很多必要的代碼高亮，並且不至於此。它給 Sublime 增加了一些命令，如檢測文法的能力、編譯檔案、顯示編譯的JavaScript等。

你可以在該項目的首頁細讀它的各項設定與選項。

10. jQuery

我知道現在jQuery在很多地方都失寵了，但它依然是非常有用的，如果你不建立一個完全互動的網站，或者你只是想在一個現有的應用程式中添加功能。

例如輸入 $.a 然後選擇 $.ajax 就會產生下面的內容：

 

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

非常棒~

總結

這就是為你準備的JavaScript 開發人員必備的10款 Sublime Text 外掛程式。我強烈建議你嘗試其中的一兩個，然後在評論中告訴我使用體驗。或者說我沒有列出某個你最喜歡的，也請在評論中給出，我可以考慮把它添加到列表中。

最後，請記住 Sublime Text 並不是免費的，它只是提供了一個無限期的試用版。單個許可證的價格是 $70 。如果你每天都在使用文字編輯器的話，這將是一個值得的投資。

來源：Coder資源網    原文：http://www.sitepoint.com/essential-sublime-text-javascript-plugins/ 作者： Sublime Text
譯文：http://info.9iphp.com/essential-sublime-text-javascript-plugins/ 譯者： Specs