前言
团队开发的项目，我们需要对团队编程代码风格进行强制性统一规范。在规范过程中，我们会借助一些工具。
eslint VS prettier
ESLint、StyleLint、TSLint(已废弃)都属于Linters，它们按照一定规则对代码进行校验，另外，Linters的客户端还会提供一些修复功能，实际开发中，常用的IDE借助这些客户端可以实现代码自动修复。
既然Linters已经可以自动修复了，为什么我们还要用Prettier？
Linters的自动修复是基于上述两种规则：Formatting和Code-quality。
在Code-quality上，Linters做的做够好了，像no-unused-vars、no-extra-bind、no-undef等；
但是在Formatting上，Linters虽然能在一定程度上保证代码的格式，像max-len、no-mixed-spaces-and-tabs、keyword-spacing等。
但是如果我们的团队规范要求更高的话，要保证团队的代码风格完全一致，Linters还不足。比如下面两种写法，Linters都是允许的：
// 小明写的 const {a, b, c} = obj // 小李写的 const { a, b, c, } = obj 复制代码
因此，在各种Linters的基础下，我们还需要Prettier。
关于PrettierPrettier是一个多语言支持的代码格式化工具，它也是通过AST解析代码，然后以一个特定的格式输出格式化后的代码。相比Linters，Prettier没有那么多针语言语法的规则，而是一个纯粹的代码格式化工具，在Prettier看来，任何东西都是可以格式化的。
Prettier和Linter在代码格式化的思路差异：
- Linters的格式化思路是：给我一个规则，如果不符合这个规则，我才会去格式化。
- Prettier的格式化思路是：给我一个规则，如果不符合这个规则，我按照A格式格式化，如果符合这个规则，我按照B格式格式化。
因此，基于Prettier的格式化思路，代码的风格差异性能够被完全抹除，不管你怎么写，Prettier格式化后的代码格式总是一样的。
Linters和Prettier之间是否会有冲突？
有冲突，所以最佳实践是禁用掉Linters中所有与Prettier冲突的Formatting Rules，用prettier负责格式化
linters有两种能力：检查代码质量（是否有未使用的变量，使用函数式编程的函数是否产生副作用等）和检查代码风格，另外，通过IDE借助这些linters客户端可以实现一些代码自动修复。
但是代码风格方面完全靠Linters是远远不够的，还需要prettier，pretter没有对代码的质量进行检查的能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码风格。
Eslint + Prettier 统一代码风格
安装Eslint
npm install --save-dev eslint eslint-plugin-vue // or yarn add -D eslint eslint-plugin-vue 复制代码
安装eslint之后，默认会在项目根目录下就会生成.eslintrc.js，这里还安装了eslint-plugin-vue，因为要使用到他的vue/recommended插件。
配置.eslintrc.js：
module.exports = { root: true, env: { node: true, browser: true, es6: true }, extends: [ "plugin:vue/recommended", "eslint:recommended" ], parserOptions: { "parser": "babel-eslint" }, rules: {} // 用来自定义一些符合个人或者团队的规则 } 复制代码
根目录下创建.eslintignore文件，配置需要忽略检查的文件：
# 忽略build目录下类型为js的文件的语法检查 build/*.js # 忽略src/assets目录下文件的语法检查 src/assets # 忽略public目录下文件的语法检查 public dist 复制代码
安装Prettier
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier 复制代码
- prettier: 核心模块
- eslint-config-prettier: 关闭所有不必要或可能跟prettier产生冲突的规则
- eslint-plugin-prettier: 可以让eslint使用prettier规则进行检查
根目录下.eslintrc.json文件中添加extends设置：
{ // ... "extends": [ // ... "plugin:prettier/recommended", ], } 复制代码
根目录下创建.prettierrc.json文件：
{ "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true } 复制代码
修改.prettierrc.json文件后，需要重启vscode才生效。如果配置后，配置不生效，尝试以下设置：
