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

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

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

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

VS Code 擴(kuò)展的類別

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

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

代碼片段擴(kuò)展

當(dāng)您第一次安裝 VS Code 時(shí)，它附帶了幾個(gè) JavaScript 和 Typescript 的代碼片段功能。在開始編寫現(xiàn)代 JavaScript 之前，您需要一些額外的代碼片段來幫助您快速編寫重復(fù)的 ES6 / ES7 代碼：

VS Code JavaScript(ES6) snippets ：目前最流行的，迄今為止安裝量超過 120 萬。此擴(kuò)展為 JavaScript ， TypeScript ，HTML，React和Vue擴(kuò)展提供 ES6 語法支持。JavaScript Snippet Pack：JavaScript 有用的代碼片段集合。Atom JavaScript Snippet：從 atom/language-javascript 擴(kuò)展移植的JavaScript代碼段。JavaScript Snippets：一系列ES6片段。此擴(kuò)展包含 Mocha，Jasmine和其他BDD測試框架的片段。

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

語法擴(kuò)展

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

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

編寫有效的 JavaScript 代碼時(shí)，需要一個(gè)能夠?yàn)樗袌F(tuán)隊(duì)成員強(qiáng)制執(zhí)行特定編碼風(fēng)格的檢測工具(linter)。 ESLint 是最受歡迎的，因?yàn)樗С衷S多編碼風(fēng)格，包括 Standard ，Google 和 Airbnb 。 以下是 Visual Studio Code 最流行的 linter 插件：

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

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

Node 擴(kuò)展

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

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


代碼格式化擴(kuò)展

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

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

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

Debugger for Chrome ：在 Chrome 中輕松調(diào)試 JavaScript（通過在編輯器中設(shè)置斷點(diǎn)）。源碼：vscode-chrome-debug。


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

對(duì)于大多數(shù)項(xiàng)目，您需要一個(gè)合適的框架來構(gòu)建代碼并縮短開發(fā)時(shí)間。 VS Code 通過擴(kuò)展支持大多數(shù)主流框架。 但是，仍然有許多已建立的框架尚未完全支持。 以下是一些提供重要功能的 VS Code 擴(kuò)展。

Angular 6 ：提供 Angular 6 的代碼片段。支持 Typescript，HTML，Angular Material ngRx，RxJS 和 Flex Layout。到目前為止，已安裝了220多萬個(gè)安裝和 172 個(gè) Angular 代碼片段。Angular v5 snippets ：為 TypeScript，RxJS，HTML 和 Docker 文件提供 Angular 代碼片段。迄今為止已有 270多 萬個(gè)安裝量。React Native/React/Redux snippets for es6/es7 ：為所有這些框架提供 ES6 / ES7 語法的片段。React Native Tools ：為 React Native 框架提供智能提示，命令行工具和調(diào)試功能。Vetur ：為Vue框架提供語法高亮，代碼片段，Emmet，linting（代碼檢測），格式化，智能提示和調(diào)試支持。它附帶了在 GitBook 上發(fā)布的使用文檔 。Ember ：為Ember提供命令支持和智能提示。安裝后，所有 ember cli 命令都可以通過 VS Code 自己的命令行列表中使用。Cordava Tools ：支持 Cordova 插件和 Ionic 框架。為基于 Cordova 的項(xiàng)目提供智能提示，調(diào)試和其他支持功能。jQuery Code Snippets ：提供了超過130個(gè)jQuery的代碼片段，使用 jq 前綴來激活。
測試類擴(kuò)展

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

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

我只是將下一批 VS Code 擴(kuò)展歸入到 “awesome” 類別中，因?yàn)樗钅苊枋鏊鼈儯?/p>Quokka.js ：一個(gè)很棒的調(diào)試工具，為 JavaScript 代碼提供快速原型操作。附帶 優(yōu)秀的文檔 。Paste as JSON ：快速將 JSON 數(shù)據(jù)轉(zhuǎn)換為 JavaScript 代碼。源碼：quick-type。
Code Metrics ：這是計(jì)算 JavaScript 和 TypeScript 代碼復(fù)雜性的另一個(gè)很棒的擴(kuò)展。源碼：codemetrics。

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

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

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

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

VS Code 擴(kuò)展的類別

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

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

代碼片段擴(kuò)展

當(dāng)您第一次安裝 VS Code 時(shí)，它附帶了幾個(gè) JavaScript 和 Typescript 的代碼片段功能。在開始編寫現(xiàn)代 JavaScript 之前，您需要一些額外的代碼片段來幫助您快速編寫重復(fù)的 ES6 / ES7 代碼：

VS Code JavaScript(ES6) snippets ：目前最流行的，迄今為止安裝量超過 120 萬。此擴(kuò)展為 JavaScript ， TypeScript ，HTML，React和Vue擴(kuò)展提供 ES6 語法支持。JavaScript Snippet Pack：JavaScript 有用的代碼片段集合。Atom JavaScript Snippet：從 atom/language-javascript 擴(kuò)展移植的JavaScript代碼段。JavaScript Snippets：一系列ES6片段。此擴(kuò)展包含 Mocha，Jasmine和其他BDD測試框架的片段。

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

語法擴(kuò)展

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

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

編寫有效的 JavaScript 代碼時(shí)，需要一個(gè)能夠?yàn)樗袌F(tuán)隊(duì)成員強(qiáng)制執(zhí)行特定編碼風(fēng)格的檢測工具(linter)。 ESLint 是最受歡迎的，因?yàn)樗С衷S多編碼風(fēng)格，包括 Standard ，Google 和 Airbnb 。 以下是 Visual Studio Code 最流行的 linter 插件：

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

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

Node 擴(kuò)展

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

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

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

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

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

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

對(duì)于大多數(shù)項(xiàng)目，您需要一個(gè)合適的框架來構(gòu)建代碼并縮短開發(fā)時(shí)間。 VS Code 通過擴(kuò)展支持大多數(shù)主流框架。 但是，仍然有許多已建立的框架尚未完全支持。 以下是一些提供重要功能的 VS Code 擴(kuò)展。

Angular 6 ：提供 Angular 6 的代碼片段。支持 Typescript，HTML，Angular Material ngRx，RxJS 和 Flex Layout。到目前為止，已安裝了220多萬個(gè)安裝和 172 個(gè) Angular 代碼片段。Angular v5 snippets ：為 TypeScript，RxJS，HTML 和 Docker 文件提供 Angular 代碼片段。迄今為止已有 270多 萬個(gè)安裝量。React Native/React/Redux snippets for es6/es7 ：為所有這些框架提供 ES6 / ES7 語法的片段。React Native Tools ：為 React Native 框架提供智能提示，命令行工具和調(diào)試功能。Vetur ：為Vue框架提供語法高亮，代碼片段，Emmet，linting（代碼檢測），格式化，智能提示和調(diào)試支持。它附帶了在 GitBook 上發(fā)布的使用文檔 。Ember ：為Ember提供命令支持和智能提示。安裝后，所有 ember cli 命令都可以通過 VS Code 自己的命令行列表中使用。Cordava Tools ：支持 Cordova 插件和 Ionic 框架。為基于 Cordova 的項(xiàng)目提供智能提示，調(diào)試和其他支持功能。jQuery Code Snippets ：提供了超過130個(gè)jQuery的代碼片段，使用 jq 前綴來激活。
測試類擴(kuò)展
Mocha sidebar ：為使用 Mocha 庫進(jìn)行測試的項(xiàng)目提供支持。此擴(kuò)展可幫助您直接在代碼上運(yùn)行測試，并將錯(cuò)誤信息以裝飾器形式顯示。ES Mocha Snippets ：提供 ES6 語法的 Mocha 代碼片段。這個(gè)插件的重點(diǎn)在于利用箭頭函數(shù)，盡可能減少花括號(hào)的使用，保持代碼的緊湊?？赏ㄟ^設(shè)置允許使用分號(hào)。Jasmine Code Snippets ：針對(duì)Jasmine測試框架的代碼片段。Protractor Snippets ：Protractor 框架的端到端測試片段。支持 JavaScript 和 Typescript 。Node TDD ：為Node和JavaScript項(xiàng)目的測試驅(qū)動(dòng)開發(fā)提供支持?？梢栽诟略磿r(shí)觸發(fā)自動(dòng)測試構(gòu)建。源碼：node-tdd 。

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

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

作者：黑馬程序員前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院
首發(fā)：http://web.itheima.com/