1、依赖包介绍

ps：我这里使用pnpm作为包管理工具。

esLint

node 复制代码

pnpm install -D eslint

eslint是大家熟知的代码规范检测和修复的插件。这里我们要使用到他做一个提交前的代码检测和修复。

@commitlint/cli 和 @commitlint/config-conventional

node 复制代码

pnpm install -D @commitlint/cli @commitlint/config-conventional

@commitlint/cli主要用于检查项目Git提交的信息是否符合特定的格式规范。 @commitlint/config-conventional这个包就是一套基于 Angular 团队的 Git 提交规范的配置。与上面的cli做一个配合。

commitizen

node 复制代码

pnpm install -g commitizen

这里需要全局安装commitizen包，它提供了一个交互式的命令行界面来引导开发者填写信息，使用命令git cz代替原始的git commit，如下图所示：

cz-customizable

node 复制代码

pnpm install -D cz-customizable

cz-customizable包是commitizen的扩展，自定义commitizen的交互界面信息。

husky

node 复制代码

pnpm install -D husky

husky包提供了git的一系列hooks（钩子）供开发者使用。如钩子中的发生错误，会停止当前git操作。Git所有钩子的介绍

lint-staged

node 复制代码

pnpm install -D lint-staged

lint-staged包可以对git提交前暂存的文件进行lint检查和自动修复。可以与eslint进行配合。

2、思路分析

我们可以从前往后推分析一下思路：

我们利用commitizen提供的 git cz 指令代替 git commit 指令，调出由cz-customizable提供的自定义界面供开发者按照规范选择对应的操作，并且输入一些描述。

再使用@commitlint/cli与@commitlint/config-conventional对提交的描述进行检查，如果失败则停止提交。

完成git cz之后，利用husky的钩子调用lint-staged配合eslint进行代码的检查和修复，最后git push完成整个git操作。

3、实现过程

自定义交互界面显示

首先我们要让commitizen执行我们cz-customizable自定义的交互页面。

js 复制代码

    // 在package.json中加入以下代码
    "config": {
        "commitizen": {
          "path": "node_modules/cz-customizable"
        }
    },

然后，我们需要创建一个.cz-config.js的文件提供交互信息。进入官网看详细配置

js 复制代码

    module.exports = {
        // 可选类型
        types: [
            { value: 'feat', name: 'feat:     新功能' },
            { value: 'fix', name: 'fix:      修复' },
            { value: 'docs', name: 'docs:     文档变更' },
            { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
            {
              value: 'refactor',
              name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
            },
            { 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/e/h)'
        },
        // 跳过问题
        skipQuestions: ['body', 'footer'],
        // subject文字长度默认是72
        subjectLimit: 72
    };

git提交描述校验

我们要创建一个commitlint.config.js的文件，给commitlint一些规则去校验描述信息。这些规则都继承于@commitlint/config-conventional提供的规则。

js 复制代码

module.exports = {
    // 继承的规则
    extends: ['@commitlint/config-conventional'],
    // 定义规则类型
    rules: {
        // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
        'type-enum': [
            2,
            'always',
            [
                'feat', // 新功能 feature
                'fix', // 修复 bug
                'docs', // 文档注释
                'style', // 代码格式(不影响代码运行的变动)
                'refactor', // 重构(既不增加新功能，也不是修复bug)
                'perf', // 性能优化
                'test', // 增加测试
                'chore', // 构建过程或辅助工具的变动
                'revert', // 回退
                'build' // 打包
            ]
        ],
        // subject 大小写不做校验
        'subject-case': [0]
    }
};

eslint检测与修复

安装eslint后我们可以在根目录看到.eslintrc.js或者.eslintrc.cjs文件。没有的同学可以按照以下代码生成：

js 复制代码

npx eslint --init

具体的eslint配置可以看eslint的官网，这里就不做多介绍。eslint官网

我们主要要知道下面两个命令：

js 复制代码

// 检测src下所有.js和.vue结尾的文件有没有问题，判断根据.eslintrc.js中的rules规则决定。
npx eslint --ext .js,.vue src
// 尽可能修复代码，如果无法修复则会报错（在husky中会被拦截）
npx eslint --fix

配置lint-staged

我们只需要在package.json中加入下面的代码就好了，作用就是根据不同的文件进行修复。（prettier是一个代码格式化工具，没有使用的可以删掉）

js 复制代码

    "lint-staged": {
        "*.{vue,js,jsx,ts,tsx}": [
            "eslint --fix",
            "prettier --write"
        ],
        "*.{css,less,scss,html,md}": [
            "prettier --write"
        ],
        "package.json": [
            "prettier --write"
        ]
    }

现在我们直接在命令行输入npx lint-staged就可以进行代码检查和修复了。

配置husky实现最终效果

当我们安装完husky之后，我们需要在命令行中输入以下代码，初始化一个.husky的文件夹，所有git的钩子都会在这个文件夹中，根据不同的钩子执行不同的命令（钩子介绍官网可以看上面的链接）。

js 复制代码

npx husky install

接下来使用命令行生成一个commit-msg的钩子，运行指定命令，去检查提交的信息是否合法。

js 复制代码

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

至此git cz交互与描述检查就完成了。接下来就是提交代码前的自动修复功能了。

要完成这个功能我们还需要一个pre-commit的钩子，让他去执行npx lint-staged指令，完成检查和修复功能。代码如下：

js 复制代码

npx husky add .husky/pre-commit 'npx lint-staged'

这样整个检查与修复功能就完成了。

Eslint+Husky+Commitlint+Lint-staged实现Git提交描述检查与代码自动修复

1、依赖包介绍

esLint

@commitlint/cli 和 @commitlint/config-conventional

commitizen

cz-customizable

husky

lint-staged

2、思路分析

3、实现过程

自定义交互界面显示

git提交描述校验

eslint检测与修复

配置lint-staged

配置husky实现最终效果

3、最终成果

git cz交互

检测错误与修复

修复失败停止git操作

修复成功