5

我遇到了这个问题： 如何在 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”功能-和“美化”-根本不支持 vue。- 和 "pretier" - 不支持 vue 的 "preserve-max-newlines"

4

2 回答 2

3

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

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

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

选项 1：使用js-beautify-html

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

<code>js-beautify-html</code>截图

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

于 2020-04-13T03:19:49.750 回答
2

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

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