react配置eslint+airbnb+Prettier

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

前言

• 项目是用 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 文件，这个文件有两个重要做用：

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

注意：这个文件的改动常常不当即生效，重启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后面的规则会覆盖前面的。

• react-app规则
• airbnb规则
• airbn-base规则,会被airbnb规则引用
• prettier规则

Prettier的思想

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

plugin:prettier/recommended实际上是个简写

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

"extends": ["prettier"]
复制代码

和

"plugins": ["prettier"],
"rules": {
    "prettier/prettier": "error"
}
复制代码

关于规则优先级

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

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