各大平臺與各種語言的開發(fā)人員都在使用Visual Studio Code，我對此感到驚訝。Stack Overflow發(fā)布的2019年開發(fā)者調(diào)查結(jié)果顯示，VS Code占主導(dǎo)地位。我使用VS Code的主要原因是它能很好的支持JavaScript和Node.js的代碼調(diào)試，并且能免費使用Visual Studio Marketplace中提供的定制化擴展組件。

然而，這里面有成千上萬個擴展組件！我們怎么知道哪些是好用的呢？

一種方法是通過查看擴展組件的平均評級和下載數(shù)量來衡量其受歡迎程度。另一種方法是閱讀像本文這種包含個人觀點的文章。一起來看看吧！

下面是我為Node.js開發(fā)人員推薦的Visual Studio Code擴展組件。

Bracket Pair Colorizer2

我寫代碼是盡可能的簡潔明了，并且不嵌套太多的東西。然而事與愿違，有些時候這是不可避免的。Bracket Pair Colorizer2為結(jié)對的括號提供了顏色高亮功能，便于我們直觀的看出對應(yīng)的左括號和右括號。

npm

npm擴展組件有兩個功能：運行編輯器中webpack.json定義的npm腳本，并驗證package.json中列出的文件包。

npm Intellisense

使用require()導(dǎo)入模塊代碼時，npm Intellisense組件會自發(fā)進行包提示。

ESLint

在初始化一個新的Node.js項目文件時，我要做的第一件事就是在終端安裝ESLint。

npminit-ynpminstall--save-deveslint

ESLint組件會使用本地ESLint和配置規(guī)則來查找JavaScript代碼中的常見模式問題，以便減少bug而編寫出更好的代碼。ESLint還可以重新格式化代碼使其一致性更好，這取決于我們啟用的規(guī)則。請確保VS Code設(shè)置了自動保存修復(fù)功能（”eslint.autoFixOnSave”: true）。

要初始化ESLint配置文件，我們可以在項目中運行此命令：

npxeslint--init

當(dāng)前的.eslintr .js內(nèi)容如下：

module.exports={env:{commonjs:true,es6:true,node:true},extends:"eslint:recommended",globals:{},parserOptions:{ecmaVersion:2018},rules:{indent:["error","tab"],"linebreak-style":["error","unix"],quotes:["error","double"],semi:["error","always"],"array-bracket-spacing":["error","always"],"object-curly-spacing":["error","always"],"space-in-parens":["error","always"]}};

Code Spell Checker

我不知道大家的情況怎么樣，但當(dāng)我發(fā)現(xiàn)我在代碼中拼錯了函數(shù)名、變量、注釋或其他任何東西時，我真的很惱火。如果通篇都是拼寫錯誤的，那是可以正常運行的，但是拼寫錯誤仍然會讓人沮喪或?qū)擂巍?/p>

Code Spell Checker組件的出現(xiàn)終結(jié)了拼寫錯誤時代！該組件很好的一個特性是可以區(qū)分camelCase、PascalCase、snake_case等。另一個很棒的特性是它有西班牙語、法語、德語、俄語和其他一些語言的詞典。

Auto Close Tag（自動關(guān)閉標(biāo)簽）

VS Code最新版本會對HTML或XML文件自動創(chuàng)建結(jié)束標(biāo)簽。對于其他文件類型，如JavaScript、Vue和JSX，Auto Close Tag將為我們縮短某些輸入。

DotENV

用環(huán)境變量來配置Node.js應(yīng)用程序是很常見的。管理環(huán)境變量最流行的一個模塊是dotenv。VS Code的DotENV擴展組件在編輯.env文件時添加了便捷的語法高亮顯示功能。

Path Intellisense

Path Intellisense組件增加了對文件路徑和名稱的自動補全功能，以此來降低手工輸入從而減少引入與路徑相關(guān)的bug。

MarkDownLint

優(yōu)秀的代碼和文檔是相輔相成的。我更喜歡用markdown格式編寫README文件或其他文檔。Markdownlint組件可以幫助我們確保markdown語法的正確性。

Material Icon Theme

Material Icon Theme組件為VS Code的不同文件類型添加了多種圖標(biāo)。˙這樣能快速區(qū)分項目中不同的文件以便很大限度的節(jié)省時間！

其他權(quán)威的VSCode擴展組件（Node.js適用）

以下擴展組件沒有排進前10名，但是對于Node.js開發(fā)人員來說，它們在某些場景中很有用！

Encode Decode——通過添加命令來快速切換文本與其他各種格式，比如Base64、HTML和JSON數(shù)組。

Rest Client——直接從編輯器發(fā)出HTTP請求，并在一個獨立窗口中查看響應(yīng)數(shù)據(jù)。非常適合測試和原型化API。

Better Comments——在不同類型的注釋中添加高亮顯示，助于創(chuàng)建更“人性化”的注釋。