Detailed explanation of create-react-app configuration eslint steps

This time I will bring you a detailed explanation of the steps for configuring eslint in create-react-app. What are the precautions for configuring eslint in create-react-app? The following is a practical case, let's take a look.

Use eslint and editorconfig to standardize code

Why use these:

1. Code specifications are conducive to team collaboration

2. Purely manual specifications are time-consuming and labor-intensive and cannot guarantee accuracy

3. Can cooperate with the editor to automatically remind errors and improve development efficiency

eslint

As the ECMAScript version is constantly updated, the Js lint tool has rich plug-ins and can apply specifications. The rules are very rich and can meet the needs of most teams.

eslint cooperates with git

In order to control everyone's specifications to the greatest extent, we can use git hook to call eslint for code specification verification when git commits the code. Canonical code cannot be submitted to the warehouse.

editorconfig

Different editors will have certain differences in the format of text. If some standards are not unified, you may update others every time you cooperate with others. There will be a lot of errors in the code - webstorm automatically supports the editorconfig configuration file.

First installeslintnpm i eslint Because create-react-app is already installed by default

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

For the custom configuration we want, we install it as follows

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

We create a new .eslintrc file in the root directory to make a standard specification for the entire project

{
 "extends": "standard"
}

The main project is the front-end project, so we create a new .eslintrc file in the front-end folder, go here Standardize client code. Client code uses jsx. Many rules are different from nodejs. Here, more strict specifications are used to require client code.

The value corresponding to the configured value: 0: off 1: warning 2: error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

Use babel-eslint to parse the code. The definition environment is browser and es6, which will contain public variables. Webpack therefore needs some environment variables of node, parserOptions to define the version, and jsmodule mode method writing.

Because you need to check the code before each compilation, you also need to configure webpack, which is the default of create-react-app

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

We hope to block the node_modules folder The code

exclude:[path.resolve(__dirname, '../node_modules')]

Create a new file .editorconfig in the project root directory. Webstom has the configuration by default

1. root = true Project root directory

2. [*] This rule applies to all files

3. charset = utf-8 encoding mode

4. indent_style = space uses tab style Tab characters and space

5. indent_size = 2

6. ##end_of_line = lf line ending method

7. insert_final_newline = true Automatically save the last line at the end of the line as a blank line

8. trim_trailing_whitespace = true Automatically remove the spaces after the end of a line

eslint does not detect This line of code

// eslint-disable-line

eslint does not detect this file, at the beginning

/* eslint-disable */ at the end of the file / * eslint-enable */

Install

npm i husky -D

Then add the git hook in package.json scripts, which will be executed before executing git commit Call this command

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit to force the execution of eslint passed code

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use the entry component

How to use the Installation plug-in in actual projects

The above is the detailed content of Detailed explanation of create-react-app configuration eslint steps. For more information, please follow other related articles on the PHP Chinese website!