針對JavaScripy開發(fā)人員VS Code代碼片段擴展

這一篇文章會給大家介紹一下開發(fā)人員所必備的一些技能，也就是VS CODE的實用插件是什么？根據(jù)前端開發(fā)人員所必備的VS CODE的插件來展開介紹VS code的擴展類別等知識點。

Visual Studio Code 一定是現(xiàn)在最流行的輕量級代碼編輯器。 它也確實是從其他流行的代碼編輯器（比如：Sublime Text 和 Atom）中借鑒了大量的功能和特性 。 然而，它的成功主要還是來自于它能提供更好性能和穩(wěn)定性的表現(xiàn)。 此外，它還提供了如代碼智能提示（IntelliSense）等開發(fā)者非常需要的功能。那么這些功能曾經(jīng)只在像 Eclipse 或者 Visual Studio 2017 這樣的集成開發(fā)環(huán)境(IDE)中才可用。

VS Code 的強大無疑來自于它的 擴展市場（marketplace） 。由于有非?；钴S的開源社區(qū)，VS Code 現(xiàn)在幾乎支持所有的編程語言、框架和開發(fā)技術。對庫或框架的支持有多種方式，主要包括針對該特定技術提供代碼片段，語法突出顯示，Emmet 以及智能提示（IntelliSense）功能。

VS Code 擴展的類別

在本文中，我將重點介紹專門針對 JavaScript 開發(fā)人員的 VS Code 擴展。 目前，有許多符合此條件的 VS Code 擴展，當然這意味著我無法提及所有這些這類擴展。 相反，我將重點介紹已經(jīng)流行的，以及那些對 JavaScript 開發(fā)人員來說不可或缺的 VS Code 擴展。 為簡單起見，我將它們分為10個特定類別。

在這之中可能有你已經(jīng)知道并且正在使用的插件，但也很有可能有一些是你聽說過但未曾使用過的，我也希望通過本文能為你簡要的介紹一下這些插件。

代碼片段擴展

當您第一次安裝 VS Code 時，它附帶了幾個 JavaScript 和 Typescript 的代碼片段功能。在開始編寫現(xiàn)代 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測試框架的片段。

愚人碼頭注：另外你也可以根據(jù)自己的習慣創(chuàng)建代碼片段，請參閱 如何在 Visual Studio Code 中創(chuàng)建代碼片段 。

語法擴展

VS Code 為 JavaScript 代碼提供了非常好的語法高亮顯示。 您可以通過安裝主題來更改顏色。 但是，如果您想要增強代碼的可讀性，則需要語法高亮顯示擴展。 以下是其中幾個：

JavaScript Atom Grammar：此擴展使用 Atom 編輯器中的 JavaScript 語法替換 Visual Studio Code 中的 JavaScript 語法。Babel JavaScript：支持 ES201x JavaScript，React，F(xiàn)lowType和GraphQL代碼的語法高亮顯示。DotENV：支持.env文件語法高亮顯示。如果您正在使用Node，請使用方便。
代碼檢測擴展

編寫有效的 JavaScript 代碼時，需要一個能夠為所有團隊成員強制執(zhí)行特定編碼風格的檢測工具(linter)。 ESLint 是最受歡迎的，因為它支持許多編碼風格，包括 Standard ，Google 和 Airbnb 。 以下是 Visual Studio Code 最流行的 linter 插件：

ESLint ：此擴展將 ESLint 集成到 VS Code 中。它是最受歡迎的 linter 擴展，迄今為止安裝量超過670萬。規(guī)則在 .eslintrc.json 中配置。JSHint ：JSHint 的代碼檢查器擴展。在項目的根目錄使用 .jshintrcfile 進行配置。JavaScript Standard Style ：零配置和嚴格規(guī)則的檢測工具。執(zhí)行 StandardJS 規(guī)則。JSLint ：JSLint的 linter 擴展。

如果您想了解可用的 檢測工具(linter) 及 各自的優(yōu)缺點，請查看我們對 JavaScript linting 工具的比較 。

Node 擴展

每個 JavaScript 項目都需要至少一個 Node 包，除非你是一個喜歡艱苦工作的人。以下是一些 VS Code 擴展，可幫助您更輕松地使用 Node 模塊。

npm ：使用 package.json 驗證已安裝的軟件包。確保已安裝的軟件包版本號正確，高亮顯示 package.json 中缺少的已安裝軟件包以及尚未安裝的軟件包。Node.js Modules IntelliSense：自動補全 import 語句中的 JavaScript 和 TypeScript 模塊。源碼：vscode-node-module-intellisensePath IntelliSense ：它和 Node 其實并不相關，但你肯定需要對本地文件的智能提示，這個擴展將自動補全文件名。Node exec ：允許您使用Node.js執(zhí)行當前文件或您選擇的代碼。View Node Package ：使用此擴展快速查看 Node 包源，允許您直接從 VS Code 打開 Node 包倉庫庫/文檔。Node Readme ：快速打開npm包文檔。Search node_modules ：此擴展允許您搜索 node_modules 文件夾，該文件夾不在默認的搜索范圍內。源碼：vscode-search-node-modules。
Import Cost ：顯示導入的包的大小。源碼：import-cost。


代碼格式化擴展

偶爾，您會發(fā)現(xiàn)自己格式化的代碼并非以首選的編碼風格編寫。為了節(jié)省時間，您可以以下任何的 VS Code 擴展來快速格式化和重構現(xiàn)有代碼：

Beatufy ：一個支持 JavaScript，JSON，CSS 和 HTML 的 jsBeautifier(代碼美化) 擴展?？梢酝ㄟ^ .jsbeautifyrc 文件進行自定義。迄今為止最流行的格式化工具，安裝量為 230 萬次。Prettier Code Formatter ：一個擴展，支持使用Prettier（一種固定代碼格式化程序）格式化JavaScript，TypeScript和CSS。迄今已安裝超過150萬。JS Refactor ：提供了許多用于重構 JavaScript 代碼的實用程序和操作，例如提取變量/方法，將現(xiàn)有代碼轉換為使用箭頭函數(shù)或模板字面量以及導出函數(shù)。JavaScript Booster ：一個牛逼的代碼重構工具。具有多種編碼操作，例如將 var 轉換為 const 或 let ，刪除冗余的 else語句，以及合并聲明和初始化。
瀏覽器擴展

除非你是在用 JavaScript 編寫控制臺程序，否則您很可能會在瀏覽器中執(zhí)行 JavaScript 代碼。 這意味著,您需要經(jīng)常刷新頁面來查看您所做的每次代碼更新的效果。 這里有一些工具可以顯著減少重復過程的開發(fā)時間，而不是每次都手動刷新瀏覽器：

Debugger for Chrome ：在 Chrome 中輕松調試 JavaScript（通過在編輯器中設置斷點）。源碼：vscode-chrome-debug。


Live Server ：具有靜態(tài)和動態(tài)頁面的實時重新加載功能的本地開發(fā)服務器。源碼：vscode-chrome-debugvscode-live-server。
Preview on Web Server ：提供web服務器和實時預覽功能。PHP Server ：對于測試僅需要在客戶端運行的 JavaScript 代碼非常有用。。Rest Client ：您可以安裝此工具以在編輯器內交互式運行HTTP 請求，而不是使用瀏覽器或 CURL 程序來測試 REST API 端點。
框架類擴展

對于大多數(shù)項目，您需要一個合適的框架來構建代碼并縮短開發(fā)時間。 VS Code 通過擴展支持大多數(shù)主流框架。 但是，仍然有許多已建立的框架尚未完全支持。 以下是一些提供重要功能的 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 上發(fā)布的使用文檔 。Ember ：為Ember提供命令支持和智能提示。安裝后，所有 ember cli 命令都可以通過 VS Code 自己的命令行列表中使用。Cordava Tools ：支持 Cordova 插件和 Ionic 框架。為基于 Cordova 的項目提供智能提示，調試和其他支持功能。jQuery Code Snippets ：提供了超過130個jQuery的代碼片段，使用 jq 前綴來激活。
測試類擴展

測試是軟件開發(fā)的關鍵環(huán)節(jié)，特別是對于處于生產階段的項目。 您可以全面了解 JavaScript 的測試，并且你可以通過閱讀我們的指南：JavaScript測試：單元測試 vs 功能測試 vs 集成測試 來獲得更多不同類型的測試的信息。

Mocha sidebar ：為使用 Mocha 庫進行測試的項目提供支持。此擴展可幫助您直接在代碼上運行測試，并將錯誤信息以裝飾器形式顯示。ES Mocha Snippets ：提供 ES6 語法的 Mocha 代碼片段。這個插件的重點在于利用箭頭函數(shù)，盡可能減少花括號的使用，保持代碼的緊湊?？赏ㄟ^設置允許使用分號。Jasmine Code Snippets ：針對Jasmine測試框架的代碼片段。Protractor Snippets ：Protractor 框架的端到端測試片段。支持 JavaScript 和 Typescript 。Node TDD ：為Node和JavaScript項目的測試驅動開發(fā)提供支持?？梢栽诟略磿r觸發(fā)自動測試構建。源碼：node-tdd 。
還有一些非常棒的擴展

我只是將下一批 VS Code 擴展歸入到 “awesome” 類別中，因為它最能描述它們！

Quokka.js ：一個很棒的調試工具，為 JavaScript 代碼提供快速原型操作。附帶 優(yōu)秀的文檔 。Paste as JSON ：快速將 JSON 數(shù)據(jù)轉換為 JavaScript 代碼。源碼：quick-type。
Code Metrics ：這是計算 JavaScript 和 TypeScript 代碼復雜性的另一個很棒的擴展。源碼：codemetrics。

本帖最后由 neekin 于 2018-11-8 14:47 編輯

在本文中，我將重點介紹 JavaScript 開發(fā)人員必備的 VS Code 擴展列表。

Visual Studio Code 無疑是當今最流行的輕量級代碼編輯器。 它確實從其他流行的代碼編輯器（比如：Sublime Text 和 Atom）中借鑒了大量的功能和特性 。 然而，它的成功主要來自于其提供更好性能和穩(wěn)定性的表現(xiàn)。 此外，它還提供了如代碼智能提示（IntelliSense）等開發(fā)者非常需要的功能。而這些功能，曾經(jīng)只在像 Eclipse 或者 Visual Studio 2017 這樣的集成開發(fā)環(huán)境(IDE)中才可用。

VS Code 的強大無疑來自于它的 擴展市場（marketplace） 。由于有非?；钴S的開源社區(qū)，VS Code 現(xiàn)在幾乎支持所有的編程語言、框架和開發(fā)技術。對庫或框架的支持有多種方式，主要包括針對該特定技術提供代碼片段，語法突出顯示，Emmet 以及智能提示（IntelliSense）功能。

VS Code 擴展的類別

在本文中，我將重點介紹專門針對 JavaScript 開發(fā)人員的 VS Code 擴展。 目前，有許多符合此條件的 VS Code 擴展，當然這意味著我無法提及所有這些這類擴展。 相反，我將重點介紹已經(jīng)流行的，以及那些對 JavaScript 開發(fā)人員來說不可或缺的 VS Code 擴展。 為簡單起見，我將它們分為10個特定類別。

在這之中可能有你已經(jīng)知道并且正在使用的插件，但也很有可能有一些是你聽說過但未曾使用過的，我也希望通過本文能為你簡要的介紹一下這些插件。

代碼片段擴展

當您第一次安裝 VS Code 時，它附帶了幾個 JavaScript 和 Typescript 的代碼片段功能。在開始編寫現(xiàn)代 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測試框架的片段。

愚人碼頭注：另外你也可以根據(jù)自己的習慣創(chuàng)建代碼片段，請參閱 如何在 Visual Studio Code 中創(chuàng)建代碼片段 。

語法擴展

VS Code 為 JavaScript 代碼提供了非常好的語法高亮顯示。 您可以通過安裝主題來更改顏色。 但是，如果您想要增強代碼的可讀性，則需要語法高亮顯示擴展。 以下是其中幾個：

JavaScript Atom Grammar：此擴展使用 Atom 編輯器中的 JavaScript 語法替換 Visual Studio Code 中的 JavaScript 語法。Babel JavaScript：支持 ES201x JavaScript，React，F(xiàn)lowType和GraphQL代碼的語法高亮顯示。DotENV：支持.env文件語法高亮顯示。如果您正在使用Node，請使用方便。
代碼檢測擴展

編寫有效的 JavaScript 代碼時，需要一個能夠為所有團隊成員強制執(zhí)行特定編碼風格的檢測工具(linter)。 ESLint 是最受歡迎的，因為它支持許多編碼風格，包括 Standard ，Google 和 Airbnb 。 以下是 Visual Studio Code 最流行的 linter 插件：

ESLint ：此擴展將 ESLint 集成到 VS Code 中。它是最受歡迎的 linter 擴展，迄今為止安裝量超過670萬。規(guī)則在 .eslintrc.json 中配置。JSHint ：JSHint 的代碼檢查器擴展。在項目的根目錄使用 .jshintrcfile 進行配置。JavaScript Standard Style ：零配置和嚴格規(guī)則的檢測工具。執(zhí)行 StandardJS 規(guī)則。JSLint ：JSLint的 linter 擴展。

如果您想了解可用的 檢測工具(linter) 及 各自的優(yōu)缺點，請查看我們對 JavaScript linting 工具的比較 。

Node 擴展

每個 JavaScript 項目都需要至少一個 Node 包，除非你是一個喜歡艱苦工作的人。以下是一些 VS Code 擴展，可幫助您更輕松地使用 Node 模塊。

npm ：使用 package.json 驗證已安裝的軟件包。確保已安裝的軟件包版本號正確，高亮顯示 package.json 中缺少的已安裝軟件包以及尚未安裝的軟件包。Node.js Modules IntelliSense：自動補全 import 語句中的 JavaScript 和 TypeScript 模塊。源碼：vscode-node-module-intellisensePath IntelliSense ：它和 Node 其實并不相關，但你肯定需要對本地文件的智能提示，這個擴展將自動補全文件名。Node exec ：允許您使用Node.js執(zhí)行當前文件或您選擇的代碼。View Node Package ：使用此擴展快速查看 Node 包源，允許您直接從 VS Code 打開 Node 包倉庫庫/文檔。Node Readme ：快速打開npm包文檔。Search node_modules ：此擴展允許您搜索 node_modules 文件夾，該文件夾不在默認的搜索范圍內。源碼：vscode-search-node-modules。Import Cost ：顯示導入的包的大小。源碼：import-cost。
代碼格式化擴展

偶爾，您會發(fā)現(xiàn)自己格式化的代碼并非以首選的編碼風格編寫。為了節(jié)省時間，您可以以下任何的 VS Code 擴展來快速格式化和重構現(xiàn)有代碼：

Beatufy ：一個支持 JavaScript，JSON，CSS 和 HTML 的 jsBeautifier(代碼美化) 擴展。可以通過 .jsbeautifyrc 文件進行自定義。迄今為止最流行的格式化工具，安裝量為 230 萬次。Prettier Code Formatter ：一個擴展，支持使用Prettier（一種固定代碼格式化程序）格式化JavaScript，TypeScript和CSS。迄今已安裝超過150萬。JS Refactor ：提供了許多用于重構 JavaScript 代碼的實用程序和操作，例如提取變量/方法，將現(xiàn)有代碼轉換為使用箭頭函數(shù)或模板字面量以及導出函數(shù)。JavaScript Booster ：一個牛逼的代碼重構工具。具有多種編碼操作，例如將 var 轉換為 const 或 let ，刪除冗余的 else語句，以及合并聲明和初始化。很大程度上受到 WebStorm 的啟發(fā)。源碼：vscode-javascript-booster。
瀏覽器擴展

除非你是在用 JavaScript 編寫控制臺程序，否則您很可能會在瀏覽器中執(zhí)行 JavaScript 代碼。 這意味著,您需要經(jīng)常刷新頁面來查看您所做的每次代碼更新的效果。 這里有一些工具可以顯著減少重復過程的開發(fā)時間，而不是每次都手動刷新瀏覽器：

Debugger for Chrome ：在 Chrome 中輕松調試 JavaScript（通過在編輯器中設置斷點）。源碼：vscode-chrome-debug。Live Server ：具有靜態(tài)和動態(tài)頁面的實時重新加載功能的本地開發(fā)服務器。源碼：vscode-chrome-debugvscode-live-server。Preview on Web Server ：提供web服務器和實時預覽功能。PHP Server ：對于測試僅需要在客戶端運行的 JavaScript 代碼非常有用。。Rest Client ：您可以安裝此工具以在編輯器內交互式運行HTTP 請求，而不是使用瀏覽器或 CURL 程序來測試 REST API 端點。
框架類擴展

對于大多數(shù)項目，您需要一個合適的框架來構建代碼并縮短開發(fā)時間。 VS Code 通過擴展支持大多數(shù)主流框架。 但是，仍然有許多已建立的框架尚未完全支持。 以下是一些提供重要功能的 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 上發(fā)布的使用文檔 。Ember ：為Ember提供命令支持和智能提示。安裝后，所有 ember cli 命令都可以通過 VS Code 自己的命令行列表中使用。Cordava Tools ：支持 Cordova 插件和 Ionic 框架。為基于 Cordova 的項目提供智能提示，調試和其他支持功能。jQuery Code Snippets ：提供了超過130個jQuery的代碼片段，使用 jq 前綴來激活。
測試類擴展
Mocha sidebar ：為使用 Mocha 庫進行測試的項目提供支持。此擴展可幫助您直接在代碼上運行測試，并將錯誤信息以裝飾器形式顯示。ES Mocha Snippets ：提供 ES6 語法的 Mocha 代碼片段。這個插件的重點在于利用箭頭函數(shù)，盡可能減少花括號的使用，保持代碼的緊湊。可通過設置允許使用分號。Jasmine Code Snippets ：針對Jasmine測試框架的代碼片段。Protractor Snippets ：Protractor 框架的端到端測試片段。支持 JavaScript 和 Typescript 。Node TDD ：為Node和JavaScript項目的測試驅動開發(fā)提供支持?？梢栽诟略磿r觸發(fā)自動測試構建。源碼：node-tdd 。

現(xiàn)在我們已經(jīng)進入最后一個類別，我想告訴您，VS Code 市場有 一個擴展包類別 。 它們是相關聯(lián)的一些 VS Code插件的集合，打成一個包，方便安裝。這里有些較好的：

Nodejs Extension Pack ：這個包里包含了 ESLint、npm、JavaScript(ES6) 代碼片段、搜索 node_modules、NPM IntelliSense 和 路徑智能提示。VS Code for Node.js – Development Pack ：包含 這個有 NPM 智能提示，ESLint，Chrome 調試器，代碼指標，Docker和 導入包的字節(jié)開銷。Vue.js Extension Pack ：Vue 和 JavaScript 擴展的集合。它目前包含大約 12 個 VS Code 擴展，其中一些在這里沒有提到，例如 auto-rename-tag 和 auto-close-tag。Ionic Extesion Pack：此包包含許多用于Ionic，Angular，RxJS，Cordova和HTML開發(fā)的 VS Code 擴展。

作者：黑馬程序員前端與移動開發(fā)培訓學院
首發(fā)：http://web.itheima.com/