在开发中，我们很难自己一个人独立开发一个完整的项目，大多数都是和同事共同合作开发。在合作开发中，代码规范和习惯就显得非常重要。大家一致的时候就会提高合作开发的效率，所以我们主要工具登场了。团队关于代码风格必须遵循两个基本原则：

  1. 少数服从多数；
  2. 用工具统一风格。

如何使用ESLint + Prettier来统一我们的前端代码风格。

Prettier

Prettier是一个能够完全统一你和同事代码风格的利器，假如你前端的同事，你发现你们代码风格完全不一样，你难道要一行行去修改他的代码吗，就算你真的去改，你的需求怎么办，所以没有人真的愿意在保持代码风格统一上面浪费时间。选择Prettier能够让你节省出时间来写更多的bug（不对，是修更多的bug），并且统一的代码风格能保证代码的可读性。

ESLint

代码规则检查工具，检查出代码有不符合规则的，报错。

ESLint+Prettier

首先肯定是需要安装prettier，并且你的项目中已经使用了ESLint，有eslintrc.js配置文件。

  1. npm i -D prettier

配合ESLint检测代码风格

安装插件：

  1. npm i -D eslint-plugin-prettier

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
接下来，我们需要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。

  1. //.eslintrc.js
  2. {
  3.   "plugins": ["prettier"],
  4.   "rules": {
  5.     "prettier/prettier": "error"
  6.   }
  7. }

.
借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix

如果与已存在的插件冲突怎么办

  1. npm i -D eslint-config-prettier

通过使用eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

  1. //.eslintrc.js
  2. {
  3.   extends: [
  4.     'standard', //使用standard做代码规范
  5.     "prettier",
  6.   ],
  7. }

这里有个文档，列出了会与prettier冲突的配置项。

同时使用上面两项配置

如果你同时使用了上述的两种配置，那么你可以通过如下方式，简化你的配置。

  1. //.eslintrc.js
  2. {
  3.   "extends": ["plugin:prettier/recommended"]
  4. }

如何对Prettier进行配置

一共有三种方式支持对Prettier进行配置：

  1. 根目录创建.prettierrc文件，能够写入YML、JSON的配置格式，并且支持.yaml/.yml/.json/.js后缀；
  2. 根目录创建.prettier.config.js文件，并对外export一个对象；
  3. 在package.json中新建prettier属性。

下面我们使用prettierrc.js的方式对prettier进行配置，同时讲解下各个配置的作用。

  1. module.exports = {
  2.   "printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
  3.   "tabWidth": 2, //一个tab代表几个空格数，默认为80
  4.   "useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  5.   "singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
  6.   "semi": true, //行位是否使用分号，默认为true
  7.   "trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
  8.   "bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  9.   "parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
  10. }

总结

有了prettier保存后就能自动format，也不用为了项目代码不统一和同事争论得面红耳赤，因为我们统一使用prettier的风格。可能刚开始有些地方你看不惯，不过不要紧，想想这么做都是为了团队和睦，世界和平，我们做出的牺牲都是必要的。而且prettier的样式风格已经在很多大型开源项目中被采用，比如react、webpack、babel。