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

Question

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

我做了什么

基于https://commitlint.js.org/#/guides-local-setup我用哈士奇设置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 $1'

基于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、...）。

当有一个修改过的降价文件时，我在打开终端并运行npm run lint 时没有收到任何错误。但是在此设置中使用 lint-staged 时确实会出错"*": "npm run lint"

对于 lint-staged 仅对“lintable”文件进行 lint 的正确设置是什么？

Answer 1

关于 cmets 的更新

其他 lint-staged 语法

我建议"**/*.{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 中有一些不错的默认值，这对你来说可能是一个好的开始。

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

所以，是的，如果您需要快速运行，请使用 vue-cli-service lint 进行快速 linting，如果您想在项目中有更好的流程并希望细化您的配置，请使用原版 ESlint，您会得到更少给 IMO 带来麻烦。

1. "**/*.{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、@987654339 @、.md、.jpg 等...）。
所以它可能会被删除（不确定），确定的最快方法是尝试！

1. "**/*.{vue,js,jsx,ts,tsx}": "eslint --fix"，这个可以正常工作，如上一段所述。没试过，我自己想的。

其他扩展呢？

关于.html，你的 Vue 项目中不应该有很多这些。如果您确实需要，可以使用 W3C validator 检查任何错误。
如果您在 .vue 文件中的 template 标记中谈论您的 HTML，那么这些将被正确地 ESlint。如果您在其上设置 Prettier，您还将获得一些非常棒的自动格式化（一旦您的团队同意 .prettierrc 配置）。

关于.json 文件，这些不是由 ESlint 处理的。 ESlint 仅适用于 JavaScript-ish 文件。如果您想对.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 ""

您可以在 VScode 中设置ESlint to watch any errors in your files（保存文件时使用 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 的全部意义所在）。