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

Question

我遇到了这个问题： How to preserve empty lines when formatting .vue files in VScode?

我通过告诉 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”功能 - 和“美化” - 根本不支持 vue。 - 和 "pretier" - 不支持 vue 的 "preserve-max-newlines"

Answer 1

告诉 VScode 将文件类型 A 格式化为文件类型 B

1. 在 vscode 中打开你的文件
2. Ctrl+Shift+P（或从菜单中查看 -> 命令面板）
3. 然后输入Change Language Mode
4. 键入编程语言的名称（例如 sql、C++ ...）

Answer 2

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

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

• 将 Vetur 的 HTML 格式化程序切换为 js-beautify-html，并将其配置为保留换行符
• 用 ignore-cmets 包围换行符
• 禁用 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：使用忽略 cmets

ignore-cmets的优点：

• 禁用格式化程序/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 格式化程序设置为 none 会禁用 *.vue 文件中 HTML 部分的格式化程序。虽然这解决了折叠换行符的不需要的格式，但它具有在 Vue 模板中禁用 all 格式的明显副作用，这对于您的使用可能是可以接受的。