关于vscode插件:VSCode中-Vetur插件排版Vue文件-Col-标签子标签不被缩进的问题

首先间接放解决办法

在 vsCode settings.json 中增加

{
    // 缩进大小, 自行按需配置
    "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,
            // 去掉了 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
        }
    },
}

次要失效属性为 void_elements 成果是标识了所有无子标签的标签
在其默认值的状态下删除了标签 col

再次排版即可解决

其余问题

首先此配置只失效在 vscode 中, 其次只对 vetur 插件失效, 其他软件未知

对于 void_elements 属性应该能够失效在所有应用 VSCodeBeautify 排版工具的插件上, 然而配置形式依据插件不同会有些许不同

配置中除 void_elements 外的属性有其余作用并不一定和 void_elements 配合应用请按需配置

为什么 col 会不缩进, 因为 html 中自身有个 col 标签, 是个单标签无子元素

如何关上 settings.json

按 F1 输出 settings.json

辨别工作区配置和全局配置, 失效范畴不同, 在哪配置均可

文档链接

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

其余

另外这么配置能够把 vue 文件依照四个空格缩进, 默认为两个
如果不喜爱 4 格缩进批改 vetur.format.options.tabSize 即可