编程规范解决方案之ESLint+Git Hooks

零度碳酸
562 阅读6分钟

一、代码格式化 ESLint+Prettier

ESLint

配置文件遵循 commonJS 的导出规则，所到处的对象就是ESLint 的配置对象 文档：eslint.bootcss.com/docs/user-g…

以vue-cli@5.x创建的vue3项目为例：

默认选择了ESLint + Standard config

image.png

会默认生成一个名叫.eslintrc.js的文件

image.png

.eslintrc.js

module.exports = {
  //表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  //env 表示启用 ESLint 检测的环境
  env: {
    //在node 环境下启用 ESLint 检测
    node: true
  },
  //ESLint 中基础配置需要继承的配置
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  //解析器
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  //需要修改的启用规则及其各自的错误级别
  /**
  *错误级别分为三种
  * "off"   或   0 --关闭规则
  * "warn"  或   1 --开启规则，使用警告级别的错误：warn(不会导致程序退出)
  * "error" 或   2 --开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)
  */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Prettier

  • 代码格式化工具
  • 开箱即用
  • 直接集成到VSCode
  • 保存时，让代码直接符合ESLint
  1. 在vscode中安装 prettier插件
  2. 在项目中新建 .prettierrc文件，该文件为 prettier 默认配置文件
  3. 在该文件中写入如下配置：
{
  //不尾随分号
  "semi": false,
  //使用单引号
  "singleQuote": true,
  //多行逗号分隔的语法中，最后一行不加逗号
  "trailingComma": "none"
}
  1. 打开vscode 设置面板

image.png 5. 在设置中搜索 save，勾选Format On Save

image.png

至此即可在vscode保存时，自动格式化代码了 但是还有以下3个问题需要注意

  1. vscode而言，默认一个tab 等于4个空格，而ESLint 希望一个tab为两个空格 image.png
  2. 如果大家的VSCode 安装了多个代码格式化工具的话
  3. ESLint 和 Prettier 之间的冲突问题

image.png

二、git提交规范

Angular团队规范延伸出的（约定式提交规范）

image.png

2-1：Commitizen助你肤规范化提交代码

image.png

安装并使用commitizen

  1. 全局安装Commitizen
npm install -g commitizen@4.2.4

2.安装并配置 cz-customizable 插件

  • 2-1使用 npm 下载 cz-customizable
npm install cz-customizable@6.3.0 --save-dev
  • 2-2添加以下配置到package.json中
"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
  1. 在项目根目录下创建 .cz-config.js 自定义提示文件
module.exports = {
  //  可选类型
  types: [
    { value: 'feat', name: 'feat: 新功能' },
    { value: 'fix', name: 'fix: 修复' },
    { value: 'docs', name: 'docs: 文档变更' },
    { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },
    { value: 'refactor', name: 'refactor: 重构代码' },
    { value: 'perf', name: 'perf: 性能优化' },
    { value: 'test', name: 'test: 测试' },
    { value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert: 回滚' },
    { value: 'build', name: 'build: 打包' }
  ],
  // 消息步骤
  messages: {
    type: '选择你的提交类型:',
    customScope: '选择你的修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细内容(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认提交？(y/n)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认72
  subjectLimit: 72
}
  1. 使用 git cz 代替 git commit 使用 git cz 代替 git commit,即可看到提示内容 那么到这里我们就已经可以使用git cz来代替 git commit 实现了规范化的提交诉求了，但是当前依然存在着一个问题，那就是我们必须要通过 git cz 指令才可以完成规范化提交！ 如果忘记使用git cz指令 直接提交了怎么办？ 往下继续看

2-2：什么是Git Hooks?

再来明确一下我们最终想要实现的效果： 我们希望：当提交描述信息不符合约定式提交规范的时候，阻止当前的提交，并抛出对应的错误提示， 而要实现这个目的，我们就需要先来了解一个概念，叫做 Git hooks（git 钩子 || git 回调方法） 也就是git在执行某个事件之前或之后进行一些其他额外的操作 而我们所期望的阻止不合规的提交消息，那么就需要使用到hooks的钩子函数。 常用的git hooks:

image.png

image.png

2-3:使用 husky+commitlint 检查提交描述是否符合规范要求

我们了解了 git hooks的概念，那么接下来我们就使用 git hooks来去校验我的提交信息 需要使用两个工具：

  1. commitlint:用于检查提交信息
  2. husky:是git hooks工具

注意⚠️：npm 需要在7.x以上版本！！！

1.安装commitlint

npm install @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4 --save-dev

2.创建commitlint.config.js文件 以utf-8的格式保存

module.exports = {
  // 继承规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则
  roles: {
    // type的类型定义
    'type-enum': [
      // 提交类型
      // 当前验证错误的级别
      2,
      // 在什么情况可以验证
      'always',
      // 泛型内容
      [
        'feat', // 新功能
        'fix', // 修复
        'docs', // 文档变更
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构代码
        'perf', // 性能优化
        'test', // 测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回滚
        'build' // 打包
      ]
    ],
    // subject大小写不做校验
    'subject-case': [0]
  }
}
  1. 接下来安装husky
  • 3.1、安装依赖
npm install husky@7.0.1 --save-dev
  • 3.2、启动hooks,生成 .husky 文件夹
npx husky install

执行成功提示：

image.png

  • 3.3、在 package.json 中生成 prepare指令（需要npm > 7.0版本）
npm set-script prepare "husky install"

image.png

  • 3.4、添加commitlint 的hook 到husky中，并指令在commit-msg 的hooks下执行npx --no-install commitlint --edit "$1" 指令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  • 3.5此时 .husky 的文件结构

image.png

至此，不符合规范的 commit 信息将不再可提交！ 但是现在我们的规范化目标还缺少一个规范化的处理，那就是代码格式提交规范处理

2-4:通过 pre-commit 检测提交时代码规范

在ESLint 与Prettier配合解决代码格式问题时，也只能够在本地进行处理，并且我们还需要手动在 vscode中配置自动保存才可以。那么就会存在一个问题，要是有人忘记配置这个东西了怎么办？然后还把代码写的乱七八糟的直接就提交了怎么办？所以我们就需要有一种方式来规避这种风险。想要完成这么一个操作就需要使用husky 配合 eslint 才可以实现。 我们期望通过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时运行)
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
  1. 该操作会生成对应文件 pre-commit:

image.png 3. 关闭 VSCode的自动保存操作 4. 修改一处代码，使其不符合 ESLint检验规则 5. 执行提交操作会发现，抛出一系列的错误，代码无法提交

image.png 6. 想要提交代码，必须处理完成所有的错误信息

那么到这里，就已经通过pre-commit 检测到了代码的提交规范问题，这里会存在两个问题：

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

还差最后一步，就是借助lint-staged自动修复格式错误。

2-5:lint-staged自动修复格式错误

image.png

  1. 修改package.json配置
"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }

image.png 3. 需要修改 .husky/pre-commit文件 image.png 4. 再次执行提交代码；
5. 发现暂存区中不符合ESLint的内容，被自动修复

avatar
文章
阅读
粉丝