近日接手了一个项目，格式混乱不堪，因为要多人开发，想配置下校验规则和自动格式化。

前言

项目是用 create-react-app 创建的项目。
校验使用ESLint，规则是react-app和airbnb和Prettier
格式化是用Prettier
开发环境是VSCode

安装VSCode插件: ESLint和Prettier

插件的作用就是辅助开发工具VSCode，否则就只能通过命令行去运行ESLint进行校验，通过命令行运行Prettier进行格式化。

ESLint插件可以让VSCode根据规则显示你的错误。

Prettier插件可以让VSCode以Prettier的格式格式化代码。

需要手动操作格式化，或者配置保存自动格式化，格式化插件有多个的话，需要配置默认格式化插件

安装依赖

eslint

create-react-app项目已经安装过ESLint了，无需再次安装

eslint-config-react-app

同上

eslint-config-airbnb

yarn add --dev eslint-config-airbnb

eslint-config-prettier

yarn add --dev eslint-config-prettier

eslint-plugin-prettier

yarn add --dev eslint-plugin-prettier

prettier

yarn add prettier --dev --exact

ESLint 校验配置

项目下创建 .eslintrc.js 文件

module.exports = {
  extends: [
    'react-app', //  react帮配置好了一些语法，譬如箭头函数
    'airbnb',
    'plugin:prettier/recommended', // prettier配置
  ],
  rules: {
    'react/jsx-filename-extension': 'off', // 关闭airbnb对于jsx必须写在jsx文件中的设置
    'react/prop-types': 'off', // 关闭airbnb对于必须添加prop-types的校验
    'react/destructuring-assignment': [
      true,
      'always',
      {
        ignoreClassFields: false,
      },
    ],
    'react/jsx-one-expression-per-line': 'off', // 关闭要求一个表达式必须换行的要求，和Prettier冲突了
    'react/jsx-wrap-multilines': {
      "prop": "ignore", // 关闭要求jsx属性中写jsx必须要加括号，和Prettier冲突了
    },
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'always-multiline',
        functions: 'only-multiline', // 关闭airbnb对函数调用参数，非一行，最后也要加逗号的限制
      },
    ],
    'jsx-a11y/no-static-element-interactions': 'off', // 关闭非交互元素加事件必须加 role
    'jsx-a11y/click-events-have-key-events': 'off', // 关闭click事件要求有对应键盘事件
    'no-bitwise': 'off', // 不让用位操作符，不知道为啥，先关掉
  },
  overrides: [
    {
      files: ['**/Mi/*.js', '**/Mi/*.jsx'],
      rules: {
        'react/prop-types': 'error', // Mi 文件夹下的是系统组件，必须写prop-types
      },
    },
  ],
};

Prettier 格式化配置

项目下创建 .prettierrc.json 文件，这个文件有两个重要作用：

配置了eslint的校验规则，eslint进行校验时候会引用这个规则
同时也是格式化的规则，你去格式化文件时候会引用这个规则

注意：这个文件的改动经常不立即生效，重启VSCode就生效了

{
  "trailingComma": "es5",
  "singleQuote": true
}

因为上面提到的两点，所以必须有所改动，譬如Prettier格式化，默认是没有尾逗号的，但是airbnb会报错，所以改一下trailingComma为es5，表示在es5环境允许的情况下就加逗号。

安装配置结束

可以happy coding了。。。但是可以继续拓展，例如配置保存时候自动格式化，配置git提交时候自动格式化，配置git提交时候自动校验等。

附

eslint配置项extends理解

eslint 提供了几百？千？个规则，但是一般都是默认关闭的，这也是eslint作者的思想：我给你提供规则，但是我不表态好不好，你自己配。所以extends里就是各家制定的规则，后面的会覆盖前面的。

"extends": [
    "react-app", //  react帮配置好了一些语法，譬如箭头函数
    "airbnb",
    "plugin:prettier/recommended" // prettier配置
  ]

譬如我用了这三个规则，优先级就是prettier > airbnb > react-app，如果有同样的配置，放在extends后面的规则会覆盖前面的。

Prettier的思想

Prettier就是帮你配了一套格式化规则，提供极少数的可配置项，用就是了。反正目的是统一团队风格，好不好我不管，本来就是个主观问题。如果提供过多配置项，就会发展成争论怎么配置Prettier是个好配置？进入另一个纠纷。

plugin:prettier/recommended其实是个简写

官方文档意思就是这个配置相当于同时配了

"extends": ["prettier"]

和

"plugins": ["prettier"],
"rules": {
    "prettier/prettier": "error"
}

关于规则优先级

官方文档都有详解，这里讲两点：

配置文件会覆盖package.json中的配置
默认都会向上继续查找配置直到全局，配置文件如果配置root的话，将不会向上查找，如果不想项目和个人冲突，可以配一下（例如项目统一缩进是2个空格，个人是4个空格）

react配置eslint+airbnb+Prettier

前言