Vue3+ TypeScript中如何使用Eslint V9.0.0這一篇文章中使用的Eslint V9.0.0最新版本和typescript-eslint V7.6.0存在版本相容性問題，在拉取項目時候執行pnpm i，提示如下錯誤：

解決辦法(一)：執行npm i --force，跳過版本相容，強制拉包
(推薦)解決辦法(二)：把typescript-eslint改成v7.7.0版本，如下：

typescript-eslint開源社團也在積極的更新擁抱Eslint v9，更新的很快：

husky v9

作用

husky 是一個 Git 鈎子工具，可以在送出代碼時自動檢測到代碼送出時修改的檔案，然後執行相應的檢查指令。

核心内容是配置 Husky 的 pre-commit 和 commit-msg 兩個鈎子:

pre-commit：Husky + Lint-staged 整合實作 Git 送出前代碼規範檢測/格式化 (前提：ESlint + Prettier + Stylelint 代碼統一規範。
commit-msg: Husky + Commitlint + Commitizen + cz-git 整合實作生成規範化且高度自定義的 Git commit message。

安裝

我們husky v9版本，它和v8安裝過程不太一樣，大家要注意！husky v9與v8差別

pnpm install husky -D
npx husky init

這指令做了四件事兒：

安裝 husky 到開發依賴

在 .husky 目錄建立 pre-commit hook，并初始化 pre-commit 指令為 npm test

修改 package.json 的 scripts，增加 "prepare": "husky"

配置

當我們安裝lint-staged之後再配置

lint-staged

作用

lint-staged 也是一個 Git 鈎子工具，當我們在 git add 到暫存區的檔案運作 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 送出時在整個項目執行。

安裝

pnpm install -D lint-staged

配置

在package.json配置中添加：

"lint-staged": {
    "*.{js,ts}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{cjs,json}": [
      "prettier --write"
    ],
    "*.{vue,html}": [
      "eslint --fix",
      "prettier --write",
      "stylelint --fix"
    ],
    "*.{scss,css}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.md": [
      "prettier --write"
    ]
  }

在scripts添加lint-staged指令："lint:lint-staged": "lint-staged"

修改husky送出前前鈎子指令：根目錄 .husky 目錄下 pre-commit 檔案中的 npm test 修改為 npm run lint:lint-staged

使用

Git送出代碼檢測

git add .
git commit -m "測試"

Commitlint

作用

commitlint 是一個 git commit 校驗限制工具，檢查您的送出消息是否符合 Conventional commit format

安裝

pnpm install @commitlint/config-conventional @commitlint/cli --save-dev
pnpm install -D commitizen

配置

根目錄建立 commitlint.config.cjs 配置檔案，示例配置：

// commitlint.config.cjs
module.exports = {
  // 繼承的規則
  extends: ['@commitlint/config-conventional'],
  // 自定義規則
  rules: {
    // @see https://commitlint.js.org/#/reference-rules
    // 送出類型枚舉，git送出type必須是以下類型
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新增功能
        'fix', // 修複缺陷
        'docs', // 文檔變更
        'style', // 代碼格式（不影響功能，例如空格、分号等格式修正）
        'refactor', // 代碼重構（不包括 bug 修複、功能新增）
        'perf', // 性能優化
        'test', // 添加疏漏測試或已有測試改動
        'build', // 建構流程、外部依賴變更（如更新 npm 包、修改 webpack 配置等）
        'ci', // 修改 CI 配置、腳本
        'revert', // 復原 commit
        'chore', // 對建構過程或輔助工具和庫的更改（不影響源檔案、測試用例）
      ],
    ],
    'subject-case': [0], // subject大小寫不做校驗
  },

  prompt: {
    messages: {
      type: '選擇你要送出的類型 :',
      scope: '選擇一個送出範圍（可選）:',
      customScope: '請輸入自定義的送出範圍 :',
      subject: '填寫簡短精煉的變更描述 :\n',
      body: '填寫更加詳細的變更描述（可選）。使用 "|" 換行 :\n',
      breaking: '列舉非相容性重大的變更（可選）。使用 "|" 換行 :\n',
      footerPrefixesSelect: '選擇關聯issue字首（可選）:',
      customFooterPrefix: '輸入自定義issue字首 :',
      footer: '列舉關聯issue (可選) 例如: #31, #I3244 :\n',
      generatingByAI: '正在通過 AI 生成你的送出簡短描述...',
      generatedSelectByAI: '選擇一個 AI 生成的簡短描述:',
      confirmCommit: '是否送出或修改commit ?',
    },
    // prettier-ignore
    types: [
   { value: "feat", name: "特性:     ✨  新增功能", emoji: ":sparkles:" },
   { value: "fix", name: "修複:       修複缺陷", emoji: ":bug:" },
   { value: "docs", name: "文檔:       文檔變更", emoji: ":memo:" },
   { value: "style", name: "格式:       代碼格式（不影響功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
   { value: "refactor", name: "重構:       代碼重構（不包括 bug 修複、功能新增）", emoji: ":recycle:" },
   { value: "perf", name: "性能:       性能優化", emoji: ":zap:" },
   { value: "test", name: "測試:       添加疏漏測試或已有測試改動", emoji: ":white_check_mark:" },
   { value: "build", name: "建構:     ️  建構流程、外部依賴變更（如更新 npm 包、修改 vite 配置等）", emoji: ":package:" },
   { value: "ci", name: "內建:     ⚙️  修改 CI 配置、腳本", emoji: ":ferris_wheel:" },
   { value: "revert", name: "回退:     ↩️  復原 commit", emoji: ":rewind:" },
   { value: "chore", name: "其他:     ️  對建構過程或輔助工具和庫的更改（不影響源檔案、測試用例）", emoji: ":hammer:" },
  ],
    useEmoji: true,
    emojiAlign: 'center',
    useAI: false,
    aiNumber: 1,
    themeColorCode: '',
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: 'bottom',
    customScopesAlias: 'custom',
    emptyScopesAlias: 'empty',
    upperCaseSubject: false,
    markBreakingChangeMode: false,
    allowBreakingChanges: ['feat', 'fix'],
    breaklineNumber: 100,
    breaklineChar: '|',
    skipQuestions: [],
    issuePrefixes: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
    customIssuePrefixAlign: 'top',
    emptyIssuePrefixAlias: 'skip',
    customIssuePrefixAlias: 'custom',
    allowCustomIssuePrefix: true,
    allowEmptyIssuePrefix: true,
    confirmColorize: true,
    maxHeaderLength: Infinity,
    maxSubjectLength: Infinity,
    minSubjectLength: 0,
    scopeOverrides: undefined,
    defaultBody: '',
    defaultIssues: '',
    defaultScope: '',
    defaultSubject: '',
  },
}

執行下面指令生成 commint-msg 鈎子用于 git 送出資訊校驗

echo "npx --no -- commitlint --edit $1" > .husky/commit-msg

cz-git

作用

與commitizen搭配使用，是一款工程性更強，輕量級，高度自定義，标準輸出格式的 commitizen 擴充卡。

安裝

pnpm install -D cz-git

配置

在package.json配置中添加：

"config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  },

在script添加送出指令

"commit": "git pull && git add -A && git-cz && git push"

使用

pnpm commit

成果展示

代碼倉庫

https://github.com/LHNB521/screen-template

2024最新Vue3項目配置代碼送出規範