1. Requirements plug-in

  • ESLint (Reading ESLint configuration files for syntax checking)
  • Prettier ESLint (formatting from an ESLint configuration file)

2. Modify the default formatting plug-in

2.1 Find any code file Right click on the code area and choose “Format document with…”

2.2 Selecting Configure Default Formatter

2.3 Selecting “Prettier ESLint”

“Alt + Shift + F” is automatically formatted.

3. Ctrl + S is automatically formatted according to ESLint rules

3.1 Go to the menu bar file -> Preferences -> Settings

3.2 Click the Settings JSON icon in the user area to open the JSON file 

Note: Difference between workspace and user area User area: applies to the current operating system user, as long as it is developed on the current computer, any project will take effect this configuration (be careful to modify) Workspace: applies only to the current project, if you change the project configuration will be invalidCopy the code

3.3 Paste the following configuration into the JSON file

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

3.4 After pasting, see the following figure

At this point, save automatic formatting can be implemented.

Note: If formatting is not done according to ESLint rules, you need to uninstall all other formatting plugins! Examples are Beautify, xxxFormatxxx