In vscode, the col tag and sub tag of Vue files of Vue plug-in layout are not indented

Time:2021-7-29

First, put the solution directly

Add in vscode settings.json

{
    //Indent size, self configuring on demand
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // "wrap_attributes": "force-expand-multiline",
            "wrap_line_length": 120,
            "wrap_attributes": "auto",
            "end_with_newline": false,
            // "indent_head_inner_html":  true,
            //Removed col
            "void_elements": ["area", "base", "br", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"],
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
}

The main effective attributes arevoid_elementsThe effect is to identify all tags without sub tags
The label is deleted in its default statecol

It can be solved by typesetting again

Other issues

Firstly, this configuration only works in vscode. Secondly, it only works for vetur plug-in. Other software is unknown

For void_ The elements attribute should take effect on all plug-ins using the vscodeverify typesetting tool, but the configuration method varies slightly according to different plug-ins

Void in configuration_ Attributes other than elements have other functions, not necessarily with void_ Elements, please configure as needed

Why is col not indented? Because there is a col tag in HTML, which is a single tag without child elements

How to open settings.json

Press F1 to enter settings.json

In vscode, the col tag and sub tag of Vue files of Vue plug-in layout are not indented

Distinguish between workspace configuration and global configuration. The effective range is different, and you can configure it anywhere

Document link

https://github.com/HookyQR/VS…

other

In addition, with this configuration, you can indent the Vue file according to four spaces, which is two by default
If you don’t like the 4-cell indent modificationvetur.format.options.tabSizethat will do