前端多人协作之代码规范

代码规范

1. EditorConfig

EditorConfig 用于定义项目中的编辑器配置。可以确保团队成员在不同的编辑器中保持一致的代码风格和格式。

🚀EditorConfig 官网

1.1 前置

editorConfig 是定义在项目根目录下名为.editorconfig 的自定义文件。该文件用来定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要

有些编辑器默认支持 editorConfig，如 webstorm；而有些编辑器则需要安装 editorConfig 插件，如 ATOM、Sublime、VSCode（EditorConfig for VSCode）等。

EditorConfig 的配置文件是从上往下读取的并且最近的 EditorConfig 配置文件会被最先读取. 匹配 EditorConfig 配置文件中的配置项会按照读取顺序被应用, 所以最近的配置文件中的配置项拥有优先权

1.2 配置

项目根目录下配置文件.editorconfig

# @see: http://editorconfig.org

# 设置为true表示该配置文件是根配置文件，EditorConfig将停止在父目录中查找其他配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(换行lf | 回车cr | 回车换行crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小（字节）
max_line_length = 130 # 最大行长度

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭删除行末尾空格

不同系统平台下编辑可能导致警告或者错误，比如 在 Windows 下编写的 shell 脚本，直接放到 linux/unix 下执行会出错，因为行结束符不一样。

• Dos 和 Windows 采用回车+换行（cr+lf）来表示换行
• UNIX 和 Linux 采用换行符（lf）来表示换行
• MAC OS 采用回车符（cr）来表示换行

2. ESLint

🚀ESLint 官网

ESLint 是一个可配置的 JavaScript 代码检查工具。可以帮助您发现和修复代码中的潜在问题，如语法错误、潜在的运行时错误、不符合最佳实践的代码等。ESLint 的目标是帮助开发者编写更高质量、更一致的 JavaScript 代码。

依赖	作用描述
eslint	ESLint 核心库
eslint-config-prettier	关掉所有和 Prettier 冲突的 ESLint 的配置
eslint-plugin-prettier	将 Prettier 的 rules 以插件的形式加入到 ESLint 里面
eslint-plugin-vue	为 Vue 使用 ESlint 的插件
@typescript-eslint/eslint-plugin ESLint	插件，包含了各类定义好的检测 TypeScript 代码的规范
@typescript-eslint/parser	ESLint 的解析器，用于解析 TypeScript，从而检查和规范 TypeScript 代码

2.1 忽略

项目根目录下配置忽略检查文件.eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
/src/mock/*
stats.html

2.2 配置项

项目根目录下配置文件.eslintrc.cjs

// @see: https://zh-hans.eslint.org

module.exports = {
  // 设置为true表示该配置文件是根配置文件，ESLint将停止在父目录中查找其他配置文件。
  root: true,
  // 指定脚本运行的环境，可以是浏览器、Node.js或ES6等。这些环境会提供一组预定义的全局变量。
  env: {
    browser: true,
    node: true,
    es6: true
  },
  /* 配置一些特定的设置，例如React的版本 */
  settings: {
    react: {
      version: "detect"
    }
  },
  /* 指定用于解析代码的解析器，这里使用的是@typescript-eslint/parser，它可以解析TypeScript代码。 */
  parser: "@typescript-eslint/parser",
  /* 配置解析器的选项，例如指定ECMAScript版本、源代码类型和JSX的pragma。 */
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    jsxPragma: "React",
    ecmaFeatures: {
      jsx: true
    }
  },
  /*  指定要使用的插件，这里使用了React、TypeScript和Prettier插件。 */
  plugins: ["react", "@typescript-eslint", "prettier"],
  /*  扩展现有的规则集，这里使用了一些推荐的规则集 */
  extends: [
    "eslint:recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  /* 配置具体的规则 */
  rules: {
    // eslint (http://eslint.cn/docs/rules)
    "no-var": "error", // 设置为"error"，要求使用let或const代替var关键字。
    "no-multiple-empty-lines": ["error", { max: 1 }], // 禁止出现多个空行。
    "no-use-before-define": "off", // 允许在定义之前使用函数、类或变量。
    "prefer-const": "off", // 设置为"off"，该规则旨在标记使用let声明但从未重新赋值的变量，建议使用const代替。
    // typeScript (https://typescript-eslint.io/rules)
    "@typescript-eslint/no-unused-vars": "error", // 设置为"error"，禁止未使用的变量。
    "@typescript-eslint/prefer-ts-expect-error": "error", // 设置为"error"，禁止使用@ts-ignore注释。
    "@typescript-eslint/ban-ts-comment": "error", //  设置为"error"，禁止使用@ts-<directive>注释或在指令后添加描述。
    "@typescript-eslint/no-inferrable-types": "off", // 设置为"off"，允许使用可以轻松推断的显式类型，以避免不必要的冗余。
    "@typescript-eslint/no-namespace": "off", // 设置为"off"，允许使用自定义的TypeScript模块和命名空间。
    "@typescript-eslint/no-explicit-any": "off", // 设置为"off"，允许使用any类型。
    "@typescript-eslint/ban-types": "off", // 设置为"off"，允许禁止特定类型。
    "@typescript-eslint/no-var-requires": "off", // 设置为"off"，允许在导入语句中使用require语句。
    "@typescript-eslint/no-empty-function": "off", // 设置为"off"，允许空函数。
    "@typescript-eslint/no-non-null-assertion": "off", // 设置为"off"，允许使用非空断言后缀操作符!。
    // react (https://github.com/jsx-eslint/eslint-plugin-react)
    "react-hooks/rules-of-hooks": "error", // 设置为"error"，确保在组件或自定义钩子中调用Hooks。
    "react-hooks/exhaustive-deps": "off" // 设置为"off"，不需要对useEffect和useCallback的依赖项进行详尽检查。
  }
};

3. Prettier

Prettier 是一个代码格式化工具，专注于调整代码的格式，如缩进、换行、引号等。以确保代码的一致性和可读性。与 ESLint 不同，Prettier 主要关注代码的格式化而不是语法问题。

🚀Prettier 官网

3.1 忽略

项目根目录下配置忽略检查文件.prettierignore

/dist/*
.local
/node_modules/**

**/*.svg
**/*.sh

/public/*
stats.html

3.2 配置项

项目根目录下配置文件.prettierrc.cjs

// @see: https://www.prettier.cn
module.exports = {
  /* 指定最大行长度 */
  printWidth: 130,
  /* 指定缩进的空格数或制表符数 */
  tabWidth: 2,
  /* tabs缩进 (true: tabs | false: spaces) */
  useTabs: false,
  /* 语句末尾使用分号 (true: yes | false: no) */
  semi: true,
  /* 字符串中使用双引号 (true: 单引号 | false: 双引号) */
  singleQuote: false,
  /* 对象字面量中的属性名称周围使用引号 (as-needed: 需要 | consistent: 保持一致性 | preserve：保留原样) */
  quoteProps: "as-needed",
  /* JSX中使用双引号 (true: 单引号, false: 双引号)  */
  jsxSingleQuote: false,
  /* 多行对象和数组的末尾添加尾逗号(none:不添加尾随逗号 | es5: ES5 语法支持的情况下，添加尾随逗号 | all:所有可能的地方都添加尾随逗号（包括函数参数） ) */
  trailingComma: "none",
  /* 对象字面量和数组中的大括号之间添加空格,eg."{ foo: bar }" (true: yes | false: no) */
  bracketSpacing: true,
  /* 将JSX元素的 尖括号 > 放在最后一行的末尾而不是新的一行  (true: 行末尾 | false: 另起一行) */
  bracketSameLine: false,
  /* 箭头函数的单个参数省时略参数括号 (avoid: 省略 | always: 不省略括号) */
  arrowParens: "avoid",
  /* 在文件开头包含@prettier  (true: yes | false: no) */
  requirePragma: false,
  /* 文件顶部插入特殊的@format标记  (true: yes | false: no)  */
  insertPragma: false,
  /* 保持文本的换行 (preserve: 不换行 | always: 始终换行 | never: 永不换行 | minimal: 最小化换行 ) */
  proseWrap: "preserve",
  /* 控制在 HTML 中处理空格敏感度的行为 (css:据 CSS 语法规则决定 HTML 标签之间的空格格式 | strict: HTML 标签之间保持严格的空格处理 | ignore: 忽略 HTML 标签之间的空格处理) */
  htmlWhitespaceSensitivity: "css",
  /* 定义换行符的类型 (auto:自动选择适当的换行符类型 | lf:强制使用 LF（\n）作为行末换行符 | crlf:强制使用 CRLF（\r\n）作为行末换行符 | cr:强制使用 CR（\r）作为行末换行符 ) */
  endOfLine: "auto",
  /* 格式化的代码的起始 */
  rangeStart: 0,
  rangeEnd: Infinity
};

4. Stylelint

Stylelint 是一个静态分析 CSS 代码、查找问题、强制执行代码风格规则的工具。

🚀Stylelint 官网

依赖	作用描述
stylelint stylelint	核心库
stylelint-config-html	Stylelint 的可共享 HTML（和类似 HTML）配置，捆绑 postcss-html 并对其进行配置
stylelint-config-recommended-scss	扩展 stylelint-config-recommended 共享配置，并为 SCSS 配置其规则
stylelint-config-recommended-vue	扩展 stylelint-config-recommended 共享配置，并为 Vue 配置其规则
stylelint-config-standard	打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定，包括：惯用 CSS 原则，谷歌的 CSS 样式指南，Airbnb 的样式指南，和 @mdo 的代码指南。
stylelint-config-standard-scss	扩展 stylelint-config-standard 共享配置，并为 SCSS 配置其规则
postcss postcss-html 的依赖包
postcss-html	用于解析 HTML（和类似 HTML）的 PostCSS 语法
stylelint-config-recess-order	属性的排序（插件包）
stylelint-config-prettier	关闭所有不必要的或可能与 Prettier 冲突的规则

4.1 忽略

项目根目录下配置忽略检查文件.stylelintignore

/dist/*
/public/*
public/*
stats.html

项目根目录下配置文件.stylelintrc.cjs

4.2 配置项

// @see: https://stylelint.nodejs.cn

module.exports = {
  // 指定此配置文件为根配置文件，不向上查找其他配置文件。
  root: true,
  // extends：通过扩展配置，继承了两个规则集：
  extends: [
    // 使用了 stylelint 的官方标准规则集，包含一些常见的代码风格规则。
    "stylelint-config-standard",
    // 使用了 stylelint 的属性排序插件规则集，用于强制执行 CSS 属性的书写顺序。
    "stylelint-config-recess-order"
  ],
  // overrides：针对特定文件类型进行配置覆盖的部分。
  overrides: [
    // "**/*.html"：对所有的 .html 文件进行配置。
    {
      files: ["**/*.html"],
      customSyntax: "postcss-html"
    },
    // "**/*.less"：对所有的 .less 文件进行配置。
    {
      files: ["**/*.less"],
      customSyntax: "postcss-less"
    }
  ],
  rules: {
    /* URL 的引号规则  (always: 始终 | never: 从不 | consistent: 一致) */
    "function-url-quotes": "always",
    /* 16 进制颜色值的写法 (short: "#f00" | long: "#ff0000" ) */
    "color-hex-length": "long",
    /* 规则前是否要求空行  (always: 有空行 | never: 无空行 | always-multi-line: 多行规则有空行 | never-multi-line: 多行规则无空行 ) */
    "rule-empty-line-before": "never",
    /* 是否缺少通用字体系列关键字  (true: 开启 | null: 关闭 ) */
    "font-family-no-missing-generic-family-keyword": null,
    /* 不允许空的样式源的规则  (true: 开启 | null: 关闭 ) */
    "no-empty-source": null,
    /* 选择器类名的格式规则  (regex|string) */
    "selector-class-pattern": null,
    /* 不允许使用特定厂商的前缀，例如 -webkit- (true: 开启 | null: 关闭 ) */
    "value-no-vendor-prefix": null,
    /* 不允许具有较低优先级的选择器出现在较高优先级的选择器之后的规则 (true: 开启 | null: 关闭 )  */
    "no-descending-specificity": null,
    /* 允许自定义 CSS 变量名称的规则 (regex|string) */
    "custom-property-pattern": null,
    /* 媒体特性区间表示法的规则 (context|prefix) */
    "media-feature-range-notation": null,
    /* 伪类选择器的规则，允许忽略指定的伪类 */
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global"]
      }
    ]
  },
  /* 指定要忽略的文件的模式 */
  ignoreFiles: ["**/.js", "/*.jsx", "/.tsx", "**/.ts"]
};

5. 团队协作风格统一

根目下.vscode 文件 存储的是编译器相关。

5.1 .vscode/extensions.json

项目根目录下.vscode 文件下 extensions.json 为项目下推荐安装插件

如果，你的.vscode 下的 extensions.json，编译器会自动安装相应的扩展 ID，团队协作必备。
vscode 主侧栏的 扩展里输入@recommended，可以查看当前当前扩展推荐，命名规则为"作者名字.插件名字"。
如果想往里添加新的扩展推荐，可以去插件库主页小齿轮处复制扩展 ID。

{
  "recommendations": [
    "dsznajder.es7-react-js-snippets",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig",
    "streetsidesoftware.code-spell-checker",
    "mikestead.dotenv"
  ]
}

5.2 .vscode/settings.json

项目根目录下.vscode 文件下 setting.json 为 vscode 编辑器和插件的配置。

{
  // 在保存文件时自动进行代码格式化。
  "editor.formatOnSave": true,
  // 在保存文件时，针对样式文件使用 stylelint 进行自动修复。
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  // 启用 stylelint 插件以进行样式代码的静态检查
  "stylelint.enable": true,
  // 指定需要被 stylelint 验证的文件类型
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "html"],
  // 设置文件的行尾格式为换行符 \n
  "files.eol": "\n",
  // 对于不同的文件类型，配置了默认的格式化，使用 prettier 作为默认的代码格式化工具。
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 拼写检查
  "cSpell.words": [
		""
  ]
}

6. 规范化提交的方案

前瞻

依赖	作用描述
husky	操作 git 钩子的工具
lint-staged	在提交之前进行 eslint 校验，并使用 prettier 格式化本地暂存区的代码
@commitlint/cli	校验 git commit 信息是否符合规范，保证团队的一致性
@commitlint/config-conventional	Angular 的提交规范
commitizen	基于 Node.js 的 git commit 命令行工具，生成标准化的 commit message(原生通常不用)
cz-git, czg	相较于 commitizen，是一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器

6.1 Commitizen

Commitizen 采用了一个交互式的命令行界面，引导你逐步填写必要的数据，从而生成符合规范的 Git 提交信息。

1. 安装开发依赖并配置启动脚本（Czg 为中文开发者适配）

• cz-git 是一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器

• czg 是轻量级，简单快速，零配置的交互式命令行工具，用于生成标准化的 git commit message，搭配 cz-git 使用

• @commitlint/cli 用于 commit message 的检查，并且能通过 npm 安装包的形式分享 commit rules

• @commitlint/config-conventional 是通用的 commit rules，你也可以在它的基础上自定义 rules

"scripts": {
    "dev": "vite",
    "commit": "git pull && git add -A && czg && git push"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "cz-git": "^1.6.1",
    "czg": "^1.6.1",
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }

2. 配置 commitlint 配置项
   项目根目录下配置文件 commitlint.config.cjs

// 文件用于配置 commitlint 工具，它用于规范化 Git 提交消息格式。
// @see: https://cz-git.qbenben.com/zh/guide
const fs = require("fs");
const path = require("path");

const scopes = fs
  .readdirSync(path.resolve(__dirname, "src"), { withFileTypes: true })
  .filter(dirent => dirent.isDirectory())
  .map(dirent => dirent.name.replace(/s$/, ""));

/** @type {import('cz-git').UserConfig} */
module.exports = {
  /* 一个函数数组，用于定义需要忽略的提交消息的过滤规则（如果提交消息包含 “init” 字符串，则会被忽略） */
  ignores: [commit => commit.includes("init")],
  /* 一个字符串数组，用于指定对应的 commitlint 配置扩展文件（使用了 “@commitlint/config-conventional” 扩展，它是一个常用的提交消息规范） */
  extends: ["@commitlint/config-conventional"],
  /* 一组规则用于校验提交消息的格式 */
  rules: {
    // @see: https://commitlint.js.org/#/reference-rules
    "body-leading-blank": [2, "always"], // 规定提交消息的正文部分之前是否需要空行，配置为 [2, "always"] 表示必须要有空行。
    "footer-leading-blank": [1, "always"], // 规定提交消息的尾部部分之前是否需要空行，配置为 [1, "always"] 表示应该有空行。
    "header-max-length": [2, "always", 108], // 规定提交消息头部的最大长度，配置为 [2, "always", 108] 表示最大长度为 108。
    "subject-empty": [2, "never"], // 规定提交消息的主题部分是否允许为空，配置为 [2, "never"] 表示主题不能为空。
    "type-empty": [2, "never"], //  规定提交消息的类型部分是否允许为空，配置为 [2, "never"] 表示类型不能为空。
    "subject-case": [0], // 规定提交消息的主题部分的大小写，配置为 [0] 表示不强制大小写。
    "type-enum": [
      // 规定提交消息的类型部分的取值范围，配置为 [2, "always", [类型列表]]，其中类型列表包含了规定的若干提交类型。
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "build",
        "ci",
        "chore",
        "revert",
        "wip",
        "workflow",
        "types",
        "release"
      ]
    ]
  },
  /* 提交过程中向用户提问时使用的各种提示信息 */
  prompt: {
    messages: {
      // type: 提示选择提交的类型。
      type: "Select the type of change that you're committing:",
      // scope: 提示输入本次改动的作用域。
      scope: "Denote the SCOPE of this change (optional):",
      // customScope: 提示输入自定义的作用域。
      customScope: "Denote the SCOPE of this change:",
      // subject: 提示写一个简短的、动词性的描述本次改动的主题。
      subject: "Write a SHORT, IMPERATIVE tense description of the change:\n",
      // body: 提示提供更详细的改动描述，可以使用 “|” 符号进行换行。
      body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
      // breaking: 提示列出任何重大改动。
      breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
      // footerPrefixsSelect: 提示选择本次改动涉及的问题类型。
      footerPrefixsSelect: "Select the ISSUES type of changeList by this change (optional):",
      // customFooterPrefixs: 提示输入自定义的问题前缀。
      customFooterPrefixs: "Input ISSUES prefix:",
      // footer: 提示列出本次改动涉及的问题列表。
      footer: "List any ISSUES by this change. E.g.: #31, #34:\n",
      // confirmCommit: 提示确认是否要提交以上的改动。
      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: "wip", name: "wip:      🕔  work in process", emoji: "🕔" },
      { value: "workflow", name: "workflow: 📋  workflow improvements", emoji: "📋" },
      { value: "type", name: "type:     🔰  type definition file changes", emoji: "🔰" }
      // 中文版
      // { value: "feat", name: "特性:   🚀  新增功能", emoji: "🚀" },
      // { value: "fix", name: "修复:   🧩  修复缺陷", emoji: "🧩" },
      // { value: "docs", name: "文档:   📚  文档变更", emoji: "📚" },
      // { value: "style", name: "格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: "🎨" },
      // { value: "refactor", name: "重构:   ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: "♻️" },
      // { value: "perf", name: "性能:    ⚡️  性能优化", emoji: "⚡️" },
      // { value: "test", name: "测试:   ✅  添加疏漏测试或已有测试改动", emoji: "✅" },
      // { value: "build", name: "构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）", emoji: "📦️" },
      // { value: "ci", name: "集成:   🎡  修改 CI 配置、脚本", emoji: "🎡" },
      // { value: "chore", name: "回退:   ⏪️  回滚 commit", emoji: "⏪️" },
      // { value: "revert", name: "其他:   🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: "🔨" },
      // { value: "wip", name: "开发:   🕔  正在开发中", emoji: "🕔" },
      // { value: "workflow", name: "工作流:   📋  工作流程改进", emoji: "📋" },
      // { value: "types", name: "类型:   🔰  类型定义文件修改", emoji: "🔰" }
    ],
    // 提示信息中使用表情符号
    useEmoji: true,
    // 指定文件作用域
    scopes: [...scopes],
    // 指定自定义范围在提示信息中的对齐方式
    customScopesAlign: "bottom",
    // 为空范围指定一个别名
    emptyScopesAlias: "empty",
    // 为自定义范围指定一个别名
    customScopesAlias: "custom",
    // 指定了可以与哪些类型的更改关联破坏性更改
    allowBreakingChanges: ["feat", "fix"]
  }
};

6.2 husky

Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。

安装开发依赖并执行npm run prepare，根目录下会生成.husky 文件

"scripts": {
    "prepare": "husky install",
    "commit": "git pull && git add -A && czg && git push"
  },
  "devDependencies": {
    "husky": "^8.0.3",
  },

6.3 git hooks

客户端钩子和服务端钩子，客户端钩子有如下

• pre-commit 触发该钩子时使用 lint-staged 工具对暂存区代码检查。
• prepare-commit-msg 触发该钩子时使用 commitlint 工具对提交消息进行验证和编辑。
• commit-msg 触发该钩子时使用 commitizen 提交通过前验证项目状态或提交信息
• post-commit 触发该钩子时通知之类的事

生成钩子文件

1. 创建一个 commit-msg Git hooks 钩子，并在触发该钩子时使用 commitlint 工具对提交消息进行验证和编辑。
   npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
2. 创建一个 pre-commit Git hooks 钩子，并在触发该钩子时使用 lint:lint-staged 工具对暂存区代码检查。
   npx husky add .husky/pre-commit "npm run lint:lint-staged"
3. 强制跳过 Git hooks
   git commit --no-verify -m "Commit message"

6.4 lint-staged.config.cjs

配置

// lint-staged.config.cjs 文件是用于配置 lint-staged 工具的配置文件。lint-staged 是一个在 Git 提交阶段自动运行指定脚本的工具，用于对暂存的文件进行静态代码检查和格式化。
module.exports = {
  // 对于以 .js、.jsx、.ts 或 .tsx 结尾的文件，使用 ESLint 进行代码检查并尝试自动修复问题，然后使用 Prettier 进行代码格式化。
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  // 对于除了 package.json 文件以外的所有 .json、.code-snippets 以及不以 .browserslist 结尾的文件，使用 Prettier 进行 JSON 文件的格式化。
  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
  // 针对 package.json 文件，使用 Prettier 进行格式化。
  "package.json": ["prettier --write"],
  // 对于以 .scss、.less、.styl 或 .html 结尾的文件，使用 Stylelint 进行样式代码检查并尝试自动修复问题，然后使用 Prettier 进行代码格式化。
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  // 对于以 .md 结尾的 Markdown 文件，使用 Prettier 进行 Markdown 文件的格式化。
  "*.md": ["prettier --write"]
};