注册
vue

Vue3+Vite+TS+Eslint(Airbnb规则)搭建生产项目,踩坑详记(二):配置husky和lint-staged

上回我们说到配置ESLint以及添加vue-recommended、airbnb-base、prettier规则,一切都很顺利。唯有一点需要注意的就是 .eslintrc 文件extends配置项中,plugin:prettier/recommended一定要在airbnb-base之后添加,上篇文章没有看到的童鞋们可以回去看看原因。


上篇文章最后我们提到,在开发阶段进行ESLint校验,效果是一件靠自觉的事。因此我们需要在代码提交前再次执行ESLint,加强校验力度以保证Git上得到的都是优美的代码。


我们本次需要用到的工具有两个:huskylint-staged


husky


它的主要作用就是关联git的钩子函数,在执行相关git hooks时进行自定义操作,比如在提交前执行eslint校验,提交时校验commit message等等。


Install


husky官网推荐使用自动初始化命令,因为我们就按照官网推荐的方式进行安装,以npm为例


// && 连接符在vscode中会报错,建议在windows的powershell执行
npx husky-init && npm install

执行完成后,项目根目录会多出来 .husky 文件夹。


image.png


内部的_文件夹我们在此无需关心,pre-commit文件便是在git提交前会执行的操作,如图。我们可以在当前目录创建钩子文件来完成我们想要的操作。


image.png


需要注意的是,新版husky的配置方式做出了破坏性的改变,如果在使用过程中发现配置完以后没有生效,可以注意查看一下安装版本


升级方式可以查看官方文档:typicode.github.io/husky/#/?id…


配置


我们想要在提交前执行eslint校验代码,因此修改husky的pre-commit文件即可。我们在文件中添加如下代码


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

eslint . --ext .js,.ts,.vue --fix #++ 校验所有的.js .ts .vue文件,并修复可自动修复的问题
git add . #++ 用于将自动修复后改变的文件添加到暂存区
exit 1 #++ 终止命令,用来测试钩子

此时提交代码执行commit是可以看到已经进入了pre-commit文件执行命令。但是会报错


image.png


这是因为此处执行shell命令,需要我们全局安装eslint。执行 npm install -g eslint。
安装完成后再次执行git commit,可以看到已经可以正常运行了


image.png


错误处理




  • 截图中第一个报错是书写错误,直接改掉就好。




  • 第二个错误,是因为我们的ESLint中没有配置TS的解析器,导致ESLint不能正常识别并校验TS代码。解决它,我们安装 @typescript-eslint/parser,并修改ESLint配置即可。




npm install @typescript-eslint/parser --save-dev

// .eslintrc.js
...
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser', // ++
},
...


  • 第三个错误,它说的是我们引入的vite和@vitejs/plugin-vue两个包在 package.json 中应该是dependencies而不是devDependencies依赖。这个错误是因为airbnb-base规则设置了不允许引入开发依赖包,但是很明显我们不应该修改这两个框架生成的依赖结构。那我们看一下airbnb关于这条规则的定义

image.png
可以看到,airbnb对这条规格做了列外处理,那就很好办了,我们只需要在它的基础上,添加上上面报错的两个包。


在eslint中添加如下规则:


// .eslintrc.js
...
rules: {
...
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
... // 保持airbnb-base中的规则不变
'**vite**', // ++
'**@vitejs**', // ++
],
optionalDependencies: false,
},
],
}
...

修改完上述错误后,我们去掉 .husky/pre-commit 文件中 exit 1 这行代码,再次执行提交操作,可以看到,已经可以提交成功了。


image.png


思考


通过配置husky,我们已经实现了在提交前对代码进行检查。但是eslint配置的是 eslint . --ext .js,.ts,.vue --fix,检查所有的js、ts、vue文件,随着项目代码越来越多,每次提交前校验所有代码显然是不现实的。所以需要一个办法每次只检查新增或修改的文件。


这就需要开头提到的第二个工具来祝我们一臂之力了。


lint-staged


lint-staged的作用就是对暂存区的文件执行lint,可以让我们每次提交时只校验自己修改的文件。


npm install lint-staged --save-dev

配置lint-staged


安装完成后,在package.json文件中添加lint-staged的配置


// package.json
...
"scripts": {
...
"lint-staged": "lint-staged"
},
"lint-staged": {
// 校验暂存区的ts、js、vue文件
"*.{ts,js,vue}": [
"eslint --fix",
"git add ."
]
}

添加scripts里的lint-staged命令,是因为不建议全局安装lint-staged,以防在其他同学电脑上没有全局安装导致运行报错。


修改husky


添加lint-staged配置后,husky就不在需要直接调用eslint了。修改pre-commit文件如下:


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# eslint . --ext .js,.ts,.vue --fix
# git add .
# exit 1
npm run lint-staged

lint-staged配置后,我们不再需要配置husky时全局安装的eslint,因为lint-staged可以检测项目里局部安装的脚本。同时,不建议全局安装脚本,原因同上。


测试


到此,提交阶段对代码执行lint需要的配置我们已经完成了。再次提交代码测试,可以看到commit后执行的命令已经变成了lint-staged。


image.png


下一篇踩坑记我们将引入Element-plus,详细介绍其中遇到的问题,并修改element组件主题。


链接:https://juejin.cn/post/6982876819292684318

0 个评论

要回复文章请先登录注册