Detailed explanation of create-react-app configuration eslint steps

php中世界最好的语言
Release: 2018-06-09 11:49:02
Original
3341 people have browsed it

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 eslintBecause 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",
Copy after login

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
Copy after login

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

{ "extends": "standard" }
Copy after login

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] } }
Copy after login

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, },
Copy after login

We hope to block the node_modules folder The code

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

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"
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!