vue 代码提交github前进行eslint检测_eslint提交代码时校验

前言

本文基于

• “husky”: “^8.0.3”
• “lint-staged”: “^15.0.2”

1.安装 husky

npm install husky --dev
1

or

yarn add husky --dev
1

2.配置 package.json 的 scripts 字段

"scripts": {
   ...
   "prepare": "husky install"
}
1
2
3
4

3.生成 .husky 文件夹

npm run prepare
1

or

yarn prepare
1

项目根目录将会生成一个 .husky 文件夹

4.生成 pre-commit 文件

 npx husky add .husky/pre-commit
1

or

yarn husky add .husky/pre-commit
1

5.配置 pre-commit 文件

npx lint-staged
1

6.安装 lint-staged

lint-staged 是文件过滤器，它只会校验等待提交的文件

npm install lint-staged --dev
1

or

yarn add lint-staged --dev
1

7.配置 package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,ts,vue}": [
    "prettier --write",
    "eslint"
  ]
}
1
2
3
4
5
6
7
8
9
10
11

8.测试配置

增加一行无法通过 eslint 检测的代码，提交时报错拦截

打开 GIT 日志，查看详细的报错信息

遇到问题

.husky/_/husky.sh 文件不存在

.husky/pre-commit: line 2: .husky/_/husky.sh: No such file or directory
1

解决：

1.删除.husky文件夹
2.重新安装 husky 插件
3.执行 yarn prepare
4.检查 husky.sh 文件是否存在

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。