3.集成eslint、prettier

1. 下载依赖
   npm i -D eslint prettier eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-import eslint-import-resolver-webpack eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @babel/eslint-parser

• eslint-plugin-import：此插件主要为了校验 import/export 语法，防止错误拼写文件路径以及导出名称的问题

• eslint-plugin-jsx-a11y：提供 jsx 元素可访问性校验

• eslint-plugin-react：校验 React

• eslint-plugin-react-hooks：根据 Hooks API 校验 Hooks 的使用

• eslint-config-airbnb: 基本的代码规范库

• eslint-import-resolver-webpack: 解决 eslint 读取不到别名（alias）导致报错的问题

• eslint-config-prettier: 禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

• eslint-plugin-prettier: 将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化

• @babel/eslint-parser: 一个解析器，允许 ESLint 运行在由 Babel 转换的源代码上。

  npm i -D eslint-webpack-plugin

• eslint-webpack-plugin:开启 eslint

2. 在 webpack 中配置

const ESLintPlugin = require('eslint-webpack-plugin'); // 开启eslint
plugins: [
    new ESLintPlugin({
        context: resolve('../src'),
        // fix: true, /* 自动帮助修复 */
        extensions: ['js', 'json', 'jsx'],
        exclude: 'node_modules'
    })
],

3. 配置.eslintrc.js文件（放在根目录下）

const fs = require('fs');a
const path = require('path');

const prettierOptions = JSON.parse(fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'));
const OFF = 0;
const ERROR = 2;

module.exports = {
  parser: '@babel/eslint-parser', // 解释器
  extends: ['airbnb', 'prettier'],
  plugins: ['prettier', 'react', 'react-hooks', 'jsx-a11y'],
  env: {
    browser: true, // 启用浏览器中全局变量
    node: true, // 启用node中全局变量
    es6: true,
  },
  // 解析器
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'prettier/prettier': ['error', prettierOptions],
    'no-console': ERROR,
    'no-array-constructor': ERROR,
    'no-unused-vars': OFF, // 未使用import的值
    'no-undef': ERROR, // 不允许使用未定义变量
    'no-underscore-dangle': OFF, // 不允许 '_' 开头命名
    'no-cond-assign': ERROR, // 条件语句不允许赋值
    'no-var': ERROR, // 不用var
    'no-extra-boolean-cast': ERROR, // 禁止不必要的布尔转换
    'no-undef-init': ERROR, // 禁止赋值undefined
    'import/imports-first': OFF,
    'import/newline-after-import': OFF,
    'import/no-dynamic-require': OFF,
    'import/no-extraneous-dependencies': OFF,
    'import/no-named-as-default': OFF,
    'import/no-unresolved': ERROR,
    'import/no-webpack-loader-syntax': OFF,
    'import/prefer-default-export': OFF,
    'comma-spacing': [
      ERROR,
      {
        // 控制逗号前后的空格
        before: false,
        after: true,
      },
    ],
    'max-len': [ERROR, 200, { ignoreUrls: true }], // 强制一行的最大长度
    'no-mixed-spaces-and-tabs': [
      // 禁止空格和 tab 的混合缩进
      'error',
      'smart-tabs',
    ],
    'no-dupe-class-members': ERROR, // 禁止类属性重载
    'no-this-before-super': ERROR, // super前不允许用this
    'no-dupe-args': ERROR,
    'no-dupe-keys': ERROR,
    'no-duplicate-case': ERROR,
    'no-shadow': ERROR,
    'brace-style': [
      ERROR,
      '1tbs',
      {
        allowSingleLine: true,
      },
    ],
    'no-const-assign': ERROR, // 禁止给const变量赋值
    'no-duplicate-imports': ERROR, // 禁止重复引入模块
    'react/jsx-key': ERROR, // 在数组或迭代器中验证JSX具有key属性
    'react/jsx-no-duplicate-props': ERROR, // 防止JSX中重复的props
    'react/jsx-no-undef': ERROR, // 在jsx中禁止使用为申明的变量
    'react/no-unknown-property': ERROR, // 防止使用未知的dom属性
    'react/react-in-jsx-scope': ERROR, // 防止忘记引入React
    'react/jsx-filename-extension': [
      ERROR,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'react/prop-types': OFF,
    'react/jsx-wrap-multilines': OFF,
    'react/jsx-one-expression-per-line': OFF,
    'react/jsx-props-no-spreading': OFF,
    'react/state-in-constructor': OFF,
    'react/static-property-placement': OFF,
    'react/destructuring-assignment': OFF,
    'react/no-array-index-key': 'warn',
    'react-hooks/rules-of-hooks': 'error',
    'react/jsx-closing-tag-location': OFF,
    'react/forbid-prop-types': OFF,
    'react/jsx-first-prop-new-line': [ERROR, 'multiline'],
    'react/jsx-no-target-blank': OFF,
    'react/jsx-uses-vars': ERROR,
    'react/require-default-props': OFF,
    'react/require-extension': OFF,
    'react/self-closing-comp': OFF,
    'react/sort-comp': OFF,
    'react/jsx-fragments': OFF,
    'require-yield': OFF,
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: './webpack/webpack-base-config.js',
      },
    },
  },
};

4. 配置prettier

• 新建.prettierrc, .prettierignore两个文件，分别写入以下配置

{
    "printWidth": 200,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true, //使用单引号
    "trailingComma": "all" //末尾添加分号
}

dist/
node_modules/
webpack/
package-lock.json
package.json