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

    1. Install plug-ins as prompted

      1. Choose whether to use TypeScript or not. Select Yes

    2. It automatically generates esLint configuration files

  3. Set up automatic save formatting for vscode

code

In the root directory of the project, add the configuration file.vscode\settings.json, which contains the following contents:

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
​
Copy the code

Environment Configuration – Importing prettier-now

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

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

.vscode\settings.json

{ "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": // "editor.formatOnSave": True, // Editor Settings - default prettier now formatting // If prettier is used, DefaultFormatter :"remimarsal. Prettier -now", // indent "prettier. UseTabs ": False, // Indent "prettier. TabWidth "instead of TAB: // If you use Prettier, you cannot select it, causing it to conflict with the default configuration of ESLint // You can find many files 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, / / the react JSX let > with the end tag "prettier. JsxBracketSameLine" : true, "prettier. BracketSpacing" : False, // Remove the space "prettier.semi": false, // do not add; "Prettier.singlequote ": true, // Use single quotes" prettier.trailingcomma ": "None ", // Do not follow comma," prettier.printwidth ": 80, // wrap each row over 80 columns // in.js, write div press TAB to automatically complete "emmet.includeLanguages": {"javascript": "javascript"}}Copy the code

\