3. integrate eslint and prettier

1. Download dependency
   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： This plug-in is mainly for verification import/export grammar , Prevent misspelling of file paths and export names

• eslint-plugin-jsx-a11y： Provide jsx Element accessibility check

• eslint-plugin-react： check React

• eslint-plugin-react-hooks： according to Hooks API check Hooks Use

• eslint-config-airbnb: Basic code specification Library

• eslint-import-resolver-webpack: solve eslint Could not read alias （alias） The problem that led to the wrong report

• eslint-config-prettier: Some unnecessary and Prettier Conflicting ESLint The rules .

• eslint-plugin-prettier: take prettier As ESLint Rules to use , It is equivalent to that the code does not conform to Prettier The standard of , Will report a ESLint error , At the same time, you can also go through eslint --fix To format

• @babel/eslint-parser: A parser , allow ESLint Run by Babel Convert the source code .

  npm i -D eslint-webpack-plugin

• eslint-webpack-plugin: Turn on eslint

2. stay webpack Middle configuration

const ESLintPlugin = require('eslint-webpack-plugin'); //  Turn on eslint
plugins: [
    new ESLintPlugin({
        context: resolve('../src'),
        // fix: true, /*  Automatically help repair  */
        extensions: ['js', 'json', 'jsx'],
        exclude: 'node_modules'
    })
],

3. To configure .eslintrc.js file （ Put it in the root directory ）

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', //  Interpreter 
  extends: ['airbnb', 'prettier'],
  plugins: ['prettier', 'react', 'react-hooks', 'jsx-a11y'],
  env: {
    browser: true, //  Enable global variables in the browser 
    node: true, //  Enable node Global variables in 
    es6: true,
  },
  //  Parser 
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'prettier/prettier': ['error', prettierOptions],
    'no-console': ERROR,
    'no-array-constructor': ERROR,
    'no-unused-vars': OFF, //  not used import Value 
    'no-undef': ERROR, //  Undefined variables are not allowed 
    'no-underscore-dangle': OFF, //  Don't allow  '_'  Name at the beginning 
    'no-cond-assign': ERROR, //  Conditional statements do not allow assignment 
    'no-var': ERROR, //  no need var
    'no-extra-boolean-cast': ERROR, //  Prohibit unnecessary Boolean conversions 
    'no-undef-init': ERROR, //  No assignment 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,
      {
        //  Controls the space before and after commas 
        before: false,
        after: true,
      },
    ],
    'max-len': [ERROR, 200, { ignoreUrls: true }], //  Force the maximum length of a line 
    'no-mixed-spaces-and-tabs': [
      //  No spaces and  tab  The mixed indent of 
      'error',
      'smart-tabs',
    ],
    'no-dupe-class-members': ERROR, //  Class attribute overloading is prohibited 
    'no-this-before-super': ERROR, // super Not allowed before 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, //  No giving const Variable assignment 
    'no-duplicate-imports': ERROR, //  It is forbidden to introduce modules repeatedly 
    'react/jsx-key': ERROR, //  Verify... In an array or iterator JSX have key attribute 
    'react/jsx-no-duplicate-props': ERROR, //  prevent JSX Repeated in props
    'react/jsx-no-undef': ERROR, //  stay jsx Variables declared as are prohibited in 
    'react/no-unknown-property': ERROR, //  Prevent the use of unknown dom attribute 
    'react/react-in-jsx-scope': ERROR, //  Prevent forgetting to introduce 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. To configure prettier

• newly build .prettierrc, .prettierignore Two documents , Write the following configurations respectively

{
    "printWidth": 200,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true, // Use single quotes 
    "trailingComma": "all" // Add a semicolon at the end 
}

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