项目中代码规范配置项目规模越来越大的时候，涉及的开发人员也越来越多，一个项目多人协作的场景也就越来越多了这就带来了很多问

项目规模越来越大的时候，涉及的开发人员也越来越多，一个项目多人协作的场景也就越来越多了这就带来了很多问题，比如：

团队之前的代码风格不规范导致的可读性差，可维护性差
团队成员使用不同编辑器导致代码规范不统一的问题

如果我们制定一套规范，大家按照这个规范执行，即可以解决上述问题，还可以：

提前发下代码风格问题，给出相应提示，及时修复
减少代码审查过程中反反复复的修改，节约时间
自动格式化，统一代码风格

介绍一套规范组合以及相关的配置 -- >EditorConfig + Prettier + ESlint

1、EditorConfig 配置

EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格。 EditorConfig 文件易于阅读，并且可以很好地与版本控制系统配合使用。

VSCode 使用 EditorConfig 需要去插件市场下载插件 EditorConfig VS Code
JetBrains 系列（WebStorm、IntelliJ IDEA）则不用额外安装插件，可直接使用 EditorConfig 配置

在项目的根目录创建 .editorconfig 文件，开始配置（配置参考官网介绍）：

# 官网： http://editorconfig.org

# 表示是最顶层的 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

2、Prettier 配置

跟EditorConfig一样，VSCode 编辑器使用 Prettier 配置需要下载插件 Prettier - Code formatter
JetBrains 系列不需要额外装插件

Prettier 支持JavaScript、Typescript、Css、Scss、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown等，基本上前端能用到的文件格式都可以可支持，算是当下最流行的格式化工具。

1）安装： npm i prettier -D

2）在项目根目录下创建文件.prettierrc

3）开始配置：

// 官网：prettier.io    详细配置项信息请查看官网
{
  "useTabs": false,
  "tabWidth": 4,
  "printWidth": 150,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": false
}

4）配置好后，就可以使用命令来格式化代码

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

3、ESlint 配置

VSCode 使用 ESLint 配置文件需要去插件市场下载安装插件 ESLint 。
JetBrains 系列不需要额外装插件

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

正如前面我们提到的因团队成员之间编程能力和编码习惯不同所造成的代码质量问题，我们使用 ESLint ，一边写代码一边查找问题，如果发现错误，就给出规则提示，并且自动修复，可以促使团队成员编码风格一致。

1）安装： npm i eslint -D 也可以全局安装，但是一般推荐本地安装，只在当前项目中使用。

2）配置：执行 npx eslint --init 然后按照终端操作提示完成一系列设置来创建配置文件。

插件： Airbnb JavaScript Style Guide、 JavaScript Standard Style、 Google JavaScript Style Guide

How would you like to use ESLint? （你想如何使用 ESLint?）

这里选择 To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）
What type of modules does your project use?（你的项目使用哪种类型的模块?）

我们这里选择 JavaScript modules (import/export)
Which framework does your project use? （你的项目使用哪种框架?）

vue
Does your project use TypeScript?（你的项目是否使用 TypeScript？）

Yes
Where does your code run?（你的代码在哪里运行?）

选择 Browser 和 Node（按空格键进行选择，选完按回车键确定）
How would you like to define a style for your project?（你想怎样为你的项目定义风格？）

选择 Use a popular style guide（使用一种流行的风格指南）
Which style guide do you want to follow?（你想遵循哪一种风格指南?）

选择 Airbnb

3）操作完成后会在项目根目录自动生成.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: {},
};

根据实际项目情况，如果油额外的规则，也可以在这个文件中添加。

4）可以设置编辑器保存文件时自动执行 eslent --fix命令进行代码风格修复。

在VSCode 的 settings.json 中，增加一下代码：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

4、当Prettier 和ESLint有冲突的时候，我们需要解决这个冲突

两个插件：eslint-plugin-prettier 和 eslint-config-prettier

eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。

最后形成优先级：Prettier 配置规则 > ESLint 配置规则。

1）安装插件： npm i eslint-plugin-prettier eslint-config-prettier -D

2）在 .eslentrc.js中添加 prettier 插件

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

这样，我们在执行 eslint --fix 命令时，ESLint 就会按照 Prettier 的配置规则来格式化代码，轻松解决二者冲突问题。

5、 husky 和 lint-staged

我们在项目中已集成 ESLint 和 Prettier，在编码时，这些工具可以对我们写的代码进行实时校验，在一定程度上能有效规范我们写的代码，但团队可能会有些人觉得这些条条框框的限制很麻烦，选择视“提示”而不见，依旧按自己的一套风格来写代码，或者干脆禁用掉这些工具，开发完成就直接把代码提交到了仓库，日积月累，ESLint 也就形同虚设。

所以，我们还需要做一些限制，让没通过 ESLint 检测和修复的代码禁止提交，从而保证仓库代码都是符合规范的。

为了解决这个问题，我们需要用到 Git Hook，在本地执行 git commit 的时候，就对所提交的代码进行 ESLint 检测和修复（即执行 eslint --fix），如果这些代码没通过 ESLint 规则校验，则禁止提交。

实现这一功能，我们借助 husky + lint-staged 。

husky —— Git Hook 工具，可以设置在 git 各个阶段（pre-commit、commit-msg、pre-push 等）触发我们的命令。

lint-staged —— 在 git 暂存的文件上运行 linters。

1）husky配置： npx husky-init && npm install

这个时候回在项目根目录创建 .husky 目录（创建pre-commit hook，并初始化 pre-commit 命令为 npm test）

修改 .husky/pre-commit hook 文件的触发命令

eslint --fix ./src --ext .vue,.js,.ts

2）lint-staged 配置：

npm i lint-staged -D
在 package.json里增加 lint-staged 配置项
```
{
    ...,
    "lint-staged": {
        "*.{vue, js, ts}": "eslint --fix"
    },
    ...
}
```
这行命令表示：只对 git 暂存区的 .vue、.js、.ts 文件执行 eslint --fix
修改 .husky/pre-commit hook 的触发命令为：npx lint-staged