开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第28天，点击查看活动详情

前言

在项目中编写代码时通常会执行一套标准，比如用单引号还是双引号，语句后时候加分号等等。如果提交的代码标准不统一是不太好的。前文中使用了eslint和prettier去自动规范了代码，如果有同事没有手动保存直接提交了不合规范的代码，我们的期望是不能提交成功，今天记录以下如何解决这个问题

检查提交代码是否规范

如果有程序员写了不符合规范的代码，需要一种方法去阻止提交

前文介绍过pre-commit钩子，会在提交前被调用，并且可以按需指定是否要拒绝本次提交，那么我们就可以通过pre-commit去检查提交时的代码规范

需要通过前文中提到过的husky 监测 pre-commit 钩子，在该钩子下执行 npx eslint --ext .js,.vue src 指令来进行检查

运行指令

npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src

可以看到.husky文件生成了pre-commit

接下来当我们提交不符合规范的代码时，代码就会无法提交

上文提到了如何检查提交时代码是否规范，如果不规范就会阻止提交。之后还需要我们去手动修改代码，所以我们的需求是当不规范的代码提交时，他能自动修复错误格式，以正确的格式提交，处理这个问题可以用到插件lint-staged

lint-staged会检查本次修改的代码，并把不符合规范的代码自动修复为正确格式后推送

lint-staged在使用脚手架时已经安装，直接配置即可

package.json

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

.husky/pre-commit

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

npx lint-staged

配置完成后，如果提交代码不符合本地的eslint标准，它就会执行eslint --fix 自动修复代码，如果修改失败，则需要我们修改错误后再提交