1. 主要解决的问题

• 解决团队之间代码不规范导致的可读性差和可维护性差的问题。

• 解决团队成员不同编辑器导致的编码规范不统一问题。

• 提前发现代码风格问题，给出对应规范提示，及时修复。

• 减少代码审查过程中反反复复的修改过程，节约时间。

• 自动格式化，统一编码风格，从此和脏乱差的代码说再见。

2. 适用范围

适用于Vue2, Vue3项目

3. 实施步骤

Step1. 集成 EditorConfig 配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

官网：editorconfig.org

在项目根目录下增加 .editorconfig 文件：

# Editor configuration, see 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
 
 

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

Step2. 集成 Prettier 配置

官网：prettier.io/

安装 Prettier

npm i prettier -D

1. 创建 Prettier 配置文件

Prettier 支持多种格式的配置文件，比如 .json、.yml、.yaml、.js等。

在本项目根目录下创建 .prettierrc 文件。

配置 .prettierrc

1. 在本项目中，我们进行如下简单配置，关于更多配置项信息，请前往官网查看 Prettier-Options 。

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

Prettier 安装且配置好之后，就能使用命令来格式化代码

# 格式化所有文件（. 表示所有文件）
# 如果是正在进行的紧急项目，不要自动格式化所有代码
npx prettier --write .

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

Step3. 集成 ESLint 配置

官网：eslint.org/

ESLint是一款用于查找并报告代码中问题的工具，并且支持部分问题自动修复。其核心是通过对代码解析得到的 AST（Abstract Syntax Tree 抽象语法树）进行模式匹配，来分析代码达到检查代码质量和风格问题的能力。

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

安装 ESLint

可以全局或者本地安装，推荐本地安装（只在当前项目中安装）。

npm i eslint -D

配置 ESLint

ESLint 安装成功后，执行

npx eslint --init

然后按照终端操作提示完成一系列设置来创建配置文件。

• 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.js

• Does your project use TypeScript?（你的项目是否使用 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

此时，我们在 ESLint 配置了 Airbnb JavaScript 规则，在编码时，所有不符合 Airbnb 风格的代码，编辑器都会给出提示，并且可以自动修复。

• What format do you want your config file to be in?（你希望你的配置文件是什么格式?）

 我们这里选择 JavaScript

• Would you like to install them now with npm?（你想现在就用 NPM 安装它们吗?）

 根据上面的选择，ESLint 会自动去查找缺失的依赖，我们这里选择 Yes，使用 NPM 下载安装这些依赖包。

注意：如果自动安装依赖失败，那么需要手动安装

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D
 
 

ESLint 配置文件

在上一步操作完成后，会在项目根目录下自动生成 .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: {}
}

根据项目实际情况，如果我们有额外的 ESLint 规则，也在此文件中追加。

注意：VSCode 使用 ESLint 配置文件需要去插件市场下载插件 ESLint 。

 配置保存时自动修复

虽然，现在编辑器已经给出错误提示和修复方案，但需要我们一个一个去点击修复，还是挺麻烦的。很简单，我们只需设置编辑器保存文件时自动执行 eslint --fix 命令进行代码风格修复。

在项目根目录下新建文件夹.vscode，然后新建文件.settings.json

增加以下代码：

 {
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "vetur.validation.template": false
}

Step4. 解决 Prettier 和 ESLint 的冲突

通常大家会在项目中根据实际情况添加一些额外的 ESLint 和 Prettier 配置规则，难免会存在规则冲突情况。

本项目中的 ESLint 配置中使用了 Airbnb JavaScript 风格指南校验，其规则之一是代码结束后面要加分号，而我们在 Prettier 配置文件中加了代码结束后面不加分号的配置项，这样就有冲突了，会出现用 Prettier 格式化后的代码，ESLint 检测到格式有问题的，从而抛出错误提示。

• 解决两者冲突问题，需要用到 eslint-plugin-prettier 和 eslint-config-prettier。

• eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。

• eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。

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

安装插件

npm i eslint-plugin-prettier eslint-config-prettier -D

在 .eslintrc.js 添加 prettier 插件

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

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

PS: 针对eslint报错，修改对应配置

rules: {
    // equire component names to be always multi-word
    // 组件名必须是两个以上单词的组合
    'vue/multi-word-component-names': 'off',
    
    // Missing file extension
    // 引入的时候不加扩展名
}

4. 参考：

【不以规矩，不能成方圆-彻底搞懂 ESLint 和 Prettier】不以规矩，不能成方圆-彻底搞懂 ESLint 和 Prettier - 掘金

【从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境】 从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境 - 掘金

【ESLint fix自动修复所有格式问题】 ESLint fix自动修复所有格式问题 - 龙果果 - 博客园

【ESLint 报错 Unable to resolve path to module 'antd-mobile' import/no-unresolved】 ESLint fix自动修复所有格式问题 - 龙果果 - 博客园

【editorconfig、eslint、prettier三者的区别、介绍及使用】 editorconfig、eslint、prettier三者的区别、介绍及使用_Claiyre的博客-CSDN博客_editorconfig 区别

【Airbnb JavaScript Style Guide】GitHub - airbnb/javascript: JavaScript Style Guide

【Aribnb代码规范中文版】关于 · Airbnb JavaScript 代码规范（ES6） · 看云

【Standard】GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer

【Google JavaScript Style Guide】Google JavaScript Style Guide

【VUE风格指南】https://cn.vuejs.org/v2/style-guide/

5. 常见问题：

• 按照此配置，开发过程中还是有波浪线，怎么处理？

1. 如果是代码书写习惯造成的冲突，需要按照规范来修改代码

2. 如果是因为额外配置造成的冲突，比如设置别名@，建议先搜索解决方案，通过配置规则来解决。

3. 如果修改了eslint，prettier规则，需要@所有人，统一验证更新此规范

• ESLint 和 Prettier 的区别？

在格式化代码方面， Prettier 确实和 ESLint 有重叠，但两者侧重点不同：ESLint 主要工作就是检查代码质量并给出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化代码方面具有更大优势。所幸，Prettier 被设计为易于与 ESLint 集成，所以你可以轻松在项目中使两者，而无需担心冲突。

• 在目前项目中，有的地方很难根据规范操作如何处理？

根据目前项目情况增加了一些自定义规则，解决报红的波浪线

rules: {
    'vue/multi-word-component-names': 'off',  // 关闭组件名必须是两个单词的组合
    'no-console': 'off',  // 关闭不能使用console
    'import/extensions': 'off',  // 关闭不能使用用后缀名
    'import/no-unresolved': 'off'  // 解决airbnb找不到依赖的问题
  }