1- Environment Configuration – Introducing ESLint

The target

Configure ESLint in the React project and enable save automatic formatting

Train of thought

  1. Install ESLint in your project
  2. Create an ESLint configuration file using the init command of esLint
  3. Set up automatic save formatting for vscode

steps

  1. npm i eslint typescript -D

  2. In the project root directory, run NPX eslint –init

0. It will automatically generate eslint configuration files. 2 check the following box in vscode to see an errorCopy the code

Results:

  1. Set up automatic save formatting for vscode

Eslint does not drill down into JSX code to format, so additional tools are required.

2 Environment Configuration – Importing prettier-now

prettier-now

Prettier is an offshoot of the Prettier project and does just as Prettier does, but allows for more configuration items. Prettier-now prettier in vscode, prettier-now prettier

steps

  1. Install the vscode plug-inprettier-now
  2. Added configuration

code

Go to Settings, Workspace, and click on the top right

.vscode\settings.json

{
   //eslint automatically formats
    "eslint.enable": true."eslint.run": "onType"."eslint.options": {
        "extensions": [
            ".js".".vue".".jsx".".tsx"]},"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // Editor Settings - do formatting when saving
  "editor.formatOnSave": true.// Editor Settings - default prettier-now for formatting
  // If prettier is used, esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now".// Control indentation
  "prettier.useTabs": false.// Indent instead of TAB, use Spaces
  "prettier.tabWidth": 2.// Indent the number of bytes
  
  Function declarations are preceded by Spaces before and after parentheses
  Prettier is optional if you use Prettier, which conflicts with the default configuration of ESLint
  // You can find many records in Baidu: https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true.// React JSX makes > go with the end tag
  "prettier.jsxBracketSameLine": true."prettier.semi": false.// Do not add;
  "prettier.singleQuote": true.// Use single quotes
  "prettier.trailingComma": "none".// Do not follow the comma,
  "prettier.printWidth": 80.// Wrap each row over 80 columns

  // In.js, when writing div, press TAB to complete it automatically, instead of writing 
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"}}Copy the code

3 Ignore react import

After React 17, you can omit the import React when using JSX on the page

In version 16, when JSX is used on the page, you must import React

The red part of the error is set to off and should be enclosed in quotation marks. Eslintrc.js

 rules: {
    'react/react-in-jsx-scope': 'off'
  }
Copy the code