提示:这篇博客以我前两篇博客作为先修知识,请大家先去看看我前两篇博客
博客指路:前端 ESlint 代码规范及修复代码规范错误-CSDN博客前端 Vue3 项目开发—— ESLint & prettier 配置代码风格-CSDN博客
husky 工具配置代码检查工作流的作用
在工作中,我们经常需要将写好的代码提交至代码仓库
但是由于程序员疏忽而将不规范的代码提交至仓库,显然是不合理的
所以我们需要引入一种检查机制,若代码不规范,就不允许提交
提交前做代码检查
husky 是一个 git hooks 工具 ( git的钩子工具,可以在特定时机执行特定的命令 )
husky 配置
1、git初始化 git init(若已有仓库则跳过这一步)
2、初始化 husky 工具配置 Husky
pnpm dlx husky-init && pnpm install
3、修改 .husky / pre-commit 文件
pnpm lint
暂存区 eslint 校验
问题:pnpm lint 默认进行的是全量检查,耗时问题,历史问题
耗时问题 -> 如果项目过大,校验耗时也大
历史问题 -> 且如果拉取同事的代码,校验之后发现同事的代码有很多规范问题,我们还要替同事背这个锅,显然不合理。因为 eslint 的校验可能并不是一开始就有的,而是在工作过程中逐步建立起来的,所以可能旧的代码没有经过校验就被提交了
所以能不能改改机制,每次提交都只检查最新改动的代码?这样才符合实际工作需求
如何实现?
lint-staged 配置
安装
pnpm i lint-staged -D
配置 package.json
{
// ... 省略 ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}
修改 .husky/pre-commit 文件
pnpm lint-staged