六、标准化编程规范解决方案之自动修复 lint-staged

在上一章中我们通过 pre-commit 处理了 检测代码的提交规范问题，当我们进行代码提交时，会检测所有的代码格式规范 。

但是这样会存在两个问题：

那么这一小节，我们就需要处理这两个问题

那么想要处理这两个问题，就需要使用另外一个插件 lint-staged ！

lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

如果在生成项目时我们选择了如下配置则无需单独安装，vue-cli 已经帮助我们安装过了，所以我们直接使用就可以了

? Pick additional lint features: 
 (*) Lint on save //  
>(*) Lint and fix on commit  // 保存时 && 提交时，都进行 lint

如果在生成项目时没有选择如上配置则需要单独安装

npm install --save-dev lint-staged@10.1.4

修改 package.json 配置

  "gitHooks": {
    "pre-commit": "lint-staged"
  },

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

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

修改 .husky/pre-commit 文件

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

npx lint-staged

2-14：总结

本系列中我们处理了 编程格式规范的问题，整个规范大体可以分为两大类：

代码格式规范：

对于 代码格式规范 而言，我们通过 ESLint + Prettier + VSCode 配置 配合进行了处理。

最终达到了在保存代码时，自动规范化代码格式的目的。

git 提交规范：

对于 git 提交规范 而言我们使用了 husky 来监测 Git hooks 钩子，并且通过以下插件完成了对应的配置：