在讨论代码风格以及代码格式化之前，一定要注意查看编辑器的个性化配置是否会导致错误。例如，开启VS code中自动对Tab以及空格进行相互转化，这在ESLint与Prettier工作的情况下产生问题！需要区分Tab以及空格。参阅StackOverflow的回答

注意文件格式的区别，配置文件既可以是json，也可以是js。

ESLint

ESLint提供的不仅是代码格式化，更有控制代码风格，检查代码错误的作用。

ESLint demo以所见即所得的可视化方式提供了rules configuration的各种选项。

ESLint安装

在初始化一个npm项目后，—save-dev的形式安装。

1	npm install eslint --save-dev

在项目目录下执行npx eslint --init，会有一个命令行问答面板，根据yes或no的选择，在自动生成的.eslintrc.js文件中给予初始配置。

ESLint可以对项目中的任何文件执行，只需要npx eslint yourfile.js。命令长指令还有-c/—config，—env，—global等。

ESLint 配置

具体查看Table of Contents的链接。

常用的配置字段有以下几种：

env

An enviroment defines global variables that are predefined.

明确了env如browser/node/es6等，就能预先知道这些环境中有哪些保留字是自己编写代码的时候不能用的，就算用了ESLint也会报错。

parser

如果使用到了babel，需要明确parser: "@babel/eslint-parser",(这里是js文件格式，而非json)。并且文件目录下要有babel配置文件存在。

globals

为什么需要globals？因为ESLint的no-undef rule要求，当一个文件内某个变量defined but not used的时候会报错。在配置文件中利用globals字段说明所有全局变量，并给予writable/readonly的权限。

plugins

ESLint通过plugins字段来支持第三方插件，在使用一个插件之前，需要通过npm下载。插件的名字都有eslint-plugin-xx的通用格式，在写入plugins字段的时候可以不需要前缀。

1 2	plugins: ["prettier"], //npm install --save-dev eslint-plugin-prettier

The eslint-plugin- prefix can be omitted for non-scoped packages

plugins本质上就是定义了一些功能的集合，在plugin字段中写入plugin并不会让这些功能生效。还需要在rules字段中启用特定的功能。

启用和停止plugin中的规则都有相同的形式。

To configure a rule which is defined within a plugin you have to prefix the rule ID with the plugin name and a /.

To disable eslint-plugin-example‘s rule-name rule, combine the plugin’s name (example) and the rule’s name (rule-name) into example/rule-name

rules: {
    "prettier/prettier": "error",
    // 第一个是plugin插件
    // 第二个是plugin插件中名为prettier的规则
    indent: ["error", 2],
  },

rules

规则如下：

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

形式如"plugin1/rule1": "error"，冒号后可以是数字或字符串，也可以是字符串或数字组成的数组。

extends

extends就是继承的意思，这个字段旨在继承一些已有的，共享的，或者当前目录下的其他配置文件的ESLint配置（也就是一个opinionated rules），而后其他字段的如果另有说明，在这些导入配置的基础之上另作修改。

rules字段可以对extends字段的base rule settings通过以下方式更改：

添加其他base rules中没有的规则
对继承的某条规则，更改规则选项值的先后顺序
对继承的某条规则，override或disable。

推荐的extend字段的value有："extends": "eslint:recommended"，extends: ["standard", "prettier"],。另外，还可以使用配置文件路径来引用项目目录中已存在的配置文件。

注意和plugin一样，这些sharable configuration package都是有eslint-config-前缀，使用时可以省略。standard的配置名就是eslint-config-standard。

overrides

有一些场景需要将eslint配置文件应用到指定文件，指定文件的方式就像在命令行中指定文件一样app/**/*.test.js。

configuration based on glob patterns.

ESLint忽略特定文件

ignorePatterns字段
.eslintignore文件

Prettier

文件目录下npm安装Prettier。

1	npm install --save-dev prettier

手动创建配置文件并书写。

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 2,
  semi: false,
  singleQuote: true,
};

可配置的格式化

PrintWidth决定一行最多可以输入多少个字，超出就换行，默认80。

TabWidth明确多少个空格用作一级别的缩进，默认2。

Tabs使用tab还是space来进行缩进，默认false不使用tab缩进。

semicolons在每一行statement最后都加分好，默认true都加分号。

trainingComma尾后都好，意思就是数组或者对象的最后一个项目也要加一个都好，默认”es5”。但是在JSON中默认不允许，如果最后一项加了逗号就要报错。

bracketSpacing默认true，花括号和变量之间有空格。

arrowParens默认”always”，总给箭头函数的输入加上括号，因为当只有一个参数的时候括号可以省略。

override

Prettier borrows ESLint’s override format.override字段接受一个由对象组成的数组，每一个对象都是一个prettier配置，针对什么文件files，有哪些配置options。

Prettier & ESLint

Prettier和ESLint在代码格式化方面有功能重合，但对于同一个问题又有不同的解决办法，因此同时安装二者会报错。通过在ESLint中使用适应Prettier的插件来协调。

需要两个包来安装。第一个是能够把所有eslint中可能与prettier发生冲突的规则关闭的eslint-config-prettier，第二个是将写在Prettier中的rule当作ESLint规则并且输出ESLint警告的eslint-plugin-prettier。

eslint-plugin-prettier: Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

Aslant-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

需要下载npm包有：

1	npm install --save-dev eslint-plugin-prettier eslint-config-prettier

在.eslintrc.js文件的extends字段做以下配置：注意一定要把prettier的plugin放在最后。（这个extends是一些配置的集合，包括了extends字段，plugins字段，rules字段的设置。）

extends: ["standard",
          "plugin:prettier/recommended",
          // 其他有可能与prettier发生冲突的插件排除
          "prettier/flowtype",
          "prettier/react"],

对于其他可能和prettier存在冲突的eslint plugin如eslint-plugin-react，在这之后将这些排除。

完成后就可以在.prettierrc.js中书写prettier options了。