Husky 和 Lint-staged 入门指南：Git 提交时自动进行代码校验和格式化

大家好, 在上一篇Vue3+Vite 项目，如何配置 ESLint 和 Prettier 实现代码规范化？中描写了如何给我们的Vite+Vue3项目配置ESLint和Prettier, 此篇我们将记录husky和lint-staged实现git提交代码时对项目代码进行检查与格式化.

安装 husky 和 lint-staged

用例：当您想使用其他代码质量工具和 Prettier（例如 ESLint、Styleint 等）时，或者如果您需要对部分暂存文件进行检查时（git add --patch），这很有用。

在继续操作之前，请确保 Prettier 已安装并位于 devDependencies 中。

pnpm dlx mrm lint-staged
# or
npx mrm lint-staged

这将安装husky和lint-staged，然后向项目的package.json添加一个配置，该配置将在pre-commit hook 中自动检查并格式化支持的文件。

在lint-stagedrepo 中阅读更多信息。

下面是我的操作过程

pnpm dlx mrm lint-staged
.../Library/pnpm/store/v3/tmp/dlx-82832  | +266 +++++++++++++++++++++++++++
.../Library/pnpm/store/v3/tmp/dlx-82832  | Progress: resolved 266, reused 227, downloaded 39, added 266, done
Running lint-staged...
Update package.json
Installing lint-staged and husky...
Packages: +45
+++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 948, reused 907, downloaded 0, added 45, done

devDependencies:
+ husky 8.0.3
+ lint-staged 13.2.0

Done in 12.6s
husky - Git hooks installed
husky - created .husky/pre-commit

让我们来看一下package.json中都发生了什么

// package.json
{
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": ">=7",
    "lint-staged": ">=10"
  },
  "lint-staged": {
    // 带着 --cache 执行代码检查后会在项目根目录自动生成一个 .eslintcache 文件
    "*.{vue,js,jsx,ts,tsx}": "eslint --cache --fix"
  }
}

让我们来看看 --cache 是干什么的?

存储有关已处理文件的信息，以便仅对已更改的文件进行操作。启用此选项可以确保只对更改后的文件进行检查，从而显著提高 ESLint 的运行时性能。默认情况下，缓存存储在.eslintcache 中。

这个文件里边缓存了被检查文件的本地绝对路径, 那么我们每个开发人员执行lint-staged或git提交后生成的.eslintcache里边的路径应该都是不一样的, 我猜可能会出现冲突, 所以建议把这个文件加到.gitignore中忽略掉, 或者也可以选择不使用--cache, 当不使用--cache进行检查时, .eslintcache文件会被自动删掉, 如需了解更多可以查看下面的参考资料

--cache 参考资料

同时, 在我们的项目根目录增加了一个.husky文件夹, 里边是这样的

注意: 这个执行命令自动生成的, 手动创建的好像不好使, 不过可以自己修改生成后的文件里边的命令, 比如我们用的pnpm包管理器, 就可以修改npx lint-staged为pnpm dlx lint-staged

总结

一行命令搞定(推荐)👍🏻

下一篇使用 commitlint、cz 和 husky 校验 Git 提交信息并生成 CHANGELOG, 将带来commitlint检查git提交message, 使用cz-conventional-changelog帮助强制开发者规范git提交message, release-it自动更新版本号并且自动生成CHANGELOG.md