阅读 1323

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

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

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

踩坑详记(一)传送门juejin.cn/post/698252…

上篇文章最后我们提到,在开发阶段进行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组件主题。

Git仓库

github.com/YuanDaoDao0…

文章分类
前端
文章标签