10

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

我做了什么

基于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 $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 的正确设置是什么？

4

1 回答 1

3

关于评论的更新

其他 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，我们还是更喜欢制作我们自己的 Vue使用香草 ESlint 进行配置。

所以，是的，如果你需要快速运行，使用vue-cli-service lint一些快速的 linting，如果你想在你的项目中有更好的流程并且想要细化你的配置，使用 vanilla ESlint，你会在整个 IMO 中遇到更少的麻烦。

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

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

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

关于.html，你的 Vue 项目中不应该有很多。如果你真的需要它，你可以使用W3C 验证器来检查任何错误。如果您在文件中的标签中
谈论您的 HTML，那么这些标签将被正确地 ESlint。如果您在其上设置 Prettier，您还将获得一些非常棒的自动格式化（一旦您的团队就配置达成一致）。template.vue.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 ""

您可以设置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）。

于 2021-12-29T17:21:00.913 回答