如何告诉 VScode 将文件类型 A 格式化为文件类型 B，同时保留语法突出显示？

Question

我遇到了这个问题： 在 VScode 中格式化 .vue 文件时如何保留空行？

我通过告诉 VScode（右下角）一个 .vue 文件应该被格式化为一个 .html 文件来解决它。

这解决了格式问题，但我丢失了 html 标签中 vue 属性的语法突出显示。

我需要让 VScode 将文件类型 .vue 格式化为 .html，同时保留语法突出显示。

那怎么办呢？

.vue 的语法高亮来自扩展。

我尝试了 Vetur 扩展和 vue-beautify 扩展。他们突出显示了语法，但没有正确格式化 .vue 文件（至少对我而言）

在尝试在 VScode 的全局 settings.json 中添加以下行

{
    "[vue]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    }
}

但这对他们两个都不起作用。

Vetur 只是忽略了设置并按照 Prettier 规则格式化了 .vue 文件。（您不能在 Vetur 设置中更改）

虽然 vue-beautify 表示没有为 .vue 文件安装格式化程序。尽管我明确指定我想使用 HTML 格式化程序中的构建。

如何强制 VScode 对 .vue 文件使用内置的 HTML 格式化程序，同时仍然使用“Vetur”或“vue-beautify”提供的所有其他功能？

或者

如何告诉“Vetur”或“vue-beautify”扩展的“Prettier-html”模块保留空换行符？

更新： - 尝试过“unibeautify”..但不支持 vue 的“preserve-max-newlines”功能 - 和“beautify” - 根本不支持 vue。- 和 "pretier" - 不支持 vue 的 "preserve-max-newlines"

Answer 1

Vetur 目前不支持切换到内置 HTML 格式化程序，但您可以在Vetur 的 issues中请求将其作为新功能。

由于根本问题似乎是换行符的崩溃，因此我提出了仅解决该问题的不同解决方案：

• 将 Vetur 的 HTML 格式化程序切换为js-beautify-html，并将其配置为保留换行符
• 用忽略注释包围换行符
• 禁用 Vetur 的 HTML 格式

选项 1：使用js-beautify-html

在 VS Code 首选项中，将 Vetur 的 HTML 格式化程序设置为js-beautify-html：

然后在settings.json（从命令面板中选择Preferences: Open settings (JSON)）中，添加如下所示的 JSON 块。关键是设置max_preserve_newlines一个较高的数字，以允许您所需的换行数。

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "max_preserve_newlines": 10000, // Maximum number of line breaks to be preserved in one chunk (0 disables)
        "preserve_newlines": true // Whether existing line breaks before elements should be preserved
    }
}

选项 2：使用忽略注释

忽略注释的优点：

• 禁用格式化程序/linter，同时还记录有意的空白，这对于读者/维护人员很重要
• 可以轻松地启用/禁用每段代码

Vetur 的默认 HTML 格式化程序是prettyhtml，它在内部使用prettier，因此您可以利用 Prettier 的ignore-comments：

<div>
<!-- prettier-ignore-start -->



<!-- prettier-ignore-end -->
    <div>foo</div>
    <div>bar</div>
</div>

如果将 HTML 格式化程序切换为js-beautify-html，请使用相应的ignore-comments：

<div>
<!-- beautify ignore:start -->



<!-- beautify ignore:end -->
    <div>foo</div>
    <div>bar</div>
</div>

选项 3：禁用 Vetur 的 HTML 格式

将 Vetur 的 HTML 格式化程序设置为nonein 设置将禁用文件中 HTML 部分的格式化程序*.vue。虽然这解决了折叠换行符的不需要的格式，但它具有禁用 Vue 模板中的所有格式的明显副作用，这对于您的使用来说可能是可以接受的。