Detailed tutorial of vscode format code 2020

Time:2020-9-14

The first draft of the research on vscode format configuration is as follows:

preface

Before using vscode to format, we searched “vscode format code” on Baidu and Google, and then directly copied others. I haven’t seen the details of the configuration.

But recently, when developing a project, I found that the format of the code submitted by the same group was always inconsistent. So these two days I specially looked at the official documents of the plug-in and studied it.

We have some preliminary results today. It will be configured a little bit. Write this blog for your reference. We are welcome to add the deficiencies and correct the mistakes.

The article includes two parts: one is theory, the other is mine settings.json Configuration.

theory

Reference articles:

Experience of rainbow fart plug-in of vscode program rainbow fart

Vscode configuration Vue + vertur + eslint + prettier automatic formatting function

Vscode configuration Vue + vertur + eslint + prettier automatic formatting function

Code format purpose:

The purpose of code formatting is to improve the readability of the code, to facilitate self coding and team development, and to facilitate the identification and correction of errors caused by the format.

In team development. Because everyone has different coding habits, such as

  • Is the indent 2 or 4.
  • Whether to add semicolon at the end of the code, single quotation mark or double quotation mark.
  • Whether to add a space between the function and the parentheses that follow it.
  • wait

Unify the code format, let everybody develop more smoothly.

In order to accomplish the first purpose, there are plug-ins such as vetur and prettier which are used to format files;

In order to accomplish the second purpose, there are plug-ins such as eslint for code checking of files.

Note for code format:

Plug in function

First of all, understand which files the format plug-in focuses on, because different files have different format specifications.

Prettyhtml format HTML;
Prettier format CSS / less / SCSS / postcss / ts;
Stylus supremacy formats stylus;
Vscode has its own format plug-in to format JS;
Vertur formats the. Vue file; lets different blocks use different formatting schemes
Eslint: the new version of eslint supports the verification of. Vue files.

Compliance code inspection

Then notice that the formatted code symbol eslint code is checked.

The most important points of formatting code are: one is to format the corresponding file with the format plug-in; the other is to make the formatted code pass the code verification tool.

for instance.

The prettier plug-in does not support parentheses after function names. This conflicts with eslint. Therefore, JS cannot be formatted by using the prettier plug-in, but by using the JS format function provided by vscode. Otherwise, eslint will report an error, and it will annoy obsessive-compulsive disorder.

Plug in update

Finally, it should be noted that the plug-in is constantly updated, so the formatting code directly copied on the Internet will be incompatible.

Such as vscodeESLintThe plug-in has been removed in a version"eslint.validate"This configuration option is used in many online tutorials.

In the new edition ofESLintWe’ve already supported that right*.vueFile verification, so there is no need to do this configuration, just add a function to automatically fix eslint errors when saving.

Official document of code format plug-in:

Language introduction

Pug: official document. Pug is a node.js Platform development of HTML module engine.

Less: official documents. Less is a CSS preprocessing language.

SCSS: official document. SCSS (SASS) is the most mature, stable and powerful professional CSS preprocessing language in the world.

Postcss: official document. Postcss is a tool that uses JS plug-ins to transform CSS.

Stylus: official document. Stylus is node.js CSS preprocessing framework on the platform.

Plug in introduction

Official document: vetur. Code highlighting, Emmet syntax support, syntax error checking, code reminding, formatting Vue.
Vertur integrates prettier, which allows different blocks in. Vue files to use different formatting schemes. Template tags call HTML formatting tools, script tags call JavaScript formatting tools, and style tags use style formatting tools.

Eslint: official document. Code checking.

Prettyhtml: official document. It provides a general format tool for Vue or pure HTML template.

Pretties: official documents. Code formatting tool, able to parse code, use user set rules to format standard code.

Stylus supremacy: official document. For formatting stylus files node.js modular.

my settings.json file

{
 /*Corresponding plug-in for format file:
There are two steps. One is to format the corresponding file with the format plug-in;
Another step is to make the formatted code pass the code checker.
Prettier formats CSS / less / SCSS / postcss / ts;
Stylus supremacy formats stylus;
Vscode has its own format plug-in to format JS;
Vertur format. Vue file;
Eslint performs code checking.
*/

 /*Format ideas and precautions.
Note that the formatted code meets the eslint code validation.
1. Use vertur to set the default formatting tool. Format. Vue file
2. Use eslint to set the function of repairing eslint error when saving.
3. Format CSS with prettier; remove semicolon at the end of syntax and replace double quotation mark with single quotation mark.
4. Automatic format when saving.
*/

 //By default, prettier is used to format the supported files
 "editor.defaultFormatter": "esbenp.prettier-vscode",

 "vetur.format.defaultFormatter.html": "prettyhtml",
 "vetur.format.defaultFormatter.css": "prettier",
 "vetur.format.defaultFormatter.postcss": "prettier",
 "vetur.format.defaultFormatter.scss": "prettier",
 "vetur.format.defaultFormatter.less": "prettier",
 "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
 // "vetur.format.defaultFormatter.js": "prettier",
 "vetur.format.defaultFormatter.ts": "prettier",
 "vetur.format.defaultFormatter.sass": "sass-formatter",
 "open-in-browser.default": "Chrome",

 //Specify vetur's JS formatting tool as vscode's own
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 //Remove semicolon of JS statement
 "javascript.format.semicolons": "remove",
 //Put parentheses after the function name, similar to the form foo () {}
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

 //Eslint configuration item, automatically repair errors when saving.
 "editor.codeActionsOnSave": {
 "source.fixAll": true
 },

 //Specifies that the format tool for the *. Vue file is vertur
 "[vue]": {
 "editor.defaultFormatter": "octref.vetur"
 },
 //Specifies that the format tool for the *. JS file comes with vscode
 "[javascript]": {
 "editor.defaultFormatter": "vscode.typescript-language-features"
 },

 "vetur.format.defaultFormatterOptions": {
 "JS-beautify-HTML": {
 //The settings for JS beautiful HTML are here
 "wrap_attributes": "force-aligned"
 },
 " prettyhtml": {
 "Printwidth '": 100, // no more than 100 characters per line
 "Singlequote": false, // no single quotation marks
 "wrapAttributes": false,
 "sortAttributes": true
 },
 "prettier": {
 //Remove the semicolon at the end of the code
 "Semi": false, // no semicolon
 "Singlequote": true, // use single quotation marks
 //Let prettier use the code format of eslint for verification
 "eslintIntegration": true,
 "arrowParens": "always"
 }
 },

 //Vscode enables the option to automatically set tabsize based on the file type by default
 "editor.detectIndentation": false,
 //Reset tabsize
 "editor.tabSize": 2,

 //Auto format code on save
 "editor.formatOnSave": true,

 //Optional. Format configuration of stylus and sass.
 //To format stylus, the Manta's stylus supreme plug-in needs to be installed
 " stylusSupremacy.insertBraces ": false, // insert braces
 " stylusSupremacy.insertColons ": false, // insert colon
 " stylusSupremacy.insertSemicolons ": false, // insert semicolon
 " stylusSupremacy.insertNewLineAroundImports ": false, // whether to wrap after import
 "stylusSupremacy.insertNewLineAroundBlocks": false,
 //Enable debug mode.
 "sass.format.debug": false,
 //Remove spaces
 "sass.format.deleteEmptyRows": true,
 //Remove the last space.
 "sass.format.deleteWhitespace": true,
 //Convert SCSS / CSS to sass.
 "sass.format.convert": true,
 //If the attribute: value is true, it is always set to 1
 "sass.format.setPropertySpace": true

 /*Format plug-in:
//Vertur: code highlighting, Emmet syntax support, syntax error checking, code reminding, formatting Vue.
Vertur integrates prettier, so that different blocks in the. Vue file use different formatting schemes,
< template > calls the HTML formatting tool,
< script > calls the JavaScript formatting tool,
< style > use the style formatting tool.

//Eslint: the new version of eslint supports the verification of. Vue files.

//Prettyhtml: a tool for general formatting of pure HTML templates.
//Prettier: formatting tool for CSS / less / SCSS / postcss / TS
//Stylus supremacy: used to format stylus files node.js modular.
//JS format tool with vscode.
Prettier does not support parentheses after function names. This conflicts with eslint.

//Editorconfig: mainly used to make vscode support. Editorconfig files.
The settings in the. Editorconfig file are used to maintain consistent coding styles and settings in the base code base,
For example, indent style, tab width, end of line characters, encoding, and so on.
Editorconfig is to keep the code standard before it is created,
Prettier is to keep the code standard after it is saved
*/
}

summary

This article on the 2020 latest version of vscode format code detailed tutorial article introduced here, more relevant vscode format code content please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!

Recommended Today

Java development for two years! You have to know how to handle these exceptions, or you can get a raise!

preface Exception is a kind of instruction flow that causes program interrupt in program. When exception occurs, program will interrupt directly and no further operation will be executed!Example: divide two numbers. If no exception is handled, the operation result can be displayed only when two numbers are correctly entered. public static void main(String[] args) { […]