为什么需要规范?

统一代码规范的好处：
1. 解决团队之间代码不规范导致的可读性差和可维护性差的问题。
2. 解决团队成员不同编辑器导致的编码规范不统一问题。
3. 提前发现代码风格问题，给出对应规范提示，及时修复。
4. 减少代码审查过程中反反复复的修改过程，节约时间。
5. 自动格式化，统一编码风格，从此和脏乱差的代码说再见。
6. 减少 code review 期间一系列的争议，因为缺乏标准，在争议过程中双方很难妥协。
若不统一代码规范，可能会造成的后果：
1. 由于缺乏规范，导致 代码风格不一，增加团队成员间的心理负担，极端情况下，某段代码只有某个人能修改。
2. 团队间协作更加困难：因为开发人员得 适应不同的风格，会导致效率低下。
3. 在 code review 期间可能经常为类似的事情做过多的讨论。
4. 影响团队的生产力和质量，严重的甚至会影响团队和谐。

建立和遵守的规范

大致可以划分成这几个方向：
1. 开发流程规范
2. 代码规范（参考阿里）
3. git commit 规范
4. 项目文件结构规范
5. UI 设计 规范

开发流程规范

开发流程：接到需求 -> 需求评审（分析、拆分、工时评估） -> 技术方案设计 -> 代码设计 -> 编码 -> 编写测试用例并自测 -> 测试人员测试 -> 修复 bug 和优化 -> 上线交互 -> 用户反馈（优化）

代码格式化规范

Prettier

Prettier 是一款强大的代码格式化工具。在项目根目录下创建 .prettierrc 文件

npm i prettier -D

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

npx prettier --write . # 格式化所有文件（. 表示所有文件）

注意：VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter

ESLint

ESLint 是一款用于查找并报告代码中问题的工具ESLint 官方。在项目根目录下创建 .eslintrc.js 文件
```
npm i eslint -D

npx eslint --init # 用来生成.eslintrc.js
```
```
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'no-console': 2, // 不允许出现console语句
    'no-extra-semi': 2, // 不允许出现不必要的分号
  },
}
```
- ESLint 的规则有三种级别：
  1. "off" 或者 0，不启用这个规则
  2. "warn" 或者 1，出现问题会有警告
  3. "error" 或者 2，出现问题会报错
注意：VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint

我们可以修改 VSCode -> settings.json 配置，一键解决所有格式错误的代码, 只需设置编辑器保存文件时自动执行 eslint --fix 命令进行代码风格修复。
```
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
```
扩展：Prettier 和 ESLint 的冲突解决, eslint-plugin-prettier 和 eslint-config-prettier, 最后形成优先级：Prettier 配置规则 > ESLint 配置规则
- eslint-plugin-prettier: 将 Prettier 的规则设置到 ESLint 的规则中
- eslint-config-prettier: 关闭 ESLint 中与 Prettier 中会发生冲突的规则
StyleLint

Editor Config

根目录下增加 .editorconfig 文件

  # 表示是最顶层的 EditorConfig 配置文件
  root = true

  [*] # 表示所有文件适用
  charset = utf-8 # 设置文件字符集为 utf-8
  indent_style = space # 缩进风格（tab | space）
  indent_size = 2 # 缩进大小
  end_of_line = lf # 控制换行类型(lf | cr | crlf)
  trim_trailing_whitespace = true # 去除行首的任意空白字符
  insert_final_newline = true # 始终在文件末尾插入一个新行

  [*.md] # 表示仅 md 文件适用以下规则
  max_line_length = off
  trim_trailing_whitespace = false

注意：VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig for VS Code

Husky & Lint-Staged
命名规范
目录结构规范
代码编写规范
Git Message 提交规范（Commitizen + CommitLint）
UI 设计统一规范

# 为什么需要规范?

# 建立和遵守的规范

为什么需要规范?

建立和遵守的规范