This configuration is used for VUE development and the end effect is that js, HTML, and CSS code is automatically formatted according to ESLint when saved.

Vscode Vetur plug-in

The Vetur plugin is used to recognize vue files. Vetur comes with formatting, but it conflicts with eslint, so we turned off vscode’s automatic formatting in the project.

Vscode ESlint plug-in

The Eslint plugin is used to display error messages in the editor based on the.eslintrc.js configuration file in the project directory, and automatic formatting will be performed based on these error messages.

Project created based on VUe-CLI

Note the following steps:

Linter/Formatter selected for creation (default)

The next option is Eslint+Prettier

Next select Lint on Save (checks against code formatting after editing and saving)

Next select In dedicated Config files(separate esLint and prettier configurations into separate files)

Create dependencies for esLint and Prettier that you can see in package.json

In.eslintrc.js you can see that the overall ESLint rule incorporates some of the plugin libraries for Vue, ESLint, and Prettier for parsing (ESLint for JS and Vue, Prettier for JS, HTML, and CSS, where some conflicts between ESLint and Prettier have already been handled)

At this point, you’ll see esLint reporting errors and warnings at compile time, but you won’t be able to save and format automatically.

Prettierrc Formatting of the prettier file User-defined rule, the following is the rule I added

{
  /* Contains the string */ in single quotes
  "singleQuote": true./* Do not add a trailing semicolon */
  "semi": false./* Add a space */ to the object attribute
  "bracketSpacing": true./* Optimize HTML closing tags without line breaks */
  "htmlWhitespaceSensitivity": "ignore"
}
Copy the code

Add custom Settings in User Settings

Location in MAC

To open the settings.json file, click the Edit button in the upper right corner

Add the following configuration so that the editor automatically formats according to ESLint rules when saving

"Editor. codeActionsOnSave": {"source.fixAll": true}, /* Turn off the editor's own save formatting feature, which uses Vetur for formatting. */ "editor.formatOnSave": falseCopy the code

This is my own custom configuration

Global Settings

{
  "editor.fontSize": 14."editor.tabSize": 2."editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // Global use save automatic formatting, vue project turn this off
  "editor.formatOnSave": true
}
Copy the code

Project Settings

{
  // vue project disables vscode save automatic formatting
  "editor.formatOnSave": false
}
Copy the code

Non-vue-cli created projects

Introduce a few dependencies in the red box below separately

Add VScode Vetur and ESlint,.eslintrc.js,.prettierrc and settings.json have the same content as above, so save automatically formatted according to ESlint.

conclusion

  • Introduce some related dependencies for ESLint, Vue, and Prettier 
    @vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
Copy the code
  • Install vscode Vetur and ESlint plugins
  • Configure the.eslintrc.js file
  • Example Configure the. Prettierrc file
  • Configure the settings.json file

The attached:

Vscode’s default save formatting is still powerful, but the prettier plug-in can be installed to optimize formatting for non-vue projects.

I added prettier to the global configuration

  1. Use single quotes to contain strings
  2. Do not add end-of-line semicolons

This allows both formatting Settings to take effect in non-VUE projects

// Include the string "prettier.singleQuote": true with single quotes, // do not add a semicolon "prettier.semi": // Add a comma at the end of an object or array. Git diff can be used to add items on the next line without adding a comma at the end of the current line.Copy the code