配置pre-commit 时husky和lint-staged的两种步骤

使用husky配置和lint-staged的两种方法

方法一：husky 触发 npm run 命令 -> lint-staged 节点

.husky/pre-commit 配置：

1
npm run lint:lint-staged

package.json 中的相关配置：

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
{
  "scripts": {
    "lint:lint-staged": "lint-staged"
  },
  "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"
    ]
  }
}

方法二：husky 触发 lint-staged 节点 -> npm run 命令

.husky/pre-commit 配置：

1
npx lint-staged

package.json 中的相关配置：

1
2
3
4
5
6
7
8
9
10
{
  "scripts": {
    "lint": "eslint --config ./eslint.config.mjs --fix"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,vue}": [
      "npm run lint"
    ]
  }
}

总结

方法一：包含多个脚本或操作，便于扩展，比如在未来添加其他步骤 【适合拓展项目】

方法二：直接使用 npx lint-staged，减少了中间步骤，使得配置更简洁【适合小型项目】