直接上手！不容錯過的 Visual Studio Code 十大擴展組件

知識 05-14

盤點最常用的十大 Visual Studio Code 擴展組件。

作者 | David Neal

譯者 | 譚開朗

責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

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

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

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

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

Bracket Pair Colorizer2

我寫代碼是儘可能的簡潔明了，並且不嵌套太多的東西。然而事與願違，有些時候這是不可避免的。Bracket Pair Colorizer2為結對的括弧提供了顏色高亮功能，便於我們直觀的看出對應的左括弧和右括弧。

直接上手！不容錯過的 Visual Studio Code 十大擴展組件

npm

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

直接上手！不容錯過的 Visual Studio Code 十大擴展組件

npm Intellisense

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

直接上手！不容錯過的 Visual Studio Code 十大擴展組件

ESLint

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

npm init -y
npm install --save-dev eslint

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

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

npx eslint --init

當前的.eslintr .js內容如下：

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" ]
}
};