前端项目规范

[diamont1001]

记录下个人的前端项目规范。

版本号规范

版本号遵循 semver 规范，参考链接：https://semver.org/lang/zh-CN/
版本号格式为 X.Y.Z（又称 Major.Minor.Patch）

• X：主版本号，当系统兼容性变化时或者大版本升级时，X 才需递增
• Y：次版本号，当增加功能时（不影响兼容性），Y需递增
• Z：修订号，当做 Bug 修复时（不影响 API 兼容性），Z 需递增

README 文档

• 项目概述：简要描述项目的目的和功能。
• 环境配置：记录开发、测试、生产环境的配置细节。
• 安装步骤：详细列出项目的打包、发布、安装和配置等主要流程步骤。
• 常见问题：列出常见问题及其解决方案，帮助快速解决常见障碍。

Prettier配置

参考传送门：https://prettier.io/docs/en/options.html

package.json 添加脚本格式化代码：

"scripts": {
  "format": "npx prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
}

核心配置项如下：

[.prettierrc.js]

module.exports = {
  printWidth: 100, // 每行的最大长度，自动换行显示
  tabWidth: 2, // 缩进的空格数
  useTabs: false, // 使用空格而不是制表符缩进行
  semi: true, // 行尾使用分号
  singleQuote: true, // 字符串使用单引号
  trailingComma: "es5", // 在 ES5 中有效的尾随逗号（对象、数组等）
  bracketSpacing: true, // 在对象括号与文字中之间加空格，如 { foo: bar }
  bracketSameLine: false, // 元素的 `>` 换行展示
  arrowParens: "avoid", // 在唯一参数的箭头函数中省略括号 x => {}
  endOfLine: "lf" // 使用 \n 作为行尾符
};

[.prettierrc]

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

VsCode配置

为了确保团队代码风格统一，需要使用统一标准对代码进行强制格式化，最好的办法就是在代码文件保存时自动调用 prettier 进行格式化。

1.VsCode 项目级配置

项目可以单独配置 VsCode 设置，配置文件为 [.vscode/settings.json]

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

2. VsCode全局配置

• 设置 -> 搜索 "defaultFormatte" -> 选择 "Prettier-Code formatter"
• 设置 -> 搜索 "formatOnSave" -> 勾选 "Format On Save"
• 设置 -> 搜索 "formatOnSave" -> "Format On Save Mode" 选择 "File"