《教你怎么用 commitlint+ESLint 规范 git 提交信息与代码质量》-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，写代码的时候难免会出现各种各样的错误，有些是拼写错误，有些是代码风格不规范，这些错误如果不加处理，会影响代码的可维护性以及协作效率。同时，一份好的代码，除了运行结果正确以外，还需要规范的 git 提交信息，这可以使我们在以后的代码迭代中，能够更快地找到相关的代码，并了解代码变更的原因。本文将介绍如何使用 commitlint 和 ESLint 工具来规范 git 提交信息和代码质量。

commitlint

commitlint 是一个可以自定义提交信息规范的工具。它会检查每条 git 提交信息是否符合规范，并在不符合规范时发出警告和错误，防止我们不规范的习惯加入代码库。

commitlint 的安装

你可以通过 npm 命令全局安装 commitlint：

npm install -g @commitlint/cli

commitlint 的配置

安装完 commitlint 以后，我们需要在项目根目录中创建一个名为 .commitlintrc 的文件，用来配置 commitlint 的规则。下面是配置示例：

// www.javascriptcn.com code example
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 自定义规则
    'header-max-length': [2, 'always', 100],
    'type-case': [2, 'always', 'lower-case'],
    'type-enum': [
      1,
      'always',
      ['feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert', 'test']
    ],
    'subject-case': [2, 'always', 'sentence-case'],
    'subject-empty': [2, 'never']
  }
}

上述示例中，我们引入了 @commitlint/config-conventional 包，它预设了常用的 Git 提交规范，包括 type 和 scope 等属性：

<type>(<scope>): <subject>

<body>

<footer>

其中：

type：指定了该次提交的类型，包括 feat（功能）、fix（修复 bug）、docs（文档）、refactor（重构）、test（测试）等。
scope：指定了影响的范围，可以是任何有意义的描述，用括号包含在 type 后面。
subject：简要描述本次提交的内容。
body：详细描述本次提交的更改内容。
footer：一些重要的备注信息。

我们也可以根据自己项目规范，自定义一些规则，例如：

header-max-length：指定 header 的最大长度为 100
type-case：指定 type 的格式为小写
type-enum：指定可以使用的 type 类型
subject-case：指定 subject 的格式为句首大写
subject-empty：不允许空白的 subject

commitlint 的使用

在配置完成后，我们可以使用 commitlint 工具来进行 git 提交信息检查。

比如我们提交信息：

git commit -m 'Feat(app): 完成首页布局'

这时我们就能看到 commitlint 的校验结果：

⧗   input: feat(app): 完成首页布局
✖   subject must not be empty [subject-empty]
✖   type must be one of [feat, fix, refactor, docs, chore, style, revert, test] [type-enum]
✖   header must not be longer than 100 characters, current length is 18 [header-max-length]

✖   found 3 problems, 0 warnings

根据 commitlint 的提示，我们可以修改提交信息，符合规范后再重新提交。

ESLint

ESLint 是一个 JavaScript 代码检查工具，可以提供代码规范，找出一些潜在的代码错误。

ESLint 的安装

你可以通过 npm 命令全局安装 ESLint：

npm install -g eslint

ESLint 的配置

安装完成后，我们可以在项目中创建 .eslintrc.js 文件，该文件用于配置 ESLint 规则。以下是示例配置：

// www.javascriptcn.com code example
module.exports = {
  root: true,
  env: {
    node: true,
    es6: true,
    browser: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-var': 2,
    'semi': [2, 'never']
  }
}

root：标识当前目录为根目录。
env：指定代码执行的环境，例如 browser（浏览器）、node（node 环境）等。
extends：配置继承 ESLint 推荐规则和一些其他的配置，例如 plugin:vue/recommended 可以将 Vue 项目中的推荐规范集成到 ESLint 中。
parser：指定解析器，vue-eslint-parser 可以解析 .vue 文件，@typescript-eslint/parser 可以解析 TypeScript 代码。
plugins：配置用到的插件，同样可以使用 vue 和 @typescript-eslint 插件。

在 rules 中定义某个规则的值有以下几种：

0 或者'off'：关闭规则。
1 或者'warn'：将规则视为一个警告，不影响退出码。
2 或者'error'：将规则视为一个错误，退出码为 1。

比如上述示例将规定：

不允许使用 var 关键字
语句后面不允许出现分号

ESLint 的使用

一旦配置完成，我们就可以使用 ESLint 检查代码了。比如我们编写了如下的代码：

var a = 1;

运行 ESLint 检查后，它会告诉我们不允许使用 var 关键字：

1:1  error  Unexpected var, use let or const instead  no-var

然后我们就可以修改代码，改为使用 let 关键字，然后再运行 ESLint 代码检查。

结语

本文介绍了 commitlint 和 ESLint 两个工具的使用方法，学习并应用它们可以使你的代码更加规范、易于维护，同时也有助于在团队协作中提高效率。在使用 commitlint 和 ESLint 时，需要注意在每次提交或运行检查之前，先检查一下自己的代码或者提交信息是否符合规范。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c6a7a0cf1e9924e1eef8d7

《教你怎么用 commitlint+ESLint 规范 git 提交信息与代码质量》