1.描述

我们希望在 commit 代码时，先执行一遍 eslint代码检查 和 preitter格式化。

当以上两个任务执行完成以后在进行提交，并且如果 eslint检查出代码有问题，就取消提交。

我们可以使用 husky工具完成，这一切基于 git中的hooks。

2.提交时: 校验代码

在执行此步骤时，请先确保项目以初始化 git 仓库。

npm install husky lint-staged -D

我只希望对 git add . 后的文件进行检测，而不是对项目中的所有文件检查。

需要实现以上这个工具，就需要用到我们上面安装的 lint-staged 工具。

需要配合 .gitignore 文件让 git 去忽略一些文件：node_modules...

随后执行以下命令，生成一个新文件夹，里面存放着一些 hooks 和其它文件。

npx husky init

随后会生成一个 .husky 文件夹
打开 pre-commit 文件，它是提交代码时的钩子
将里边的内容修改为：npx lint-staged

然后在 package.json 文件的根节点下配置 lint-staged。

"lint-staged": {
    "*.{js,vue,ts}": [
        "npm run eslint",
        "npm run prettier-format"
    ]
}

在上面提到了 lint-staged 这个工具是获取 git add . 暂存区文件的。

配置中只挑选暂存区中的 js | vue | ts 文件执行校验和格式化，如果 eslint 校验没有问题，那么就提交成功了，如果有问题就提交失败，它们还存储在暂存区。

需要注意的是：npm run eslint 及 prettier-format，需要在 script对象中自行配置 eslint 和 prettier 命令。

"scripts": {
    "eslint": "eslint "src/**/*.{vue,js,ts}" --fix",
    "prettier-format": "prettier --config .prettierrc.js "src/**/*.{vue,js,ts}" --write"
},

3.提交时: 校验提交描述

在提交代码时，如果希望提交描述有一个规范，可以按照以下的方式。

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

然后在 git客户端 或者 vscode的git base 中，定位到该项目根目录，执行以下命令。

不要使用 cmd 执行，虽然可以创建文件，但是执行时有问题。

echo "npx --no -- commitlint --edit ${1}" > .husky/commit-msg

然后新建一个 commitlint.config.js 配置文件，将以下的内容粘贴进去。

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                // 编译相关的修改，例如发布版本，对项目构建或者依赖的改动
                'build',
                // 新功能(feature)
                'feat',
                // 修复bug
                'fix',
                // 更新某功能
                'update',
                // 重构
                'refactor',
                // 文档
                'docs',
                // 构建过程或者辅助工具的变动,如增加依赖库等
                'chore',
                // 不影响代码运行的变动
                'style',
                // 撤销commit,回滚到上一个版本
                'revert',
                // 性能优化
                'perf',
                // 测试(单元,集成测试)
                'test',
            ],
        ],
        'type-case': [0],
        'type-empty': [0],
        'scope-empty': [0],
        'scope-case': [0],
        'subject-full-stop': [0, 'never'],
        'subject-case': [0, 'never'],
        'header-max-length': [0, 'always', 74],
    },
};

提交格式：类型: 描述

git commit -m "feat: 用户注册"

git commit -m "fix: 用户无法修改头像"