关于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 即可