如何为 Vue 项目设置 lint-staged？

Question

我使用 Vue CLI 创建了一个新的 Vue3 应用程序，并为我的 linter 配置选择了 Prettier。我想使用 commitlint、husky 和 ​​lint-staged 来验证提交消息并在推送代码之前检查代码。

\n

我做了什么

\n

基于https://commitlint.js.org/#/guides-local-setup我用 husky 设置了 commitlint

\n

npm install --save-dev @commitlint/{cli,config-conventional}\necho "module.exports = { extends: [\'@commitlint/config-conventional\'] };" > commitlint.config.js\n\nnpm install husky --save-dev\nnpx husky install\nnpx husky add .husky/commit-msg \'npx --no -- commitlint --edit $1\'\n

\n

基于https://github.com/okonet/lint-staged#installation-and-setup我设置了 lint-staged

\n

npx mrm@2 lint-staged\n

\n

在 package.json 中我替换

\n

"lint-staged": {\n  "*.js": "eslint --cache --fix"\n}\n

\n

和

\n

"lint-staged": {\n  "*": "npm run lint"\n}\n

\n

问题

\n

当修改项目中的README.md文件为

\n

# my-repo\n\n---\n\nnew commit\n

\n

并尝试提交我收到以下错误消息

\n

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -\n[STARTED] Preparing...\n[SUCCESS] Preparing...\n[STARTED] Running tasks...\n[STARTED] Running tasks for *\n[STARTED] npm run lint\n[FAILED] npm run lint [FAILED]\n[SUCCESS] Running tasks...\n[STARTED] Applying modifications...\n[SKIPPED] Skipped because of errors from tasks.\n[STARTED] Reverting to original state because of errors...\n[SUCCESS] Reverting to original state because of errors...\n[STARTED] Cleaning up...\n[SUCCESS] Cleaning up...\n\n\xe2\x9c\x96 npm run lint:\n\n> my-repo@0.1.0 lint\n> vue-cli-service lint "/home/.../my-repo/README.md"\n\nerror: Parsing error: Invalid character at README.md:1:1:\n> 1 | # my-repo\n    | ^\n  2 |\n  3 | ---\n  4 |\n\n\n1 error found.\nnpm ERR! code 1\nnpm ERR! path /home/my-repo\nnpm ERR! command failed\nnpm ERR! command sh -c lint-staged\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     /home/.../.npm/_logs/2021-12-27T10_07_27_498Z-debug.log\nhusky - pre-commit hook exited with code 1 (error)\n

\n

应该做什么

\n

仅修复已修改的文件。linter 了解它能够修复的文件（js、ts、vue、html...）。

\n

当修改了 markdown 文件时，打开终端并运行时不会出现错误npm run lint。但在使用此设置的 lint-staged 时，我确实遇到了错误"*": "npm run lint"

\n

仅 lint 阶段到 lint “lintable”文件的正确设置是什么？

\n

Answer 1

关于评论的更新

其他 lint 阶段语法

我所建议的"**/*.{js,vue}": ["npm run lint:js:fix"]，首先，lint:js:fix是主观的，取决于你。这是 Kent C Dodds 使用的，所以我只是以同样的方式命名它。

但你完全可以代替lint:watermelon-potato-hehe，没关系。

现在，关于您的建议：

1. "**/*.{vue,js,jsx,ts,tsx}": "npm run lint"，这个目标是更多扩展，这完全没问题。你可能不会真正使用它.tsx/.jsx，因为它在 Vue 开发人员中并不是很流行。
   就.ts其本身而言，它可能工作得足够好（也许您需要在 ESlint 配置中添加一些插件）。我不喜欢 TS，所以我无法真正帮助解决这个问题，但无论如何它超出了 husky/lint-staged 范围。
   上次我开始一个 Vue3 项目时，我使用了Vitesse，它对 TS 有一些很好的默认设置，这对你来说可能是一个好的开始。

至于第二部分，由于我喜欢使用一些简单且文档齐全的 API 设置自己的 ESlint 配置，因此我们使用eslint --ext .js,.vue --fix. 这样我就可以确定发生了什么以及如何在需要时排除故障。
vue-cli-service lint可能是一个很好的默认包，针对 Vue，有一些默认设置，我不确定里面有什么，即使它可能只是一个带有一些内置配置的 ESlint，我们还是更喜欢制作自己的 Vue使用 vanilla ESlint 进行配置。

所以，是的，如果你需要快速进行，请使用vue-cli-service lint一些快速 linting，如果你想在项目中拥有更好的流程并希望细化你的配置，请使用 vanilla ESlint，总体而言，我认为你会遇到更少的麻烦。

2. "**/*.{vue,js,jsx,ts,tsx}": "eslint --ext .vue,.js,.jsx,.ts,.tsx --fix"。在右侧，我们在全球范围内具有相同的lint:js:fix脚本，但具有其他扩展。

那么，您可能会问为什么我们要在左侧写扩展名 for lint-staged，在右侧写扩展名 for lint:js:fix？我的回答是，右侧实际上并不需要这些（AFAIK），因为 lint-staged 只会将命令运行到左侧扩展列表。
在这里，我们希望更明确地说明我们所针对的确切扩展，并且它使您能够npm run lint:js:fix在任何给定点在 CLI 中运行，而不会在 ESlint 未处理的文件上出现错误（.txt、.json、.md等.jpg...）。
所以它可能会被删除（不确定），最快的确定方法就是尝试！

3. "**/*.{vue,js,jsx,ts,tsx}": "eslint --fix"，这可能会正常工作，如上一段所述。自己没有尝试过。

那么其他扩展呢？

关于.html，你的 Vue 项目中不应该有很多这样的东西。如果您确实需要，可以使用W3C 验证器来检查任何错误。如果您在文件的标签
中谈论您的 HTML ，那么这些将被正确地进行 ESlint 处理。如果你在它上面设置一个 Prettier，你还将获得一些很好的自动格式化功能，这真的很棒（一旦你的团队就配置达成一致）。template.vue.prettierrc

对于.json文件，ESlint 不处理这些文件。ESlint 仅适用于 JavaScript 风格的文件。如果你想对你的.json甚至任何其他扩展进行 lint/格式化，你可以瞄准 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 "$0")/_/husky.sh"

npm run lint-staged

在.husky/commit-msg

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit ""

您可以设置ESlint 来观察 VScode 中文件中的任何错误（保存文件时使用 lint + 格式化程序也很容易）。

这样你就可以npm run lint:js自己跑去检查问题了。
否则，让 husky 运行 lint-staged 并将其应用于eslint --fix您的所有.js文件.vue。

你的commitlint.config.js配置应该没问题！

这里提醒一下，lint:js将会扫描你所有的 JS 和 Vue 文件。
然而，当您提交并执行 husky 时（通过运行脚本lint:js:fix），只有您接触过的文件才会被 linted（这就是 的全部要点lint-staged）。