网络日志

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

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

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

  1. 我们只修改了个别的文件,没有必要检测所有的文件代码格式
  2. 它只能给我们提示出对应的错误,我们还需要手动的进行代码修改

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

那么想要处理这两个问题,就需要使用另外一个插件 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
  1. 修改 package.json 配置

      "gitHooks": {
        "pre-commit": "lint-staged"
      },
    
      "lint-staged": {
        "src/**/*.{js,vue}": [
          "eslint --fix",
          "git add"
        ]
      }
  2. 如上配置,每次它只会在你本地 commit 之前,校验你提交的内容是否符合你本地配置的 eslint规则(这个见文档 ESLint ),校验会出现两种结果:

    1. 如果符合规则:则会提交成功。
    2. 如果不符合规则:它会自动执行 eslint --fix 尝试帮你自动修复,如果修复成功则会帮你把修复好的代码提交,如果失败,则会提示你错误,让你修好这个错误之后才能允许你提交代码。
  1. 修改 .husky/pre-commit 文件

    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"
    
    npx lint-staged
    
  2. 再次执行提交代码
  1. 发现 暂存区中 不符合 ESlint 的内容,被自动修复

2-14:总结

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

  1. 代码格式规范
  2. git 提交规范

代码格式规范:

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

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

git 提交规范:

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

  1. 约定式提交规范
  2. commitizen:git 提交规范化工具
  3. commitlint:用于检查提交信息
  4. pre-commitgit hooks 钩子
  5. lint-staged:只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送