在撰寫 JavaScript 時，可以在 VS Code 中安裝 ESLint 和 Prettier - Code formatter 等擴充套件，來統一規範程式碼的撰寫規則。

註：ESLint 和 Prettier 也可以在其他編輯器或 IDE（如 WebStorm、Sublime Text 等）中使用，不僅限於 VS Code。

Step 1. 安裝 Prettier - Code formatter

1. 打開 VS Code。

2. 點擊左側邊欄的 extensions 圖示或使用快捷鍵 Ctrl + Shift + X。

3. 在搜尋框中輸入 Prettier - Code formatter。

4. Install 進行安裝。

Step 2. 安裝必要的 npm 套件

// 專案根目錄下
npm install --save-dev --save-exact prettier

Step 3. 專案根目錄下，更新 .prettierrc 檔

{
  "printWidth": 80,                   // 超過 80 個字元就換行
  "tabWidth": 2,                      // 程式碼縮排 2 個空格
  "useTabs": false,                   // 不使用 tab，預設使用空格
  "semi": true,                       // 行尾加上分號
  "singleQuote": true,                // 使用單引號而不是雙引號
  "quoteProps": "as-needed",          // 只有在屬性名稱包含特殊字元或空格時才會使用雙引號
  "trailingComma": "es5",             // 在 ES5 的結構中，在物件或陣列最後一個元素加逗號
  "bracketSpacing": true,             // 在物件字面量的括號內部加空格，例如 { foo: bar }
  "arrowParens": "always",            // 箭頭函式只有一個參數時，也需要括號
  "htmlWhitespaceSensitivity": "css", // 根據 CSS 的標準來處理 HTML 中的空白符號
  "endOfLine": "lf"                   // 使用換行符號 LF（Unix 格式）
}

Step 4. VS Code 設定：將 Prettier 設置為預設規則工具。

• 透過介面（針對整體 VSCode）：

  1. VS Code 設定：File > Preferences > Settings 或 Ctrl+,。
  2. 搜尋 Format On Save，勾選 Prettier 以啟用自動格式化。

• 透過變更文件設定（僅針對本專案）：

  在根目錄底下的 .vscode folder，創 Settings.json

  	{
    // ... 其他設定
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true // 儲存時，會執行 .prettierrc 的規範
    },
    // ... 其他設定
  }
  

也可以透過指令，直接一次執行專案的每個檔案，可以參考這篇文章你終究要用 Prettier，為什麼不一開始就用「Prettier」呢？，寫得很棒。

另外，某些特定檔案不想要執行 prettier 的 rules，也可以在根目錄加入 .prettierignore 。

wwwroot/styles/**
wwwroot/commonResources/**

Reference

• 你終究要用 Prettier，為什麼不一開始就用「Prettier」呢？