JavaScript開發者必備的10個SublimeText插件_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 20:51:29

JavaScript開發者必備的10個SublimeText插件_javascript技巧

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

推薦度：

點擊下載本文 文檔為doc格式

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

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：

如果你不知道如何做到這一點，那么請查看我們關于從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中，它做了一個令人耳目一新的改變。