husky + commitlint + lint-staged 配置git提交校验

配置好的码云地址

安装

npm install husky --save-dev

使用

npm pkg set scripts.prepare="husky install"
执行后如果未生成可以手动添加"prepare": "husky install"到package.json的scripts配置下
npm run prepare
当设置了该配置脚本后，在我们执行 npm install 命令操作时，会自动执行 npm run prepare 命令，即会执行 husky install 命令，并在项目的根目录下生成 .husky 目录

pre-commit配置

npx husky add .husky/pre-commit "npm test"
执行改脚本后会在.husky下生成pre-commit文件，并会有一条npm test语句（这条语句是你要提交前校验的语句，要根据eslint配置去设置，可以是npx eslint src；也可以根据lint-staged配置，npx lint-staged ；还可以是scripts 中设置的lint命令）

commit-msg

对git提交信息中 message 的规范，也是我们在项目开发中必不可少的一环，这块内容对团队协作、版本日志等都能带来帮助。
提交 message 的规范有多种约定式的规范，如 Conventional Commits specification，但只靠规范约定很显然不能保证规范完整正确的被执行，所以需要辅助工具来帮助我们处理，比如 commitlint。

安装commitlint

npm install @commitlint/cli -D
npm install @commitlint/config-conventional -D

配置commitlint

增加 .commitlintrc.js 配置文件：

module.exports = {
  extends: ['@commitlint/config-conventional']
}
现在我们已经安装好了commitlint并且写好了配置，但是还没有用到它，需要配置git hooks 的commit-msg生命周期

设置commit-msg hook

使用脚本命令执行，自动生成该文件和内容：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
脚本执行完后会在.husky目录下新建commit-msg文件 里面会在commit-msg生命周期执行时通过commitlint的规则来校验

lint-staged

在介绍 pre-commit 的时候，我们使用了 npx eslint src 命令来处理代码规范。但它存在一个问题，就是每次git提交都会对整个项目src中的所有文件都进行检测，很多时候这是不需要的，最好的方法就是对新修改的代码进行检测。
而 lint-staged 工具就是基于此，只针对提交的代码文件进行检查处理。

安装 lint-staged

npm install lint-staged -D
lint-staged 需要增加配置，一般可以使用两类方式。

1.直接在package.json文件中增加内容，如下所示：

"lint-staged": {
  "*.{js,jsx,vue,ts}": [
    "eslint src"
  ]
}

2.或者，增加配置文件，如 lintstagedrc.json，内容如下：

{
  "*.{js,jsx,vue,ts}": ["eslint src"]
}

配置好以后，可以修改pre-commit文件，添加以下脚本：

npx lint-staged
这就是上面pre-commit配置中提到的备注

跳过 git hooks

git commit -m '跳过hook' --no-verify

git hooks生命周期介绍

husky安装完成，并配置好脚本后，我们就可以进行 git hooks 的设置。
git hooks 让我们能够在git操作的特定命令发生时自动执行自定义的脚本，用来完成一些额外的事情。
而我们在git提交信息的规范中，一般常用的两个阶段是：pre-commit 和 commit-msg：

pre-commit：在代码提交之前执行。可处理代码格式规范等。
commit-msg：处理代码提交的message信息。
除此以外，git hooks还有多个阶段，可以在需要的时候启用，比如以下这些：

pre-receive：从本地版本完成一个推送后
prepare-commit-msg：信息准备完成后但编辑尚未启动
pre-push：push 之前执行
post-update：在工作区更新完成后执行
pre-rebase：在rebase操作之前执行

补充-后续使用vite++vue3+ts创建项目遇到问题

1.使用vite +vue-ts模版创建项目后配置eslint提示

Error [ERR_REQUIRE_ESM]: require() of ES Module........cosmiconfig/dist/loaders.js not supported.

解决：vite创建时会自动在package.json中添加"type": "module",删除就好了
vite官方解释：注意：即使项目没有在 package.json 中开启 type: "module"，Vite 也支持在配置文件中使用 ESM 语法。这种情况下，配置文件会在被加载前自动进行预处理。

————————————————
版权声明：本文为CSDN博主「前端江湖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jimojianghu/article/details/128792748