协作规范

通过插件和配置实现。

风格统一

统一编辑器和工具插件。

编辑器

Visual Studio Code

配置文件

在前端项目中存在.vscode文件夹。

文件夹下一般存在两个文件extensions.json和setting.json。

作用是保持所有开发者安装了相同的插件和相同的配置，保持开发环境一致性。

extensions.json

在当前项目中，需要安装哪些插件。

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "streetsidesoftware.code-spell-checker"
  ]
}

settings.json

项目统一的vscode用户设置，和vscode全局配置冲突，会覆盖全局settings.json配置

{
  // 保存文件时自动格式化
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // 拼写错误忽略
  "cSpell.words": [
    "antd"
  ]
}

JS代码规范

通过代码格式化工具Prettier，代码查找并修复工具ESLint实现。

Prettier

代码格式化工具。

安装插件

Prettier - Code formatter

下载依赖

pnpm i prettier -D

配置文件

.prettierrc

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "proseWrap": "never",
  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
}

忽略文件

.prettierignore

node_modules

命令脚本

package.json

"scripts":{
    //......其他省略
    "lint:prettier": "prettier --write ./src/**/**/**/*",
}

ESLint

代码查找并修复工具。

安装插件

ESLint

下载依赖

pnpm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react -D

依赖	作用描述
eslint	ESLint 核心库
eslint-config-prettier	关掉所有和 Prettier 冲突的 ESLint 的配置
eslint-plugin-prettier	将 Prettier 的 rules 以插件的形式加入到 ESLint 里面
eslint-plugin-react	为 React 使用 ESlint 的插件

配置文件

.eslintrc

// 参考：https://umijs.org/docs/guides/lint
module.exports = {
    extends: require.resolve('https://github.com/umijs/umi/blob/master/packages/lint/src/config/eslint/rules/recommended.ts'),
};

忽略文件

.eslintignore

node_modules

命令脚本

package.json

"scripts":{
    //......其他省略
    "lint:eslint": "eslint --ext .js",
}

CSS代码规范

通过样式检查工具StyleLint实现。

StyleLint

样式检查工具。

安装插件

StyleLint

下载依赖

pnpm install stylelint stylelint-config-standard stylelint-config-prettier -D

依赖	作用描述
stylelint	stylelint 核心库
stylelint-config-standard	打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定
stylelint-config-prettier	关闭所有不必要的或可能与 Prettier 冲突的规则

配置文件

.stylelintrc

// 参考：https://umijs.org/docs/guides/lint
module.exports = {
    extends: require.resolve('https://github.com/umijs/umi/blob/master/packages/lint/src/config/stylelint/index.ts'),
};

命令脚本

package.json

"scripts":{
    //...其他省略
    "lint:stylelint": "stylelint \"src/**/*.less\" --syntax less",
}

Git规范

提交规范

类型（中文）	类型（英文）	值
新功能	feat	新功能
修复 BUG	fix	修复问题
文档	docs	文档更新
格式	style	代码格式（未修改代码逻辑）
重构	refactor	代码重构（既不是新增功能，也不是修复问题）
优化	perf	性能优化
测试	test	添加或修改测试
编译	build	构建系统或外表依赖项的更改（如 webpack，npm）
回滚	revert	版本回滚

分支规范

分支策略

待补充

发布分支

待补充

版本固定

待补充