如何为 Vue 项目设置 lint-staged？
How to setup lint-staged for Vue projects?
我使用 Vue CLI 创建了一个新的 Vue3 应用程序，并为我的 linter 配置选择了 Prettier。我想使用 commitlint、husky 和 lint-staged 来验证提交消息并在推送之前检查代码。
我做了什么
基于https://commitlint.js.org/#/guides-local-setup 我用 husky
设置了 commitlint
npm install --save-dev @commitlint/{cli,config-conventional}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
npm install husky --save-dev
npx husky install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit '
基于 https://github.com/okonet/lint-staged#installation-and-setup 我设置了 lint-staged
npx mrm@2 lint-staged
在 package.json 里面我替换了
"lint-staged": {
"*.js": "eslint --cache --fix"
}
和
"lint-staged": {
"*": "npm run lint"
}
问题
将项目中的README.md文件修改为
时
# my-repo
---
new commit
并尝试确认我收到以下错误消息
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *
[STARTED] npm run lint
[FAILED] npm run lint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
✖ npm run lint:
> my-repo@0.1.0 lint
> vue-cli-service lint "/home/.../my-repo/README.md"
error: Parsing error: Invalid character at README.md:1:1:
> 1 | # my-repo
| ^
2 |
3 | ---
4 |
1 error found.
npm ERR! code 1
npm ERR! path /home/my-repo
npm ERR! command failed
npm ERR! command sh -c lint-staged
npm ERR! A complete log of this run can be found in:
npm ERR! /home/.../.npm/_logs/2021-12-27T10_07_27_498Z-debug.log
husky - pre-commit hook exited with code 1 (error)
它应该做什么
只修复修改过的文件。 linter 知道它能够修复的文件（js、ts、vue、html、...）。
修改 markdown 文件后，我在打开终端和 运行 npm run lint 时没有收到任何错误。但是在这个设置中使用 lint-staged 时我确实遇到了错误 "*": "npm run lint"
lint-staged 到仅 lint“lintable”文件的正确设置是什么？
关于评论的更新
其他 lint-staged 语法
我建议 "**/*.{js,vue}": ["npm run lint:js:fix"]，首先，lint:js:fix 是主观的，由您决定。这是 Kent C Dodds 使用的，所以我只是用同样的方式命名它。
但你完全可以用 lint:watermelon-potato-hehe 代替，没关系。
现在，关于你的提议：
"**/*.{vue,js,jsx,ts,tsx}": "npm run lint"，这个是针对更多的扩展，这完全没问题。你可能不会真正使用 .tsx/.jsx，因为它在 Vue 开发者中并不流行。
关于 .ts 本身，它可能工作得很好（也许你需要在你的 ESlint 配置中添加一些插件）。我不喜欢 TS，所以我不能在这方面提供帮助，但无论如何它都不在 husky/lint-staged 范围内。
上次我开始一个 Vue3 项目时，我使用了 Vitesse，它有一些很好的 TS 默认值，这对你来说可能是一个好的开始。
至于第二部分，因为我喜欢设置我自己的 ESlint 配置，使用一些简单且有据可查的 API，我们使用 eslint --ext .js,.vue --fix。这样我就可以确定发生了什么以及如何在需要时进行故障排除。
vue-cli-service lint 可能是一个很好的针对 Vue 的默认包，带有一些默认值，我不确定它里面有什么，即使它可能只是一个带有一些内置配置的 ESlint，我们还是更喜欢制作我们自己的 Vue 配置使用香草 ESlint。
所以是的，如果你需要快速进行，请使用 vue-cli-service lint 进行一些快速检查，如果你希望在你的项目中有更好的流程并希望细化你的配置，请使用 vanilla ESlint，你整个 IMO 的麻烦会减少。
"**/*.{vue,js,jsx,ts,tsx}": "eslint --ext .vue,.js,.jsx,.ts,.tsx --fix"。在右侧，我们在全球范围内拥有相同的 lint:js:fix 脚本，但具有额外的扩展。
那么，您可能会问，为什么我们还要在 lint-staged 的左侧和 lint:js:fix 的右侧编写扩展名？我会回答说，右侧（AFAIK）并不真正需要这些，因为 lint-staged 只会 运行 左侧扩展列表的命令。
在这里，我们希望更明确地说明我们所针对的确切扩展名，并且它使您能够在任何给定点在 CLI 中 运行 npm run lint:js:fix 而不会在 ESlint 未处理的文件上出现错误（ .txt、.json、.md、.jpg 等...).
所以它可能会被删除（不确定），最快的方法就是尝试！
"**/*.{vue,js,jsx,ts,tsx}": "eslint --fix"，如前一段所述，这个可能工作正常。自己没试过。
其他扩展程序呢？
关于 .html，你的 Vue 项目中不应该有很多这样的东西。如果确实需要，您可以使用 W3C validator 检查任何错误。
如果你在 .vue 文件的 template 标签中谈论你的 HTML，这些将被正确地使用 ESlint。如果你在它上面设置一个 Prettier，你还会得到一些很好的自动格式化，这真的很棒（一旦你的团队就 .prettierrc 配置达成一致）。
关于 .json 个文件，这些文件不由 ESlint 处理。 ESlint 仅适用于 JavaScript-ish 文件。如果你想要 lint/format 你的 .json 甚至任何其他扩展，你可以瞄准 NPM，找到一个适合你团队需要的包并将它添加到你的链中，比如 "**/*.json": ["npm run lint-my-json-please"] 和你应该好好的！
最后，husky + lint-staged 并没有做什么特别的事情。它们是将您可以在 CLI 中编写的内容自动化的工具，因此如果它在手动完成时工作并且您对结果感到满意，您可以将它放入您的配置中，但您需要首先找到正确的包及其配置.
在您的 package.json 中，您可以拥有以下内容
"scripts": {
"lint:js": "eslint . --ext .js,.vue",
"lint:js:fix": "eslint --ext .js,.vue --fix",
},
在你的.lintstagedrc
{
"**/*.{js,vue}": ["npm run lint:js:fix"]
}
在.husky/pre-commit
#!/bin/sh
. "$(dirname "[=12=]")/_/husky.sh"
npm run lint-staged
在.husky/commit-msg
#!/bin/sh
. "$(dirname "[=13=]")/_/husky.sh"
npx --no-install commitlint --edit ""
您可以在 VScode 中设置 （保存文件时的 lint + 格式化程序也很容易实现）。
这样，您就可以运行 npm run lint:js自己检查问题了。
否则，让 husky 运行 lint-staged 并将 eslint --fix 应用于所有 .js 和 .vue 文件。
你的 commitlint.config.js 配置应该没问题！
在此提醒，lint:js 将扫描您的所有 JS 和 Vue 文件。
然而，当你提交并执行 husky 时（通过 运行 宁 lint:js:fix 脚本），ONLY 你接触过的文件将被检查（这就是全部lint-staged).
点
我使用 Vue CLI 创建了一个新的 Vue3 应用程序，并为我的 linter 配置选择了 Prettier。我想使用 commitlint、husky 和 lint-staged 来验证提交消息并在推送之前检查代码。
我做了什么
基于https://commitlint.js.org/#/guides-local-setup 我用 husky
设置了 commitlintnpm install --save-dev @commitlint/{cli,config-conventional}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
npm install husky --save-dev
npx husky install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit '
基于 https://github.com/okonet/lint-staged#installation-and-setup 我设置了 lint-staged
npx mrm@2 lint-staged
在 package.json 里面我替换了
"lint-staged": {
"*.js": "eslint --cache --fix"
}
和
"lint-staged": {
"*": "npm run lint"
}
问题
将项目中的README.md文件修改为
时# my-repo
---
new commit
并尝试确认我收到以下错误消息
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *
[STARTED] npm run lint
[FAILED] npm run lint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
✖ npm run lint:
> my-repo@0.1.0 lint
> vue-cli-service lint "/home/.../my-repo/README.md"
error: Parsing error: Invalid character at README.md:1:1:
> 1 | # my-repo
| ^
2 |
3 | ---
4 |
1 error found.
npm ERR! code 1
npm ERR! path /home/my-repo
npm ERR! command failed
npm ERR! command sh -c lint-staged
npm ERR! A complete log of this run can be found in:
npm ERR! /home/.../.npm/_logs/2021-12-27T10_07_27_498Z-debug.log
husky - pre-commit hook exited with code 1 (error)
它应该做什么
只修复修改过的文件。 linter 知道它能够修复的文件（js、ts、vue、html、...）。
修改 markdown 文件后，我在打开终端和 运行 npm run lint 时没有收到任何错误。但是在这个设置中使用 lint-staged 时我确实遇到了错误 "*": "npm run lint"
lint-staged 到仅 lint“lintable”文件的正确设置是什么？
关于评论的更新
其他 lint-staged 语法
我建议 "**/*.{js,vue}": ["npm run lint:js:fix"]，首先，lint:js:fix 是主观的，由您决定。这是 Kent C Dodds 使用的，所以我只是用同样的方式命名它。
但你完全可以用 lint:watermelon-potato-hehe 代替，没关系。
现在，关于你的提议：
"**/*.{vue,js,jsx,ts,tsx}": "npm run lint"，这个是针对更多的扩展，这完全没问题。你可能不会真正使用.tsx/.jsx，因为它在 Vue 开发者中并不流行。
关于.ts本身，它可能工作得很好（也许你需要在你的 ESlint 配置中添加一些插件）。我不喜欢 TS，所以我不能在这方面提供帮助，但无论如何它都不在 husky/lint-staged 范围内。
上次我开始一个 Vue3 项目时，我使用了 Vitesse，它有一些很好的 TS 默认值，这对你来说可能是一个好的开始。
至于第二部分，因为我喜欢设置我自己的 ESlint 配置，使用一些简单且有据可查的 API，我们使用 eslint --ext .js,.vue --fix。这样我就可以确定发生了什么以及如何在需要时进行故障排除。
vue-cli-service lint 可能是一个很好的针对 Vue 的默认包，带有一些默认值，我不确定它里面有什么，即使它可能只是一个带有一些内置配置的 ESlint，我们还是更喜欢制作我们自己的 Vue 配置使用香草 ESlint。
所以是的，如果你需要快速进行，请使用 vue-cli-service lint 进行一些快速检查，如果你希望在你的项目中有更好的流程并希望细化你的配置，请使用 vanilla ESlint，你整个 IMO 的麻烦会减少。
"**/*.{vue,js,jsx,ts,tsx}": "eslint --ext .vue,.js,.jsx,.ts,.tsx --fix"。在右侧，我们在全球范围内拥有相同的lint:js:fix脚本，但具有额外的扩展。
那么，您可能会问，为什么我们还要在 lint-staged 的左侧和 lint:js:fix 的右侧编写扩展名？我会回答说，右侧（AFAIK）并不真正需要这些，因为 lint-staged 只会 运行 左侧扩展列表的命令。
在这里，我们希望更明确地说明我们所针对的确切扩展名，并且它使您能够在任何给定点在 CLI 中 运行 npm run lint:js:fix 而不会在 ESlint 未处理的文件上出现错误（ .txt、.json、.md、.jpg 等...).
所以它可能会被删除（不确定），最快的方法就是尝试！
"**/*.{vue,js,jsx,ts,tsx}": "eslint --fix"，如前一段所述，这个可能工作正常。自己没试过。
其他扩展程序呢？
关于 .html，你的 Vue 项目中不应该有很多这样的东西。如果确实需要，您可以使用 W3C validator 检查任何错误。
如果你在 .vue 文件的 template 标签中谈论你的 HTML，这些将被正确地使用 ESlint。如果你在它上面设置一个 Prettier，你还会得到一些很好的自动格式化，这真的很棒（一旦你的团队就 .prettierrc 配置达成一致）。
关于 .json 个文件，这些文件不由 ESlint 处理。 ESlint 仅适用于 JavaScript-ish 文件。如果你想要 lint/format 你的 .json 甚至任何其他扩展，你可以瞄准 NPM，找到一个适合你团队需要的包并将它添加到你的链中，比如 "**/*.json": ["npm run lint-my-json-please"] 和你应该好好的！
最后，husky + lint-staged 并没有做什么特别的事情。它们是将您可以在 CLI 中编写的内容自动化的工具，因此如果它在手动完成时工作并且您对结果感到满意，您可以将它放入您的配置中，但您需要首先找到正确的包及其配置.
在您的 package.json 中，您可以拥有以下内容
"scripts": {
"lint:js": "eslint . --ext .js,.vue",
"lint:js:fix": "eslint --ext .js,.vue --fix",
},
在你的.lintstagedrc
{
"**/*.{js,vue}": ["npm run lint:js:fix"]
}
在.husky/pre-commit
#!/bin/sh
. "$(dirname "[=12=]")/_/husky.sh"
npm run lint-staged
在.husky/commit-msg
#!/bin/sh
. "$(dirname "[=13=]")/_/husky.sh"
npx --no-install commitlint --edit ""
您可以在 VScode 中设置
这样，您就可以运行 npm run lint:js自己检查问题了。
否则，让 husky 运行 lint-staged 并将 eslint --fix 应用于所有 .js 和 .vue 文件。
你的 commitlint.config.js 配置应该没问题！
在此提醒，lint:js 将扫描您的所有 JS 和 Vue 文件。
然而，当你提交并执行 husky 时（通过 运行 宁 lint:js:fix 脚本），ONLY 你接触过的文件将被检查（这就是全部lint-staged).