携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
编程规范分析
这一篇就是编程规范的最后一部分了，上一篇我们通过 husky + commitlint 对提交的信息进行规范，同时阻止不符合规范的信息的提交，那么这就大功告成了吗？肯定没有啊。还有一个重点那就是提交时对代码进行格式化。
这时候有人就会想到，前边不是讲过相关的东西吗？就是那个通过 ESLint 和 Prettier 配合解决代码格式问题。
是的，但是那个我们说的是处理本地代码格式问题，并且使用时还得手动设置编辑器的自动保存功能才可以，这样就出现了一个问题，要是有人忘了怎么办？就直接把乱七八糟的代码提交到 git 又怎么办。
所以我们就需要借助工具来处理这个问题
那么想要实现这个操作我们还是得借助 husky 的钩子才行，我们的目的是在提交之前对代码进行相关的检测，所以需要用到 pre-commit 钩子，在其下执行 npx eslint --ext .js,.vue src 指令。
1、执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 时的 hook （npx eslint --ext .js,.vue src 会在执行到该 hook 时运行）
2、此时会生成对应的 pre-commit 文件
3、关闭 VSCode 的自动保存功能
4、修改一处代码，使其不符合 ESLint 的规则
5、执行提交操作就会抛出一系列得到错误，并且代码无法提交
到这里，我们已经可以阻止不符合规范的代码的提交了，然而事情并没有结束，除了进行校验，我们难道不能自动进行修复吗？
这必然也是可以的，下边就让我们一起来看一下。
要解决这个问题我们还得认识一个新的插件 lint-staged
lint-staged 可以让你当前的代码检查只检查本次修改的地方，并且在出现错误的时候自动修复后进行推送
lint-staged 无需进行安装，在我们生成项目时，vue-cli 已经替我们安装好了，可以直接使用
1、修改 package.json 配置
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
如上配置，每次它只会在你 commit 之前，校验你提交的内容是否符合你的 eslint 规则
2、如果符合规则则会提交成功；如果不符合规则，他会调用 eslint --fix 帮你进行修复，如果修复成功则会帮你进行提交，如果修复失败，则会抛出错误，让你手动修复
3、修改 .husky/pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
4、再次执行代码提交
5、此时发现的代码格式错误已经被自动修复
至此，项目的编码规范算是告一段落了。
