直接上手！不容錯過的 Visual Studio Code 十大擴充套件元件

VisualStudio ESLint VSCode · 發表 2019-05-14 12:11:54

摘要：盤點最常用的十大 Visual Studio Code 擴充套件元件。作者 | David Neal 譯者 | 譚開朗，責編 | 屠敏出品 | CSDN（ID：CSDNnews）各大平臺與各種語言的開發人員都在使用Visual Studio Code，...

盤點最常用的十大 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為結對的括號提供了顏色高亮功能，便於我們直觀的看出對應的左括號和右括號。

npm

npm擴充套件元件有兩個功能：執行編輯器中webpack.json定義的npm指令碼，並驗證package.json中列出的檔案包。

npm Intellisense

使用require()匯入模組程式碼時，npm Intellisense元件會自發進行包提示。

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