鐵人賽經過一半，Nuxt3 的功能基本介紹差不多了，今天補上自己在建置專案時習慣會加上的 lint，接下來就會結合前兩週的內容來實作一個 Blog。

團隊協作時統一樣式和撰寫風格能夠帶來不少益處，但是要使用時總是讓人苦惱不知道該如何配置，今天來分享一些簡單的設置。

ESlint

Nuxt3 除了安裝 eslint 本體之外，要安裝的額外套件也不少，這些套件也跟 Nuxt3 一樣持續發展中（表示較高可能有 Bug），我是參考 CSDN 上找到的文章調整設定，以下是設定步驟：

1. 安裝所有需要的套件

npm i -D eslint-plugin-nuxt@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

本系列文環境配置使用 Typescript，上列套件僅列出 eslint 相關，基礎套件需要另外安裝

2. 新增 eslint 的 config 檔（以下使用 .eslintrc 做為範例），加入基本設定

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:nuxt/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    //
  }
}

3. 在 package.json 中加入 eslint 的執行指令

{
  //,,,
  "scripts": {
    // ...
    "lint": "eslint . --ext .ts,.vue",
    "lint:fix": "eslint . --ext .ts,.vue --fix"
  },
  // ...
}

4. 執行指令測試是否正常

npm run lint

Prettier

Prettier 和 Eslint 的結合和其他專案一樣，需要幾個輔助套件來避免衝突：

1. 安裝所需套件

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

2. 修改 eslint 設定檔（沿用上個段落的設定）

{
  "env": {
    "browser": true,
    "es2022": true
  },
  "extends": [
+   "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:nuxt/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
+   "prettier/prettier": [
+     "error",
+     {
+       // .....
+     }
+   ]
  }
}

3. 執行 lint 測試設定檔是不是正確（此時 rules 還沒設定好，先不要用 lint:fix）

npm run lint

rules

以下是我會做的設定，僅供參考：

"rules": {
  "vue/multi-word-component-names": 0, // Nuxt3 有一些元件都會是單一名稱，例如404，所以最好是關掉
  "vue/singleline-html-element-content-newline": 0, // 這條開啟會限制 html 標籤有內容就換行，如果很短實在沒必要特別換行
  "vue/require-default-prop": 0, // 要求 props 要有預設值
  "prettier/prettier": [
    "error",
    {
      "printWidth": 120, // 看公司給的螢幕多大
      "tabWidth": 2, // 建議tab都是2個空格寬
      "singleQuote": true, // 古早時都用雙引號，但現在習慣單引號
      "semi": true, // 看個人或團隊習慣，古早時JS一定要結尾分號
      "trailingComma": "none" // 結尾逗號
    }
  ]
}

Husky + Lint-staged

每個人的電腦開發環境不盡相同，即使裝了這些 lint 工具也無法確保每個參與者都有執行 lint 的習慣或設置自動 fix，husky 是一個 git hook，透過設置 husky 就可以確保每位開發者在 commit 時候有完成 lint 檢查，方便維護程式碼的一致性，lint-staged 則是讓 lint 只對 git add 時的檔案生效，節省時間。

1. 安裝相關套件

npm i -D husky lint-staged

2. 在專案根目錄新增 husky 設定檔（.huskyrc.json），並且設定使用 lint-staged：

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

3. 在專案根目錄新增 lint-staged 設定檔（.lintstagedrc.json），設定觸發機制和行為：

{
  "*.+(vue|js|jsx|ts|tsx)": [
    "eslint --fix",
    "git add"
  ],
  "*.+(json|css|md)": [
    "prettier --write",
    "git add"
  ]
}

4. 這時候可以在檔案做一些「醜醜的」修改，然後執行指令 git add .，再來看看程式碼是不是變漂亮了。