前言

团队开发的项目，我们需要对团队编程代码风格进行强制性统一规范。在规范过程中，我们会借助一些工具。

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。

关于Prettier Prettier是一个多语言支持的代码格式化工具，它也是通过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才生效。如果配置后，配置不生效，尝试以下设置：

Vue项目优化：编程规范｜（一）Eslint + Prettier 统一代码风格

前言

eslint VS prettier

Eslint + Prettier 统一代码风格

安装Eslint

安装Prettier