我发现许多博客（包括 lint-staged doc）介绍了这样一种使用 husky+ lint-staged 的方法，如下代码在 package.json 中定义：
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.js": ["prettier --write","eslint --fix", "git add"]
}
}
既然存在“prettier”和“eslint --fix”都无法修复的错误，我们如何防止这种用法的错误提交？
【问题讨论】：
标签： husky lint-staged
您确实可以使用 lint-staged 运行多个命令，如果其中一个失败，您将获得正确的退出代码，如下例所示。这通过新的husky 挂钩系统工作：
在package.json 中使用这样的配置：
"husky": {
"hooks": {
"pre-commit": "lint-staged"
},
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css}": [
"prettier --write",
"eslint --fix src/",
"tslint --fix --project .",
"git add"
]
},
配置运行prettier, eslint and tslint - 您会收到以下关于 linting 问题的错误：
husky > pre-commit (node v8.12.0)
↓ Stashing changes... [skipped]
→ No partially staged files found...
❯ Running linters...
❯ Running tasks for src/**/*.{js,jsx,ts,tsx,json,css}
✖ prettier --write
eslint --fix src/
tslint --fix --project .
git add
✖ prettier --write found some errors. Please fix them and try committing again.
...
husky > pre-commit hook failed (add --no-verify to bypass)
最后一行显示 git 自己的 pre-commit 挂钩失败，因此您的更改不会被提交（如果它们不可修复）。
【讨论】：
git add（请参阅此处github.com/okonet/lint-staged/releases/tag/v10.0.0）
我使用的一些文件，以防有人感兴趣：
.prettierrc
{
"printWidth": 120,
"proseWrap": "preserve",
"semi": false,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"arrowParens": "avoid",
"trailingComma": "es5"
}
.lintstagedrc
{
"**/*.+(js|md)": [
"prettier --write",
"eslint --fix src/",
"git add"
]
}
.prettierignore
node_modules
coverage
.huskyrc
{
"hooks": {
"pre-commit": "lint-staged"
}
}
【讨论】：
安装以下包以在提交前运行预提交挂钩
npm install -D eslint prettier stylelint
"devDependencies": {
"eslint": "^7.32.0",
"prettier": "^2.3.2",
"stylelint": "^13.13.1"
}
此命令将为以下安装的软件包安装和配置 husky 和 lint-staged
npx mrm@2 lint-staged
"lint-staged" 属性被添加，以下包被添加到 package.json 中的 devDependencies
此命令还将添加 '.husky' 文件夹，该文件夹将包含 pre-commit 钩子
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.css": "stylelint --fix",
"*.{js,css,md}": "prettier --write"
}
"devDependencies": {
...
"husky": ">=6",
"lint-staged": ">=10",
...
}
"scripts": {
...
"prepare": "husky install"
},
{
"plugins": [
<CAN_HAVE_PLUGINS> LIKE ("stylelint-order","stylelint-scss") AND FOLLOWING PROPERTIES OVERRIDDEN IN "rules {...}"
],
"rules": {
"indentation": 2,
"unit-allowed-list": [
"em",
"rem",
"px",
"%"
],
"order/properties-order": [
[
"width",
"height"
],
"order/properties-alphabetical-order": null,
"unit-case": "lower",
"property-case": "lower",
"string-quotes": "single"
}
}
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120,
"tabWidth": 4,
"useTabs": true,
"semi": false
}
{
"extends": ["eslint:recommended"],
"parser": "babel-eslint",
"plugins": [
<PLUGINS>
],
"rules": {
...
"no-delete-var": "error",
"no-dupe-args": "error",
"no-dupe-class-members": "error",
"no-dupe-keys": "error",
"no-duplicate-case": "error",
...
<MORE_RULES_DEFINED>
},
"env": {
"es2021": true,
"node": true
},
}
- .prettierignore
- .stylelintignore
- .eslintignore
【讨论】：
我认为一个好的做法不仅仅是这些工具。
我会利用 .editorconfig，（不是每个人都使用相同的 IDE/Editor）结合良好的 eslint 设置、测试和格式化脚本。您将需要执行此操作两次，一次是通过 husky 进行挂钩设置，一次是在 CI 中。 （CI 会抓住那些试图通过钩子进行 --no-verify 的人）
运行npm install --save-dev husky lint-staged 并在根目录下创建.lintstagedrc 和.huskyrc。
package.json中一些脚本的示例设置
package.json
在这个例子中，我有 lint、prettier 和一个格式脚本。请注意，我忽略了 .gitignore 中的文件进行格式化。
"format": "npm run pretty -- --write",
"lint": "eslint --ignore-path .gitignore --ext .js --ext .jsx .",
"pretty": "prettier --ignore-path .gitignore \"**/*.+(js|json|md)\"",
.lintstagedrc
当从 husky 钩子调用 lint-staged 时，这将运行我想要运行的命令。如果你想将 --fix 添加到 eslint 命令，你可以在此处附加它。确保您的更漂亮的工具设置为之后处理格式。
{
"*.+(js|jsx)":[
"eslint"
],
"*.+(js|json|md)":[
"prettier --write"
]
}
.huskyrc
显然，您可以通过 husky 在 pre-commit、pre-push 或其他钩子中扩展大量脚本。甚至强制执行提交消息。
{
"hooks":{
"pre-commit": "lint-staged && npm run test",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
【讨论】：
你不能，但你也不能通过定期 linting 来做到这一点。这不会为您提供解决方案，但会指出您代码中的任何潜在错误。
【讨论】：