当前位置:   article > 正文

vue 代码提交github前进行eslint检测_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 文件是否存在

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/988496
推荐阅读
相关标签
  

闽ICP备14008679号