代码规范

建议

请确保已阅读《准备工作 - 开发环境》，并且按照文档说明安装好相关软件及扩展。

为保证代码风格统一，请使用 Visual Studio Code 做为开发 IDE ，框架源码里已提供相关配置文件，可直接测试效果：在保存代码时，会自动对当前文件进行代码格式化操作。

ESLint 配置

配置文件为 eslint.config.js ，框架使用 @pubinfo/eslint-config 做为基础规范，如果你对默认的规则有异议，可以查阅 ESLint 官网规则并在根目录下的 eslint.config.js 文件中进行覆盖，校验具体规则查看前端开发规范

当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。

查看规则

你可以用通过如下代码查看当前项目的 ESLint 配置项，方便针对性的修改

pnpm run viewer:eslint-rule -w

StyleLint 配置

配置文件为 stylelint.config.js ，如果你对默认的规则有异议，可以查阅 Stylelint 官网规则并在 stylelint.config.js 文件中进行修改。

当你对规则进行修改后，原有的代码可能会因为规则的变动导致编辑器大量提示错误，你可以通过运行 pnpm run lint 进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。

TIP

通过修改 stylelint.config.js 中 ignoreFiles 配置可忽略无需做代码规范校验的文件，例如在项目中导入了一些第三方的插件代码或组件代码，我们就可以将其进行忽略。

Gitlint

通过执行 pnpm run commit 交互式提交 commit message，可以帮助我们规范化提交信息，以便更好的管理项目。 例如可以生成项目 CHANGELOG.md 文件，方便查看项目的更新日志。

执行指令之后需要按照提示进行操作

◇  选择你要提交的类型 : Use arrow keys or type to search
│  ● feat:     ✨  新增功能
│  ○ types:    🎨  类型相关
│  ○ docs:     📝  文档更新
│  ○ style:    💄  代码格式
│  ○ refactor: ♻️   代码重构
│  ○ perf:     ⚡️  性能提升
│  ○ test:     ✅  测试相关
│  ○ build:    📦️  构建相关
│  ○ release:  🔖  版本提升
│  ○ ci:       🎡  持续集成
│  ○ revert:   ⏪️  回退代码
│  ○ chore:    🔨  其他修改
│  ○ init:     🎉  初始化
│
◇  选择一个提交范围: Press <space>|<right> to select, <enter> to submit
│  ● docs
│  ○ utils
│  ○ project
│  ○ ci
│  ○ deploy
│  ○ other
│
◇  填写简短精炼的变更描述 :
│  描述你本次提交的信息
│
◇  填写更加详细的变更描述（可选）。使用 "|" 换行 :
│  可以省略 
│
◇  Is any BREAKING CHANGE (add "!" in header) (optional) ? (y/N)
│  N 
│
◆  选择关联issue前缀（可选）: Use arrow keys or type to search
│  ● skip
│  ○ custom
└

注意

如果使用了 git commit -m 提交，那么输入的 msg 会在提交时候被 husky 的 commit-msg 钩子拦截校验，如果不符合规范会被拒绝提交。

git 规范化可以基于 commitizen 和 cz-customizable 进行扩展，具体配置请查看 commitizen 和 cz-customizable 的文档。

Husky 和 lint-staged

由于 IDE 能做的事比较有限，只能对代码的书写规范进行格式化，对于一些无法自动修复的错误代码，如果没有改正到就被推送到 git 仓库，在多人协作开发时，可能会影响到别人的开发体验。所以框架集成了 husky 和 lint-staged 这两个依赖来解决这一问题。

在提交代码时， husky 会通过 lint-staged 对本次提交变更的文件进行分别进行 eslint 和 stylelint 检测，如果有报错，则会阻止本次代码提交，直到开发者修改完所有错误代码后，才允许提交到 git 仓库，这样可以确保 git 仓库里的代码不会有不规范的代码。

注意

请确保在安装依赖前，已经使用 git init 对项目进行过 git 环境初始化，如果你在安装依赖后再初始化了 git 环境，请在 git 环境初始化之后再执行一遍 pnpm install 安装命令。

Husky 和 simple-git-hooks

比较

目前 simple-git-hooks 在Element、antDesign、vue/core 等库使用较多，但是我们仍然推荐使用 husky，lint-staged 校验时会有树级和颜色高亮等反馈，husky 和 simple-git-hooks 在 git hooks 钩子校验时部分电脑会丧失颜色高亮、树级塌陷，且这个bug已经挂了很久了，在 husky 钩子中通过 重启 tty 可以避免样式丢失，

 if sh -c ": >/dev/tty" >/dev/null 2>/dev/null; then exec >/dev/tty 2>&1; fi