webpack脚手架的代码质量优化和git提交规范

目录

1.EditorConfig for VS Code

2.prettier

3.stylelint

4.eslint

5.husky + lint-statged

6.Commit 信息的 Linter - Commitlint

7.Commitizen

---

        本次博客是对上一期Webpack脚手架项目初始化以及优化的代码进行质量提升和git提交规范，同时也提升了打包速度。

这里我们需要下载几个插件：

1.EditorConfig for VS Code

在项目中引入 editorconfig 是为了在多人协作开发中保持代码的风格和一致性。不同的开发者使用不同的编辑器或IDE ，可能会有不同的缩进（比如有的人喜欢 4 个空格，有的喜欢 2 个空格）、换行符、编码格式等。甚至相同的编辑器因为开发者自定义配置的不同也会导致不同风格的代码，这会导致代码的可读性降低，增加代码冲突的可能性，降低了代码的可维护性。

在vscode拓展安装EditorConfig for VS Code插件，然后点击齿轮：

设置好后在根目录新建.editorconfig 文件：

# https://editorconfig.org
root = true           # 设置为true表示根目录，控制配置文件 .editorconfig 是否生效的字段

[*]                   # 匹配全部文件，匹配除了 `/` 路径分隔符之外的任意字符串
charset = utf-8       # 设置字符编码，取值为 latin1，utf-8，utf-8-bom，utf-16be 和 utf-16le，当然 utf-8-bom 不推荐使用
end_of_line = lf      # 设置使用的换行符，取值为 lf，cr 或者 crlf
indent_size = 2       # 设置缩进的大小，即缩进的列数，当 indexstyle 取值tab 时，indentsize 会使用 tab_width 的值
indent_style = space  # 缩进风格，可选space｜tab
insert_final_newline = true     # 设为true表示使文件以一个空白行结尾
trim_trailing_whitespace = true     # 删除一行中的前后空格

[*.md]                 # 匹配全部 .md 文件
trim_trailing_whitespace = false

2.prettier

每个人写代码的风格习惯不一样，比如代码换行，结尾是否带分号，单双引号，缩进等，而且不能只靠口头规范来约束，项目紧急的时候可能会不太注意代码格式，这时候需要有工具来帮我们自动格式化代码，而prettier 就是帮我们做这件事的。

在vscode拓展安装 prettier插件，然后点击齿轮：

 然后在控制台安装prettier ：

npm i prettier -D

然后在根目录新建.prettierrc.js 和 .prettierignore 文件：

// .prettierrc.js
module.exports = {
tabWidth: 2, // 一个tab代表几个空格数，默认就是2
useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为
false
printWidth: 100, // 一行的字符数，如果超过会进行换行
semi: false, // 行尾是否使用分号，默认为true
singleQuote: true, // 字符串是否使用单引号
trailingComma: 'all', // 对象或数组末尾是否添加逗号 none| es5| all
jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
arrowParens: 'avoid' // 箭头函数如果只有一个参数则省略括号
}

// .prettierignore
node_modules
dist
env
.gitignore
pnpm-lock.yaml
README.md
src/assets/*
.vscode
public
.github
.husky

再在项目根目录新建 .vscode 文件夹，内部新建 settings.json 文件配置文件，代码如下：

{
"search.exclude": {
"/node_modules": true,
"dist": true,
"pnpm-lock.yaml": true
},
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.validate.enable": false,
}

最后在 package.json 的 "scripts" 中加入以下脚本命令：

"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,stylus,html,md}\""

3.stylelint

安装 stylelint 插件和依赖：

npm i stylelint stylelint-config-css-modules stylelint-config-prettier
stylelint-config-standard stylelint-order -D

然后在根目录新建 .stylelintrc.js 和 .stylelintignore文件：

// .stylelintrc.js
// @see: https://stylelint.io
module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    // "stylelint-config-css-modules",
    // "stylelint-config-recess-order" // 配置stylelint css属性书写顺序插件,
  ],
  plugins: ["stylelint-order"],
  rules: {
    /**
  * indentation: null, // 指定缩进空格
  "no-descending-specificity": null, // 禁止在具有较高优先级的选择器后出现被其
  覆盖的较低优先级的选择器
  "function-url-quotes": "always", // 要求或禁止 URL 的引号 "always(必须加
  上引号)"|"never(没有引号)"
  "string-quotes": "double", // 指定字符串使用单引号或双引号
  "unit-case": null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
  "color-hex-case": "lower", // 指定 16 进制颜色的大小写 "lower(全小
  写)"|"upper(全大写)"
  "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制
  简写)"|"long(16进制扩写)"
  "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行
  "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multiline(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
  "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族
  名称列表中缺少通用字体族关键字
  "block-opening-brace-space-before": "always", // 要求在块的开大括号之前必
  须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不
  能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"neversingle-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左
  大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
  "property-no-unknown": null, // 禁止未知的属性(true 为不允许)
  "no-empty-source": null, // 禁止空源码
  "declaration-block-trailing-semicolon": null, // 要求或不允许在声明块中使
  用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
  "selector-class-pattern": null, // 强制选择器类名的格式
  "value-no-vendor-prefix": null, // 关闭 vendor-prefix(为了解决多行省略 -
  webkit-box)
  "at-rule-no-unknown": null,
  "selector-pseudo-class-no-unknown": [
  true,
  {
  ignorePseudoClasses: ["global", "v-deep", "deep"]
  }
  ]
  }
  */
    "selector-class-pattern": [
      // 命名规范 -
      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
      {
        message: "Expected class selector to be kebab-case",
      },
    ],
    "string-quotes": "double", // 单引号
    "at-rule-empty-line-before": null,
    "at-rule-no-unknown": null,
    "at-rule-name-case": "lower", // 指定@规则名的大小写
    "length-zero-no-unit": true, // 禁止零长度的单位（可自动修复）
    "shorthand-property-no-redundant-values": true, // 简写属性
    "number-leading-zero": "always", // 小数不带0
    "declaration-block-no-duplicate-properties": true, // 禁止声明快重复属性
    "no-descending-specificity": true, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器。
    "selector-max-id": null, // 限制一个选择器中 ID 选择器的数量
    "max-nesting-depth": 10,
    "declaration-block-single-line-max-declarations": 1,
    "block-opening-brace-space-before": "always",
    // 'selector-max-type': [0, { ignore: ['child', 'descendant','compounded'] }],
    indentation: [
      2,
      {
        // 指定缩进 warning 提醒
        severity: "warning",
      },
    ],
    "order/order": [
      "custom-properties",
      "dollar-variables",
      "declarations",
      "rules",
      "at-rules",
    ],
    "order/properties-order": [
      // 规则顺序
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "float",
      "width",
      "height",
      "max-width",
      "max-height",
      "min-width",
      "min-height",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "margin-collapse",
      "margin-top-collapse",
      "margin-right-collapse",
      "margin-bottom-collapse",
      "margin-left-collapse",
      "overflow",
      "overflow-x",
      "overflow-y",
      "clip",
      "clear",
      "font",
      "font-family",
      "font-size",
      "font-smoothing",
      "osx-font-smoothing",
      "font-style",
      "font-weight",
      "line-height",
      "letter-spacing",
      "word-spacing",
      "color",
      "text-align",
      "text-decoration",
      "text-indent",
      "text-overflow",
      "text-rendering",
      "text-size-adjust",
      "text-shadow",
      "text-transform",
      "word-break",
      "word-wrap",
      "white-space",
      "vertical-align",
      "list-style",
      "list-style-type",
      "list-style-position",
      "list-style-image",
      "pointer-events",
      "cursor",
      "background",
      "background-color",
      "border",
      "border-radius",
      "content",
      "outline",
      "outline-offset",
      "opacity",
      "filter",
      "visibility",
      "size",
      "transform",
    ],
  },
};

//.stylelintignore
*.js
*.tsx
*.ts
*.json
*.png
*.eot
*.ttf
*.woff
src/styles/antd-overrides.less
node_modules
dist
env
.gitignore
pnpm-lock.yaml
README.md
src/assets/*
.vscode
public
.github
.husky

配置.vscode/settings.json：

{
// ...
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": [
"css",
"less",
"sass",
"stylus",
"postcss"
]
}

4.eslint

ESLint 是一个在 JavaScript 代码中通过规 则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码 问题、提前避免错误发生。

1. 代码质量问题 ：使用方式有可能有问题， eslint 可以发现代码中存在的可能错误，如 使用未声明变 量 、 声明而未使用的变量 、 修改 const 变量 、 代码中使用 debugger 等等。

2. 代码风格问题 ：风格不符合一定规则， eslint 也可以用来统一团队的代码风格，比如 加不加分号 、 使 用 tab 还是空格 、 字符串使用单引号 等等。

安装 eslint 插件和包：

npm i eslint eslint-config-airbnb eslint-config-standard eslint-friendlyformatter eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node
eslint-plugin-promise eslint-plugin-react-hooks eslint-plugin-react
@typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-pluginprettier eslint-config-prettier -D

然后在根目录新建一个 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {
    // eslint (http://eslint.cn/docs/rules)
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'class-methods-use-this': 'off',
    'no-param-reassign': 'off',
    'no-unused-expressions': 'off',
    'no-plusplus': 0,
    'no-restricted-syntax': 0,
    'consistent-return': 0,
    '@typescript-eslint/ban-types': 'off',
    // "import/no-extraneous-dependencies": "off",
    '@typescript-eslint/no-non-null-assertion': 'off',
    'import/no-unresolved': 'off',
    'import/prefer-default-export': 'off', // 关闭默认使用 export default 方式导出
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    '@typescript-eslint/no-use-before-define': 0,
    'no-use-before-define': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    'no-shadow': 'off',
    // "@typescript-eslint/no-var-requires": "off"
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        '': 'never',
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    // "no-var": "error", // 要求使用 let 或 const 而不是 var
    // "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
    // "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
    // "prefer-const": "off", // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
    // "no-irregular-whitespace": "off", // 禁止不规则的空白
    // // typeScript (https://typescript-eslint.io/rules)
    // "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
    // "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
    // "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript模块和命名空间。
    // "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
    // "@typescript-eslint/ban-ts-ignore": "off", // 禁止使用 @ts-ignore
    // "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
    // "@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
    // "@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句
    // "@typescript-eslint/no-empty-function": "off", // 禁止空函数
    // "@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们
    // "@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
    // "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
    // "@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型
    // // react (https://github.com/jsx-eslint/eslint-plugin-react)
    // "react-hooks/rules-of-hooks": "error",
    // "react-hooks/exhaustive-deps": "off"
  },
  settings: {
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        moduleDirectory: ['node_modules', 'src/'],
      },
    },
    react: {
      version: 'detect',
    },
  },
}

再在根目录新建一个 .eslintignore 文件：

node_modules
dist
env
.gitignore
pnpm-lock.yaml
README.md
src/assets/*
.vscode
public
.github
.husky

添加 eslint语法检测脚本， 在package.json 的 scripts 中新增：

"lint:eslint": "eslint --fix --ext .js,.ts,.tsx ./src",

执行 pnpm run lint:eslint ，控制台将会爆出一系列 warning ：

在 .eslintrc.js 和 rules 平级添加 settings 配置，让eslint 自己检测 react 版本，对应 issuse ：

settings: {
"react": {
"version": "detect"
}
}

eslint 与 prettier 冲突，安装两个依赖：

npm i eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.js 的 extends 中加入：

module.exports = {
// ...
extends: [
// ...
'plugin:prettier/recommended', // <==== 增加一行
],
// ...
}

最后再配置一下 .vscode/settings.json ：

{
// ...
"eslint.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
}

5.husky + lint-statged

使用 lint-staged 优化 eslint检测速度，在 package.json 添加 lint-staged 配置：

"lint-staged": {
"src/**/*.{ts,tsx}": [
"pnpm run lint:eslint",
"pnpm run lint:prettier"
]
},

因为要检测 git 暂存区代码，所以如果你的项目还没有使用 git 来做版本控制，需要执行 git init

初始化一下 git ：

git init

初始化 git 完成后就可以进行测试了，先提交一下没有语法问题的 App.tsx：

git add src/App.tsx

把 src/App.tsx 提交到暂存区后，执行 npx lint-staged ，会顺利通过检测。

假如我们现在把 package.json 中的 "lint:eslint" 改一下，加一个 --max-warnings=0 ，表示允

许最多 0 个警告，就是只要出现警告就会报错：

"lint:eslint": "eslint --fix --ext .js,.ts,.tsx ./src --max-warnings=0",

然后执行：

git add src/App.tsx
npx lint-staged

你就会发现控制台出现了 warning ：

使用 tsc 检测类型和报错：

需要注意的是，执行 tsc 命令可能会生成一个编译后的产物文件，需想要避免这个问题，需要在

tsconfig.json 中加入 "noEmit": true ：

{
    "compilerOptions": {
        //...
        "noEmit": true, // 不生成输出文件（例如.js文件）
        //...
    }
}

在项目中使用了 ts ，但一些类型问题，现在配置的 eslint 是检测不出来的，需要使用 ts 提供的 tsc

工具进行检测，如下示例 :

在 index.tsx 定义了函数 hello ，参数 name 是 string 类型，当调用传 number 类型参数时，页面有了明显的ts 报错，但此时提交 index.tsx 文件到暂存区后执行 npx lint-staged ：

 发现没有检测到报错，所以需要配置下 tsc 来检测类型，在 package.json 添加脚本命令 ：

"pre-check": "tsc && npx lint-staged"

执行 pnpm run pre-check ，发现已经可以检测出类型报错了。

 配置 husky：

为了避免把不规范的代码提交到远程仓库，一般会在 git 提交代码时对代码语法进行检测，只有检测通过时才能被提交，git 提供了一系列的 githooks ，而我们需要其中的 pre-commit 钩子，它会在 git commit 把代码提交到本地仓库之前执行，可以在这个阶段检测代码，如果检测不通过就退出命令行进程停止 commit 。

安装 husky：

npm i husky -D

配置 husky 的 pre-commit 钩子：

生成 .husky 配置文件夹（如果项目中没有初始化 git ，需要先执行 git init ）

npx husky install

会在项目根目录生成 .husky 文件夹，生成文件成功后，需要让 husky 支持监听 pre-commit 钩子，监听到后执行上面定义的 pnpm run pre-check 语法检测。

npx husky add .husky/pre-commit 'pnpm run pre-check'

会在 .husky 目录下生成 pre-commit 文件，里面可以看到我们设置的 npm run pre-check 命令。

 然后提交代码进行测试 ：

git add .
git commit -m "feat: add code validate"

会发现监听 pre-commit 钩子执行了 pnpm run pre-check , 使用 eslint 检测了 git 暂存区的两个文

件，并且发现了 index.tsx 的警告，退出了命令行，没有执行 git commit 把暂存区代码提交到本地仓库。

6.Commit 信息的 Linter - Commitlint

首先安装 Commitlint ：

npm i @commitlint/cli -D

安装完成后，由于 Commitlint 的配置档是必要的，因此要建立配置档 commitlint.config.js ：

module.exports = {
rules: {
'header-min-length': [2, 'always', 10],
},
};

接着执行 commitlint ：

 echo 'foo' | npx commitlint

 当 message 信息为 foo 时，由于长度只有3，因此 Commitlint 会视为违规而输出错误讯息。

为了节省配置规则的时间， Commitlint 可以使用预先配置的规则包来设定多项规则。使用前须要先安装：

npm i @commitlint/config-conventional -D

这里使用 @commitlint/config-conventional 是 Commitlint 提供的规则包。安装完成后，要在配

置中设定使用规则包：

module.exports = {
extends: ['@commitlint/config-conventional'],
// ...
};

使用 Husky 为 Commitlint 注册 Git Hooks：

接下来我们使用 Husky 将 Commitlint 融入 Git flow 中，让其更加的易用。使用 husky add 将指

令加入 Git hooks ：

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

修改完后，要重新注册 Git hooks ：

npx husky install

7.Commitizen

为了避免写出不符规范的 commit message 而提交失败， Commitizen 使用问答的方式，让使用者在完成问答时就可以边写出符合规范的信息，以减少来回的次数。

指定提交文字规范，一款工程性更强、高度自定义、标准输出格式的 commitizen 适配器：

npm i commitizen cz-git -D -g

配置 package.json ：

"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}

配置 commitlint.config.js 文件：

module.exports = {
  ignores: [commit => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'subject-case': [0],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
        'release',
      ],
    ],
  },
  prompt: {
    messages: {
      // type: "Select the type of change that you're committing:",
      // scope: 'Denote the SCOPE of this change (optional):',
      // customScope: 'Denote the SCOPE of this change:',
      // subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
      // body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
      // breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
      // footerPrefixsSelect: 'Select the ISSUES type of changeList by this change (optional):',
      // customFooterPrefixs: 'Input ISSUES prefix:',
      // footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
      // confirmCommit: 'Are you sure you want to proceed with the commit above?',
      // 中文版
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围（可选）:',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      footerPrefixsSelect: '选择关联issue前缀（可选）:',
      customFooterPrefixs: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?',
    },
    types: [
      // {
      //   value: 'feat',
      //   name: 'feat: 🚀 A new feature',
      //   emoji: '🚀',
      // },
      // {
      //   value: 'fix',
      //   name: 'fix: 🧩 A bug fix',
      //   emoji: '🧩',
      // },
      // {
      //   value: 'docs',
      //   name: 'docs: 📚 Documentation only changes',
      //   emoji: '📚',
      // },
      // {
      //   value: 'style',
      //   name: 'style: 🎨 Changes that do not affect the meaning of the code',
      //   emoji: '🎨',
      // },
      // {
      //   value: 'refactor',
      //   name: 'refactor: ♻️ A code change that neither fixes a bug nor adds a feature',
      //   emoji: '♻️',
      // },
      // {
      //   value: 'perf',
      //   name: 'perf: ⚡️ A code change that improves performance',
      //   emoji: '⚡️',
      // },
      // {
      //   value: 'test',
      //   name: 'test: ✅ Adding missing tests or correcting existing tests',
      //   emoji: '✅',
      // },
      // {
      //   value: 'build',
      //   name: 'build: 📦 Changes that affect the build system or external dependencies',
      //   emoji: '📦',
      // },
      // {
      //   value: 'ci',
      //   name: 'ci: 🎡 Changes to our CI configuration files and scripts',
      //   emoji: '🎡',
      // },
      // {
      //   value: 'chore',
      //   name: "chore: 🔨 Other changes that don't modify src or test files",
      //   emoji: '🔨',
      // },
      // {
      //   value: 'revert',
      //   name: 'revert: ⏪️ Reverts a previous commit',
      //   emoji: '⏪️',
      // },
      // 中文版
      { value: '特性', name: '特性: 🚀 新增功能', emoji: '🚀' },
      { value: '修复', name: '修复: 🧩 修复缺陷', emoji: '🧩' },
      { value: '文档', name: '文档: 📚 文档变更', emoji: '📚' },
      {
        value: '格式',
        name: '格式: 🎨 代码格式（不影响功能，例如空格、分号等格式修正）',
        emoji: '🎨',
      },
      { value: '重构', name: '重构: ♻️ 代码重构（不包括 bug 修复、功能新增）', emoji: '♻️' },
      { value: '性能', name: '性能: ⚡️ 性能优化', emoji: '⚡️' },
      { value: '测试', name: '测试: ✅ 添加疏漏测试或已有测试改动', emoji: '✅' },
      {
        value: '构建',
        name: '构建: 📦 构建流程、外部依赖变更（如升级 npm包、修改 webpack 配置等）',
        emoji: '📦',
      },
      { value: '集成', name: '集成: 🎡 修改 CI 配置、脚本', emoji: '🎡' },
      { value: '回退', name: '回退: ⏪️ 回滚 commit', emoji: '⏪️' },
      {
        value: '其他',
        name: '其他: 🔨 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）',
        emoji: '🔨',
      },
    ],
    useEmoji: true,
    themeColorCode: '',
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: 'bottom',
    customScopesAlias: 'custom',
    emptyScopesAlias: 'empty',
    upperCaseSubject: false,
    allowBreakingChanges: ['feat', 'fix'],
    breaklineNumber: 100,
    breaklineChar: '|',
    skipQuestions: [],
    issuePrefixs: [{ value: 'closed', name: 'closed: ISSUES has been processed' }],
    customIssuePrefixsAlign: 'top',
    emptyIssuePrefixsAlias: 'skip',
    customIssuePrefixsAlias: 'custom',
    allowCustomIssuePrefixs: true,
    allowEmptyIssuePrefixs: true,
    confirmColorize: true,
    maxHeaderLength: Infinity,
    maxSubjectLength: Infinity,
    minSubjectLength: 0,
    scopeOverrides: undefined,
    defaultBody: '',
    defaultIssues: '',
    defaultScope: '',
    defaultSubject: '',
  },
}

然后测试：

git add .
git-cz

 一键提交：

我们还可以通过一个 script 来集成之前所有的这些步骤：

"scripts": {
// ...
"commit": "git pull && git add -A && git-cz && git push",
}

现在，我们只需要执行 pnpm run commit 即可完成代码的质量检测、 style format 、代码提交规范

等一系列流程了。