时间戳

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

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

问题描述

我遇到了这个问题： 如何在 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"

标签： vue.jsvisual-studio-codevetur

解决方案

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 模板中的所有格式，这对于您的使用可能是可以接受的。

推荐阅读