如何告诉 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" 或 [=44= 的所有其他功能] 提供？

或

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

更新： - 尝试 "unibeautify".. 但不支持 vue 的 "preserve-max-newlines" 功能 - 和 "beautify" - 完全不支持 vue。 - 和 "pretier" - vue

不支持 "preserve-max-newlines"

Answer 1

Vetur 目前不支持切换到内置 HTML 格式化程序，但您可以在 Vetur's 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：使用忽略评论

忽略评论的优点：

禁用 formatter/linter 同时记录有意留白，这对 readers/maintainers
可以很容易地 enabled/disabled 每段代码

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 格式，这对于您的使用来说可能是可以接受的。

Answer 2

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

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

Answer 3

我在 *.html 文件中遇到与 vue-html 相同的问题，在我的 VueJS 项目中，我为 html、ts 和 [=16= 使用单独的文件] 并且我将我的 Visual Studio 代码配置为从 Vetur 检测 *.html 文件为 vue-html 'language type' :

// VSCode user settings.json
"files.associations": {
  "*.html": "vue-html"
},

和你一样，如果语言是 vue-html 或 Vue，格式将不起作用，所以我必须从 vue-html 更改

到 HTML 语言以使格式有效，但我放弃了语法突出显示。

解决问题这里是我的解决办法:

在 VSCode

Beautify extension

在文件类型下添加语言类型以匹配相同'formatter style' :

// VSCode user settings.json
"beautify.language": {
    "css": [
      "css",
      "scss" // Format scss laguage type as beautify do for css files
    ],
    "html": [
      "htm",
      "html",
      // this line below fix my issue
      "vue-html", // Format my .html files configured as vue-html files as beautify do for HTML language
      "vue" // Exemple to Format Vue langage as HTML files
    ]
  },

检查 Beautify 文档以获取有关此参数的更多信息

我认为这正是您所说的“如何告诉 VScode 将 file-type A 格式化为 file-type B，同时保留语法高亮显示？”的意思。 =47=]

我为 Vue 模板保留了语法高亮，因为我的文件仍然被视为 vue-html，并且我得到的格式样式是 HTML 文件。

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

How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?

vue.js

visual-studio-code

vetur

选项 1：使用 `js-beautify-html`

选项 2：使用忽略评论

选项 3：禁用 Vetur 的 HTML 格式

我认为这正是您所说的“如何告诉 VScode 将 file-type A 格式化为 file-type B，同时保留语法高亮显示？”的意思。 =47=]

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

How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?

vue.js

visual-studio-code

vetur

选项 1：使用 js-beautify-html

选项 2：使用忽略评论

选项 3：禁用 Vetur 的 HTML 格式

我认为这正是您所说的“如何告诉 VScode 将 file-type A 格式化为 file-type B，同时保留语法高亮显示？”的意思。 =47=]

选项 1：使用 `js-beautify-html`