VS CODE前端開發必備的10個插件

在本文中，我將重點介紹 JavaScript 開發人員必備的 VS Code 擴展列表。
Visual Studio Code 無疑是當今最流行的輕量級代碼編輯器。 它確實從其餘流行的代碼編輯器（好比：Sublime Text 和 Atom）中借鑑了大量的功能和特性 。 然而，它的成功主要來自於其提供更好性能和穩定性的表現。 此外，它還提供瞭如代碼智能提示（IntelliSense）等開發者很是須要的功能。而這些功能，曾經只在像 Eclipse 或者 Visual Studio 2017 這樣的集成開發環境(IDE)中才可用。
VS Code 的強大無疑來自於它的 擴展市場（marketplace） 。因爲有很是活躍的開源社區，VS Code 如今幾乎支持全部的編程語言、框架和開發技術。對庫或框架的支持有多種方式，主要包括針對該特定技術提供代碼片斷，語法突出顯示，Emmet 以及智能提示（IntelliSense）功能。
VS Code 擴展的類別
在本文中，我將重點介紹專門針對 JavaScript 開發人員的 VS Code 擴展。 目前，有許多符合此條件的 VS Code 擴展，固然這意味着我沒法說起全部這些這類擴展。 相反，我將重點介紹已經流行的，以及那些對 JavaScript 開發人員來講不可或缺的 VS Code 擴展。 爲簡單起見，我將它們分爲10個特定類別。
在這之中可能有你已經知道而且正在使用的插件，但也頗有可能有一些是你據說過但不曾使用過的，我也但願經過本文能爲你簡要的介紹一下這些插件。
代碼片斷擴展
當您第一次安裝 VS Code 時，它附帶了幾個 JavaScript 和 Typescript 的代碼片斷功能。在開始編寫現代 JavaScript 以前，您須要一些額外的代碼片斷來幫助您快速編寫重複的 ES6 / ES7 代碼：
VS Code JavaScript(ES6) snippets ：目前最流行的，迄今爲止安裝量超過 120 萬。此擴展爲 JavaScript ， TypeScript ，HTML，React和Vue擴展提供 ES6 語法支持。
JavaScript Snippet Pack：JavaScript 有用的代碼片斷集合。
Atom JavaScript Snippet：從 atom/language-javascript 擴展移植的JavaScript代碼段。
JavaScript Snippets：一系列ES6片斷。此擴展包含 Mocha，Jasmine和其餘BDD測試框架的片斷。
愚人碼頭注：另外你也能夠根據本身的習慣建立代碼片斷，請參閱 如何在 Visual Studio Code 中建立代碼片斷 。
語法擴展
VS Code 爲 JavaScript 代碼提供了很是好的語法高亮顯示。 您能夠經過安裝主題來更改顏色。 可是，若是您想要加強代碼的可讀性，則須要語法高亮顯示擴展。 如下是其中幾個：
JavaScript Atom Grammar：此擴展使用 Atom 編輯器中的 JavaScript 語法替換 Visual Studio Code 中的 JavaScript 語法。
Babel JavaScript：支持 ES201x JavaScript，React，FlowType和GraphQL代碼的語法高亮顯示。
DotENV：支持.env文件語法高亮顯示。若是您正在使用Node，請使用方便。
代碼檢測擴展
編寫有效的 JavaScript 代碼時，須要一個可以爲全部團隊成員強制執行特定編碼風格的檢測工具(linter)。 ESLint 是最受歡迎的，由於它支持許多編碼風格，包括 Standard ，Google 和 Airbnb 。 如下是 Visual Studio Code 最流行的 linter 插件：
ESLint ：此擴展將 ESLint 集成到 VS Code 中。它是最受歡迎的 linter 擴展，迄今爲止安裝量超過670萬。規則在 .eslintrc.json 中配置。
JSHint ：JSHint 的代碼檢查器擴展。在項目的根目錄使用 .jshintrcfile 進行配置。
JavaScript Standard Style ：零配置和嚴格規則的檢測工具。執行 StandardJS 規則。
JSLint ：JSLint的 linter 擴展。
若是您想了解可用的 檢測工具(linter) 及 各自的優缺點，請查看咱們對 JavaScript linting 工具的比較 。
Node 擴展
每一個 JavaScript 項目都須要至少一個 Node 包，除非你是一個喜歡艱苦工做的人。如下是一些 VS Code 擴展，可幫助您更輕鬆地使用 Node 模塊。
npm ：使用 package.json 驗證已安裝的軟件包。確保已安裝的軟件包版本號正確，高亮顯示 package.json 中缺乏的已安裝軟件包以及還沒有安裝的軟件包。
Node.js Modules IntelliSense：自動補全 import 語句中的 JavaScript 和 TypeScript 模塊。源碼：vscode-node-module-intellisense

Path IntelliSense ：它和 Node 其實並不相關，但你確定須要對本地文件的智能提示，這個擴展將自動補全文件名。
Node exec ：容許您使用Node.js執行當前文件或您選擇的代碼。
View Node Package ：使用此擴展快速查看 Node 包源，容許您直接從 VS Code 打開 Node 包倉庫庫/文檔。
Node Readme ：快速打開npm包文檔。
Search node_modules ：此擴展容許您搜索 node_modules 文件夾，該文件夾不在默認的搜索範圍內。源碼：vscode-search-node-modules。

Import Cost ：顯示導入的包的大小。源碼：import-cost。
代碼格式化擴展
偶爾，您會發現本身格式化的代碼並不是以首選的編碼風格編寫。爲了節省時間，您能夠如下任何的 VS Code 擴展來快速格式化和重構現有代碼：
Beatufy ：一個支持 JavaScript，JSON，CSS 和 HTML 的 jsBeautifier(代碼美化) 擴展。能夠經過 .jsbeautifyrc 文件進行自定義。迄今爲止最流行的格式化工具，安裝量爲 230 萬次。
Prettier Code Formatter ：一個擴展，支持使用Prettier（一種固定代碼格式化程序）格式化JavaScript，TypeScript和CSS。迄今已安裝超過150萬。
JS Refactor ：提供了許多用於重構 JavaScript 代碼的實用程序和操做，例如提取變量/方法，將現有代碼轉換爲使用箭頭函數或模板字面量以及導出函數。
JavaScript Booster ：一個牛逼的代碼重構工具。具備多種編碼操做，例如將 var 轉換爲 const 或 let ，刪除冗餘的 else語句，以及合併聲明和初始化。很大程度上受到 WebStorm 的啓發。源碼：vscode-javascript-booster。

瀏覽器擴展
除非你是在用 JavaScript 編寫控制檯程序，不然您極可能會在瀏覽器中執行 JavaScript 代碼。 這意味着,您須要常常刷新頁面來查看您所作的每次代碼更新的效果。 這裏有一些工具能夠顯着減小重複過程的開發時間，而不是每次都手動刷新瀏覽器：
Debugger for Chrome ：在 Chrome 中輕鬆調試 JavaScript（經過在編輯器中設置斷點）。源碼：vscode-chrome-debug。

Live Server ：具備靜態和動態頁面的實時從新加載功能的本地開發服務器。源碼：vscode-chrome-debugvscode-live-server。

Preview on Web Server ：提供web服務器和實時預覽功能。
PHP Server ：對於測試僅須要在客戶端運行的 JavaScript 代碼很是有用。。
Rest Client ：您能夠安裝此工具以在編輯器內交互式運行HTTP 請求，而不是使用瀏覽器或 CURL 程序來測試 REST API 端點。
框架類擴展
對於大多數項目，您須要一個合適的框架來構建代碼並縮短開發時間。 VS Code 經過擴展支持大多數主流框架。 可是，仍然有許多已創建的框架還沒有徹底支持。 如下是一些提供重要功能的 VS Code 擴展。
Angular 6 ：提供 Angular 6 的代碼片斷。支持 Typescript，HTML，Angular Material ngRx，RxJS 和 Flex Layout。到目前爲止，已安裝了220多萬個安裝和 172 個 Angular 代碼片斷。
Angular v5 snippets ：爲 TypeScript，RxJS，HTML 和 Docker 文件提供 Angular 代碼片斷。迄今爲止已有 270多 萬個安裝量。
React Native/React/Redux snippets for es6/es7 ：爲全部這些框架提供 ES6 / ES7 語法的片斷。
React Native Tools ：爲 React Native 框架提供智能提示，命令行工具和調試功能。
Vetur ：爲Vue框架提供語法高亮，代碼片斷，Emmet，linting（代碼檢測），格式化，智能提示和調試支持。它附帶了在 GitBook 上發佈的使用文檔 。
Ember ：爲Ember提供命令支持和智能提示。安裝後，全部 ember cli 命令均可以經過 VS Code 本身的命令行列表中使用。
Cordava Tools ：支持 Cordova 插件和 Ionic 框架。爲基於 Cordova 的項目提供智能提示，調試和其餘支持功能。
jQuery Code Snippets ：提供了超過130個jQuery的代碼片斷，使用 jq 前綴來激活。
測試類擴展
測試是軟件開發的關鍵環節，特別是對於處於生產階段的項目。 您能夠全面瞭解 JavaScript 的測試，而且你能夠經過閱讀咱們的指南：JavaScript測試：單元測試 vs 功能測試 vs 集成測試 來得到更多不一樣類型的測試的信息。
Mocha sidebar ：爲使用 Mocha 庫進行測試的項目提供支持。此擴展可幫助您直接在代碼上運行測試，並將錯誤信息以裝飾器形式顯示。
ES Mocha Snippets ：提供 ES6 語法的 Mocha 代碼片斷。這個插件的重點在於利用箭頭函數，儘量減小花括號的使用，保持代碼的緊湊。可經過設置容許使用分號。
Jasmine Code Snippets ：針對Jasmine測試框架的代碼片斷。
Protractor Snippets ：Protractor 框架的端到端測試片斷。支持 JavaScript 和 Typescript 。
Node TDD ：爲Node和JavaScript項目的測試驅動開發提供支持。能夠在更新源時觸發自動測試構建。源碼：node-tdd 。

還有一些很是棒的擴展
我只是將下一批 VS Code 擴展納入到 「awesome」 類別中，由於它最能描述它們！
Quokka.js ：一個很棒的調試工具，爲 JavaScript 代碼提供快速原型操做。附帶 優秀的文檔 。
Paste as JSON ：快速將 JSON 數據轉換爲 JavaScript 代碼。源碼：quick-type。

Code Metrics ：這是計算 JavaScript 和 TypeScript 代碼複雜性的另外一個很棒的擴展。源碼：codemetrics 。

擴展包
如今咱們已經進入最後一個類別，我想告訴您，VS Code 市場有 一個擴展包類別 。 從本質上講，它們是相關聯的一些 VS Code插件的集合，打成一個包，方便安裝。這裏有些較好的：
Nodejs Extension Pack ：這個包裏包含了 ESLint、npm、JavaScript(ES6) 代碼片斷、搜索 node_modules、NPM IntelliSense 和 路徑智能提示。
VS Code for Node.js – Development Pack ：包含 這個有 NPM 智能提示，ESLint，Chrome 調試器，代碼指標，Docker和 導入包的字節開銷。
Vue.js Extension Pack ：Vue 和 JavaScript 擴展的集合。它目前包含大約 12 個 VS Code 擴展，其中一些在這裏沒有提到，例如 auto-rename-tag 和 auto-close-tag。
Ionic Extesion Pack：此包包含許多用於Ionic，Angular，RxJS，Cordova和HTML開發的 VS Code 擴展。
總結
VS Code 的大量質量擴展使其成爲 JavaScript 開發人員的熱門選擇。 有效地編寫 JavaScript 代碼從未如此簡單。 諸如 ESLint 之類的擴展能夠幫助您避免常見錯誤，而其餘諸如 Debugger for Chrome 則能夠幫助您更輕鬆地調試代碼。 具備智能提示功能的 Node.js 擴展可幫助您正確導入模塊，Live Server 和 REST client 等工具的可用性減小了您對外部工具的依賴，從而完成您的工做。 全部這些工具都使您的迭代過程變得更加容易。
我但願這些列表讓你接觸到新的 VS Code 擴展，對你的工做流程有幫助。
更多技術資訊可關注：gzitcast