前端项目规范最佳实践：Editorconfig、Eslint、Prettier团队协作中，团队成员因为使用不同的IDE、

团队协作中，团队成员因为使用不同的IDE、相同的IDE不同的设置、代码风格不统一等原因导致项目代码混乱。为了能保持项目代码的统一，目前一种较流行的解决方案是EditorConfig + ESLint + prettier。

EditorConfig

介绍

顾名思义，这是一个编辑器配置插件，主要统一不同编辑器的代码风格的配置。举个例子：比如我们要控制一个多人维护的项目缩进统一用2个空格。那么每个人的IDE都是不同的，一种方法是几个人约定好各自配置自己的IDE，但是如果每个人又维护着多个项目，几个项目间就会相互影响。所以更好的办法是由项目本身来控制代码风格。也就是使用EditorConfig来控制。

用法

在一个文件夹下新建一个.editconfig文件，当用IDE打开一个文件时，EditorConfig插件会在打开文件的目录和其每一级父节点查找.editorconfig文件，直到找到一个配置了root = true的配置文件。

.editconfig配置文件：

root = true #不再向上查找.editorconfig

# *表示全部文件；可设置：[*.{js,py}][*.html]单独为不同的文件类型设置
# 主要就是以下6个配置
[*]
#编码
charset = utf-8 
#缩进方式
indent_style = space 
#缩进空格数
indent_size = 4
#换行符lf
end_of_line = lf
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true

# markdown结尾空格不能删，不然完犊子了
[*.md]
trim_trailing_whitespace = false

VSCode需安装插件：EditorConfig for VS Code

ESLint

介绍

ESLint是一个在js代码检测工具，它的目的是保证代码规范的一致性和及时发现代码问题、提前避免错误发生。ESLint重点关注的是代码质量，检查代码风格并且会提示不符合风格规范的代码。除此之外ESLint也具有一部分代码格式化的功能。
比如ESLint可以检测出使用了未定义的变量、修改const变量等代码质量问题，也可以检测出单引号双引号、数组对象结尾是否有空格等风格问题。

用法

根目录下新建.eslintrc.js文件文件内容示例：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint'
  }
};

VSCode需安装插件：ESLint

Prettier

介绍

Prettier是一个专注于格式化的工具。Prettier只关注格式化，并不具有lint检查语法等能力。它通过解析代码并匹配自己的一套规则，来强制执行一致的代码展示格式。

用法

根目录下新建.prettier.js文件文件内容示例：

module.exports = {
  printWidth: 120, // 每行代码最大长度
  tabWidth: 2, //一个tab代表几个空格数，默认为80
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  semi: true, // 声明后带分号
  singleQuote: true, // 使用单引号
  jsxSingleQuote: true, // 使用单引号
  jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
  trailingComma: 'all',
};

VSCode需安装插件：Prettier - Code formatter

Prettier + EditorConfig组合

通过上述分析，其实Prettier和EditorConfig有几个配置项是一样的，如果能再同一处配置这几个配置项会更好一点。Prettier的最新版本通过解析 .editorconfig 文件来确定要使用的配置选项解决了此问题。这些选项仅限于：

end_of_line
indent_style
indent_size/tab_width

这些配置选项将覆盖以下 Prettier 选项（如果未在 .prettierrc 中定义它们）：

"endOfLine"
"useTabs"
"tabWidth"

以上配置项我们只要写在.editorconfig 文件中即可。

ESLint + Prettier组合

一般ESLint + Prettier搭配使用时必定会搭配以下两个包：eslint-config-prettier、eslint-plugin-prettier

eslint-config-prettier

为了可以和 Prettier 一起使用 ESLint，办法就是 停用可能与 Prettier 冲突的所有 ESLint 规则（仅指代码格式规则）。eslint-config-prettier 包已经帮我们做了这件事。

eslint-plugin-prettier

eslint-config-prettier 包仅仅是关闭eslint关于格式化的规则，那么这时候就要分别使用eslint和prettier来检测与格式化文件，会非常的不方便和不够简洁。eslint-plugin-prettier包主要是把prettier的规则配置成为eslint的一种规则，会给出eslint提示，eslint fix时候会按照prettier的规则去格式化，这样以来只要执行eslint --fix就能同时利用eslint和prettier来修复文件了！

配置文件

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: ['eslint:recommended', 'plugin:prettier/recommended'],
    parserOptions: {
        ecmaVersion: 6,
    },
    parser: 'babel-eslint',
};

配置其实很简单，只是在extends最后加入plugin:prettier/recommended，这玩意其实就是eslint-plugin-prettier/recommended（plugin: 其实就相当于 eslint-plugin-，搞不懂eslint整那么些个语法糖干啥），去看下eslint-plugin-prettier的源码，核心的其实就是下面这段：

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

这样一看就清晰多了，extends里的prettier指的是用eslint-config-prettier里的rules配置项，plugins里的prettier是引用eslint-plugin-prettier插件。

Vue项目中ESLint和Prettier的实际运用

这里就以vue-cli3脚手架创建的项目为示范（这肯定是最佳实践了），选择ESLint和Prettier后会默认安装eslint、prettier、@vue/eslint-config-prettier、eslint-plugin-prettier、eslint-plugin-vue 这几个包，是不是非常熟悉？其实和我们上面的基本一样，区别就是多了个eslint-plugin-vue以及eslint-config-prettier变成了@vue/eslint-config-prettier

下面看一下默认的eslintrc.js文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

主要关注extends这块，这里extends是一个数组。第一个成员plugin:vue/essential表示的是：引入eslint-plugin-vue插件，并开启essential类别中的一系列规则，这个插件主要作用是使ESLint能识别.vue文件，并识别一些vue语法，比如v-for必须要有key，不能和v-if并存等。其实很好理解，就是为了让eslint识别vue代码。

第二个成员"eslint:recommended"表示的是：使用eslint内置的recommended配置；

第三个成员"@vue/prettier"表示的是：引入@vue/eslint-config-prettier插件，这个插件主要作用就是让ESLint按照prettier的规则去格式化代码；可以看下@vue/eslint-config-prettier的源码：

module.exports = {
  plugins: ['prettier'],
  extends: [
    require.resolve('eslint-config-prettier'),
    require.resolve('eslint-config-prettier/vue')
  ],
  rules: {
    'prettier/prettier': 'warn'
  }
}

瞬间清楚了吧！

react项目的实践我就不写了，记得之前我用create-react-app创建的项目和上面vue-cli3创建的项目最终的原理大同小异，无非是react多了个jsx的插件，少了个vue的插件。

自动修复及格式化文件

上面说了这么多基本上已经搞懂这3个玩意是个啥怎么用了，但还差临门一脚，怎么去触发修复文件这个动作，其实很简单，使用eslint --fix命令即可，但实际中是不可能代码写的好好的来个这个命令。实际开发过程中一般有两种方式：在保存文件时或者用husky添加git hooks来强制处理。

在IDE中配置（VSCode为例）

在VSCode的.settings.json文件中添加如下配置：

// 保存时执行eslint --fix
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
// 编辑器默认格式使用prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存时格式化（调用默认格式化即prettier），这个配置主要处理一些eslint默认不处理的文件，如.css等
"editor.formatOnSave": true

husky添加git hooks

通过git hooks来强制执行代码格式化，团队开发更推荐这种。
参考该篇

前端项目规范最佳实践：Editorconfig、Eslint、Prettier