Shulou(Shulou.com)06/02 Report--

This article is about how to solve the problem of missing vscode formatting. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

What if the vscode format is missing?

Three steps to complete the vscode code formatting

Related recommendation: vscode getting started tutorial

Install the following vscode extensions:

ESLint

Prettier-Code formatter

Vetur

As shown in the figure:

Open the settings file

Open it by:

First follow the steps to open the setting interface

Code-- > preferences-- > setting (you can also open the shortcut key command +, (mac) directly)

What you see now is the interface configuration mode. Click the red area button in the upper right corner (as shown below) to open the settings.json file.

Add the following configuration to the setting.json file

Note: this configuration supports formatting of files such as CSS, HTML, JS, and Vue. You can refer to it, and then configure it according to your own needs.

If there are no special needs, you can also use it directly.

{/ / tab size is 2 spaces "editor.tabSize": 2, / / 100 columns followed by line wrapping "editor.wordWrapColumn": 100, / / format "editor.formatOnSave" when saving: true, / / enable vscode file path navigation "breadcrumbs.enabled": true, / / prettier setting statement without the semicolon "prettier.semi": false, / / prettier setting mandatory single quotation mark "prettier.singleQuote": true / / Select the formatting tool "vetur.format.defaultFormatter.html" of template in the vue file: "prettyhtml", / / display the special character "editor.renderControlCharacters": true generated when markdown switches between Chinese and English, / / set the eslint to automatically repair "eslint.autoFixOnSave": true, / / eslint to detect the file type "eslint.validate": ["javascript", "javascriptreact", {"language": "html" when saving. "autoFix": true}, {"language": "vue"autoFix": true}], / / vetur custom settings "vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true, "semi": false}

Save the configuration, it's done now, and try to see if you can save the formatting code.

Thank you for reading! This is the end of this article on "how to solve the problem of missing vscode formatting". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.