VS Code 前端規範化風格打造 Extensions 與 ESLint 搭配 Prettier 實踐指南

如何在 VS Code 中打造高品質的前端開發規範？

VS Code 效率提升 的關鍵在於整合自動化工具以維持高品質的 程式碼風格規範。核心實踐路徑包含：1. VS Code Extensions：安裝 React 與 Node.js 套件包，並利用 GitLens 強化版控追蹤；2. ESLint 教學：作為 Linter 負責檢測程式碼品質（邏輯錯誤、未使用變數）；3. Prettier 配置：作為 Formatter 統一團隊排版（縮排、引號）；4. 自動格式化存檔：在 settings.json 啟用 formatOnSave。透過 Linting 與 Formatting 的協作，開發者能從繁瑣的排版爭議中斷捨離，確保專案具備卓越的可讀性與一致性，是專業 前端開發工具 鏈的標準配置。

VS Code Extensions：前端開發的效率神器

VS Code 的市集提供了相當多的 Extensions 能增進工程師的開發效能。VS Code Extensions 就像開發者的神器，能協助自動完成程式碼、提示語法錯誤，甚至是優化開發流程。掌握這些 前端開發工具 是提升生產力的關鍵。

以程式開發來說，各種語言的 Extension Pack 能快速協助我們進行相關語言的開發：

• React Extension Pack
• Node.js Extension Pack
• Extension Pack for Java
• Spring Boot Extension Pack

協助版本控制的相關外掛則讓版控更親民方便

• GitLens: 方便看出哪一行是誰在什麼時候寫的
• Git Graph: 圖像化 Git 紀錄，熟悉後在操作上會更方便

這幾年工作下來，會發現各式語法其實蠻多的且不斷在更新，有些細節其實無法全部都記得非常清楚，這時候透過自動完成可以加速開發效率

• Auto Close Tag: 寫網頁或是 jsx 的時候很方便，可以少打很多東西
• Auto Rename Tag: 協助把對稱的自動改好很方便
• Auto Import: 自動 import 要使用的元件或 function
• Path Intellisense: 引入檔案的時候，如果資料都有照邏輯擺，那這個就能加速找檔案過程
• SCSS IntelliSense: 協助寫一些像是 @include 的語法

語法樣板提供了一個偷吃步，快速的產生相關樣板，開發時只需要進行填空

• HTML Snippets: 有時候在切單純一頁 html 的時候好用
• Reactjs code snippets: 較新的語法可能未支援，優點打 rccp 就可以自動完成元件架構
• React Hooks Snippets

CSS in JS

• vscode-styled-components
• vscode-styled-jsx: React 開發必備

記錄代辦事項

• TODO Highlight、TODO Tree: 任務標籤

在編輯器中將色碼上色的外掛

• Color Highlight: 色碼會幫我們上色

檢查拼字錯誤的外掛

• Code Spell Checker

Linting 與 Formatting：確保程式碼品質與一致性

在團隊協作中，Linting (語法檢查) 與 Formatting (程式碼格式化) 是維持 程式碼風格 一致性的兩大支柱。

• Lint 可以幫助團隊減少錯誤：
  • webhint：網頁相關提示。
  • ESLint：是目前最主流的 Linter，用來檢視程式碼的品質，找到可能的錯誤並提示。
  • StyleLint：針對 CSS 的語法檢查。
  • Sass Lint
  • markdownlint
• Formatting 可以統一大家的排版：
  • Prettier：偏向 code formatter，主要專注在排版。
  • Beautify css/sass/scss/less
• Code Spell Checker：常常英文拼錯但人腦還是可以辨識，改錯字就靠外掛了。

VS Code ESlint + Prettier 厲害的地方在也可以套用 airbnb 的 coding style，不然每個人加入團隊前光看 coding style rule 就飽了 Orz

Prettier：強大的自動程式碼格式化工具

Prettier 會需要使用 npm 進行 node_modules 的安裝，相關的使用說明可以參考這篇 NPM 常用指令教學。

1. npm i prettier -D
2. 加入 .prettierrc

1
2
3
4

{
  "tabWidth": 2,
  "singleQuote": true
}

3. Format 可以設定自動跟手動

ctrl shift + P 執行 Open Workspace Settings(JSON) 編輯 settings.json

讓 VS code 在存檔時自動格式化文件

1
2
3

{
  "editor.formatOnSave": true
}

手動的話則建議加入 npm script 較方便

1
2
3
4
5

{
  "scripts": {
    "prittier-fix": "prettier --write \"./{src}/**/{*.js,*.jsx}\""
  }
}

ESLint：可自定義的 JavaScript 語法檢查工具

ESLint 提供了極高的自定義能力，讓團隊可以根據需求設定規則。透過 VS Code Extensions 的整合，ESLint 可以在開發過程中即時提供回饋。
2. npm i -D eslint-config-prettier eslint-plugin-prettier
3. 加入 .eslintrc.js 或 .eslintrc 在根目錄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const fs = require("fs");
const path = require("path");

// 把 ptettierrc 讀進來套用
const prettierOptions = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, ".ptettierrc"), "utf8")
);

module.export = {
  // ESLint 預設警告是紅色 (danger) 顯示。
  // Prettier 預設警告也是紅色 (danger) 顯示，不跟 ESLint 混淆，因此改成黃色 (warning) 顯示。
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": ["warn", prettierOptions],
  },
  // 要把 prettier 放在最後面。
  extends: [
    // ...,
    "prettier",
  ],
};

手動執行 ESLint 也建議加入 npm script 較方便

1
2
3
4
5

{
  "scripts": {
    "lint-fix": "eslint . --ext .js --fix"
  }
}

有了這個工具就可以快速的自動提示，也可以依照需求 disable 掉一些短時間還來不及改的寫法

• “off” 或 0-關閉規則
• “warn” 或 1-開啟規則，使用警告級別的錯誤：warn(不會導致程序退出)
• “error” 或 2-開啟規則，使用錯誤級別的錯誤：error(當被觸發的時候，程序會退出)

詳細可以看 ESLint 網站上的配置教學，比較特別的是也有支援 jsdoc 的提示，對於事情雜亂一堆文件還沒補，有時補東就忘了西的人來說，真的是個優秀的發明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "rules": {
    "one-var": 0,
    "no-var": 0,
    "prefer-template": 0,
    "valid-jsdoc": [
      "error",
      {
        "requireReturn": true,
        "requireReturnType": true,
        "requireParamDescription": true,
        "requireReturnDescription": true
      }
    ],
    "require-jsdoc": [
      "error",
      {
        "require": {
          "FunctionDeclaration": true,
          "MethodDefinition": true,
          "ClassDeclaration": true
        }
      }
    ]
  }
}

FAQ：VS Code 規範化開發常見問題

Q1：為什麼開發中需要同時使用 ESLint 與 Prettier？

A：它們分工明確：ESLint 是為了確保「程式碼品質」（例如：禁止使用 eval、強制執行變數命名規範），它能發現邏輯上的潛在錯誤；而 Prettier 則是為了確保「程式碼風格」（例如：每行長度、是否使用單引號），它只負責讓程式碼變漂亮。同時使用兩者能確保您的專案不僅邏輯正確且排版一致。

Q2：對於初學者，建議一開始就導入 Airbnb 規範嗎？

A：ESLint 教學 中 Airbnb 規範被譽為業界最嚴格的標準。對於初學者，這雖然能快速建立高品質習慣，但也可能因過多警告而感到挫敗。建議初期可以先套用 eslint:recommended，等到熟悉語法後再逐步升級至 Airbnb 或團隊自定義規範，實踐高品質的「漸進式優化」。

Q3：設定了 formatOnSave 但 VS Code 卻沒有自動縮排，該如何排除？

A：這通常有三個可能原因：1. 預設格式化工具 未設定：請右鍵點擊編輯器選擇「Format Document With…」並設為 Prettier；2. 擴充套件衝突：檢查是否有其他 Formatter（如 Beautify）干擾；3. 設定檔優先級：請確認專案根目錄下具備 .prettierrc，且內容沒有語法錯誤。

• ← 上一篇
• 下一篇 →