ESLint 跟 Prettier 差別

ESLint 與昨天介紹的 Prettier 比較，ESLint 主要用途為語法檢查，撰寫規範性提醒；Prettier 主要將程式碼規格化。

• ESLint：

  功能：檢查 JavaScript 程式碼，包含語法錯誤、未使用的變數提醒、是否使用舊版本的 JS API、變數命名規則檢查，嚴僅度比較（=== v.s. ==）等。也可以透過自定義規則確保專案程式碼風格一致性。

  使用指南：利用 .eslintrc.js 文件設定檢查規則。

• Prettier：

  功能：不會檢查邏輯問題，針對程式碼格式，例如縮排幾個字元、換行、句尾加分號、單雙引號等，與整體程式碼統一規格相關。

  使用指南：利用 .prettierrc 文件設定統一規範。

Step 1. 安裝 ESLint

1. 打開 VS Code。

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

3. 在搜尋框中輸入 ESLint。

4. Install 進行安裝。
   

Step 2. 專案根目錄下，更新 .eslintrc.js 檔

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended", // 使用 Prettier 規則
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  rules: {
    "no-unused-vars": ["warn"], // 警告宣告後未使用的變數
    "prefer-const": "warn", // 警告變數宣告後有沒有重新賦值，沒有的話建議改成 const
    "no-deprecated-api": "warn", // 警告使用過時的 JS API
    eqeqeq: ["error", "always"], // 強制使用嚴格比較(不要使用 == 建議使用嚴格比較 ===)
    camelcase: ["warn", { properties: "always" }], // 建議變數使用駝峰式命名
    "no-global-assign": "error", // 禁止對全域變數賦值
  },
};

Step 3. VS Code 設定：Settings.json 加入自動修正。

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

  在根目錄底下的 .vscode folder的 Settings.json 加入

  // 儲存自動修正 ESLint
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
  },
  

Reference

• VSCode 自動修正 ESLint 錯誤