1. 使用eslint--init创建基础配置文件

2. 集成webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  }
};

注意:
loader是文件预处理器, webpack在处理静态文件的时候, 需要使用loader来加载各种文件, 比如,html需要使用html-loader,css需要css-loader,style-loader等

babel-loader: 用来处理es6语法, 将其编译为浏览器可以执行的js语法.

划重点：eslint-loader规则必须要先于babel-loader规则

3.安装eslint-config-airbnb

npm install eslint-config-airbnb --save-dev 
// 包含es6+ 以及react 的代码规范
// 在安装 eslint-config-airbnb 的时候, 他会一同安装eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y

4. 安装pretier

代码格式化工具
可以进行webstrom配置在保存时格式化
可以结合webstrom手动格式化(webstrom安装prettier插件)
Mac: CMD + Shift + P
WIndows：Ctlr + Shift + P
可以和git整合

5. prettier整合git

安装依赖

npm install husky
npm install lint-staged

更简单的方式

// 这一行就可以安装husky和lint-stage，并且配置好husky。
npx mrm lint-staged

husky的作用是咬住Git的hooks不放, 我们只关心pre-commit,在package.json中进行下面的配置

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "post-commmit": "git update-index --again"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
     "pretty-quick —-staged",
	 "git add"
    ]
  }

6. prettier和各种linters的关系

当 ESLint 遇到 incorrect code 的时候，会提示你违反规则，让你修改代码以符合规则
Prettier 则不会这么麻烦，它根本不管你之前符不符合什么规则，都先把你的代码解析成 AST，然后按照它自己的风格给你重新输出代码。
Prettier 并不会取代各种 Linters，而是能避免你的代码和这些 Linters 定义的 Formatting rules 冲突。Linters 检查出来违反 Code-quality rules 的情况后还需要你自己根据业务逻辑和语法手动修改。Prettier 帮你格式化代码，但是不会帮你挑出潜在的错误

7. Prettier和Linters配合使用

禁用 Linters 自己的 Formatting rules，让 Prettier 接管这些职责。这些配置有现成的 Config，Linters 的配置继承这个 Config 就可以了。让 Linters 执行时首先能够调用 Prettier 格式化带啊，然后再检查 Code-quality 类规则。这是由 Linters 的 Plugin 实现的

// 创建工程初始化的时候用
npm init prettier-eslint
// 或直接使用
npx create-prettier-eslint