使用ESLint+Prettier来统一前端代码风格

加分号仍是不加分号？tab仍是空格？你还在为代码风格与同事争论得面红耳赤吗？

正文以前，先看个段子放松一下： 去死吧！你这个异教徒！

想起本身刚入行的时候，从svn上把代码checkout下来，看到同事写的代码，大括号竟然换行了。心中暗骂，这我的是否是个**，大括号为何要换行？年轻气盛的我，竟然满腔怒火，将空行一一删掉。 可是关于代码风格，咱们很难区分谁对谁错，不一样的人有不一样偏好，惟有强制要求才能规避争论。

因此，团队关于代码风格必须遵循两个基本原则：

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

本文将介绍，如何使用ESLint + Prettier来统一咱们的前端代码风格。

Prettier是什么？

首先，对应ESLint大多都很熟悉，用来进行代码的校验，可是Prettier（直译过来就是"更漂亮的"😂）听得可能就比较少了。js做为一门灵活的弱类型语言，代码风格千奇百怪，一千我的写js就有一千种写法。虽然js没有官方推荐的代码规范，不过社区有些比较热门的代码规范，好比standardjs、airbnb。使用ESLint配合这些规范，可以检测出代码中的潜在问题，提升代码质量，可是并不能彻底统一代码风格，由于这些代码规范的重点并不在代码风格上（虽然有一些限制）。

下面开始安利，Prettier。

Prettier是一个可以彻底统一你和同事代码风格的利器，假如你有个c++程序员转行过来写前端的同事，你发现大家代码风格彻底不同，你难道要一行行去修改他的代码吗，就算你真的去改，你的需求怎么办，因此没有人真的愿意在保持代码风格统一上面浪费时间。选择Prettier可以让你节省出时间来写更多的bug（不对，是修更多的bug），而且统一的代码风格能保证代码的可读性。

看看Prettier干的好事。

能支持jsx

也能支持css

惟一的遗憾是，暂时还不能格式化vue模版文件中template部分。🤔

ESLint 与 Prettier配合使用

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

npm i -D prettier
复制代码

配合ESLint检测代码风格

安装插件：

npm i -D eslint-plugin-prettier
复制代码

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，而后与格式化以前的代码进行对比，若是过出现了不一致，这个地方就会被prettier进行标记。

接下来，咱们须要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
复制代码

借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。由于咱们项目是在webpack中引入eslint-loader来启动eslint的，因此咱们只要稍微修改webpack的配置，就能在启动webpack-dev-server的时候，每次保存代码同时自动对代码进行格式化。

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
    	loader: 'eslint-loader',
    	enforce: 'pre',
    	include: [path.join(__dirname, 'src')],
    	options: {
          fix: true
    	}
      }
    ]
}
复制代码

若是你的eslint是直接经过cli方式启动的，那么只须要在后面加上fix便可，如：eslint --fix。

若是与已存在的插件冲突怎么办

npm i -D eslint-config-prettier
复制代码

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

//.eslintrc.js
{
  extends: [
    'standard', //使用standard作代码规范
    "prettier",
  ],
}
复制代码

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

同时使用上面两项配置

若是你同时使用了上述的两种配置，那么你能够经过以下方式，简化你的配置。

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}
复制代码

最后贴一下咱们项目中的完整配置，是在vue-cli生成的代码基础上修改的，而且使用standard作代码规范：

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
    es6: true
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

复制代码

什么？大家项目没有启用ESLint

不要慌，没有ESLint也不要怕，能够经过onchange进行代码的监听，而后自动格式化代码。只要在package.json的scripts下添加以下代码，而后使用npm run format，咱们就能监听src目录下全部的js文件并进行格式化：

"scripts": {
  "format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}
复制代码

当你想格式化的文件不止js文件时，也能够添加多个文件列表。

"scripts": {
  "format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}"
}
复制代码

固然，你也可以在编辑器中配置对prettier的支持，具体支持哪些编辑器，请戳这里

如何对Prettier进行配置

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

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

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

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

配置大概列出了这些，还有一些其余配置能够在官方文档进行查阅。

注意一点，parser的配置项官网列出了以下可选项：

• babylon
• flow
• typescript Since v1.4.0
• postcss Since v1.4.0
• json Since v1.5.0
• graphql Since v1.5.0
• markdown Since v1.8.0

可是若是你使用了vue的单文件组件形式，记得将parser配置为vue，目前官方文档没有列出来。固然若是你本身写过AST的解析器，也能够用你本身的写的parser: require("./my-parser")。

总结

有了prettier咱们在再也用羡慕隔壁写golang的同事，保存后就能自动format，也不用为了项目代码不统一和同事争论得面红耳赤，由于咱们统一使用prettier的风格。可能刚开始有些地方你看不惯，不过没关系，想一想这么作都是为了团队和气，世界和平，咱们作出的牺牲都是必要的。并且prettier的样式风格已经在不少大型开源项目中被采用，好比react、webpack、babel。

你看，他们都在用了，你还在等什么，想变成异教徒被烧死吗，还不快行动起来。更多精彩内容请看官方连接