git hooks + lint-staged 利用husky检测git hooks钩子(pre-commit)自动修复代码格式

准备:npm>7.0版本(npm install -g npm)
husky
1.安装husky依赖

npm install husky@7.0.1 --save-dev

2.启动hooks,生成 .husky 文件夹

npx husky install

3.在package.json 中生成 prepare 指令

npm set-script prepare “husky install”

4.执行 prepare 指令

npm run prepare

5.执行成功,生成如下文件
在这里插入图片描述
6.执行 npx husky add .husky/pre-commit "npx lint-staged" 添加 commit 时的hook
7.第6步,将会成成对应文件 pre-commit
在这里插入图片描述
8.关闭 VSCode 的自动保存操作(Format On Save)
9.完成如下 lint-staged 配置

lint-staged
说明:lint-staged可以让你当前的代码检查 只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送。lint-staged 无需单独安装,我们生成项目时,vue-clie 已经帮我们安装好了,我们可以直接使用即可。
1.修改 package.json 配置

  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

2.如上配置,每次只会在你本地 commit 之前,校验你提交的内容是否符合你本地配置的eslint规则,校验会出现两种结果:
(1)如果符合规则:则会提交成功。
(2)如果不符合规则:它会自动执行 eslint --fix 尝试帮你自动修复,如果修复成功则会帮你帮把修复好的代码提交,如果失败,则会提示你错误,让你修好这个错误之后才允许你提交代码。
3.执行提交代码
4.发现 暂存区中 不符合ESlint 的内容,被自动修复

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值