A brief discussion on the method of formatting vscode code

Related recommendations: "vscode tutorial"

The shortcut keys for formatting code in vs code are as follows: (from here)

• On Windows Shift Alt F
• On Mac Shift Option F
• On Ubuntu Ctrl Shift I

But the built-in formatting does not It cannot meet my needs. At this time, I have to say that the plug-in method is good.

1. The code is formatted in eslint style (reference from here)

Requires plug-in: eslint

in settings Add to:

"eslint.autoFixOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
],

eslint.autoFixOnSave is used to automatically format when saving, but only supports javascript .js files by default.

eslint.validate Used to configure the file type used.

Then when you save the code, it will be automatically formatted into eslint style (it needs to be saved multiple times).

2. HTML formatting code indentation

Requires plug-in: Vetur

Vetur is a very powerful plug-in , provides powerful support for writing Vue code with vs code, and also supports most mainstream front-end development scripts. For details, you can see here ->Vetur Document

After installing this plug-in, you can see the following content in the settings:

##In order to make HTML code can be formatted and indented by adding the following:

"vetur.format.defaultFormatter.html": "prettier"

and then using the shortcut keys for formatting code.

For more programming-related knowledge, please visit:

Programming Courses! !

The above is the detailed content of A brief discussion on the method of formatting vscode code. For more information, please follow other related articles on the PHP Chinese website!