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

Question

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

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

这解决了格式化问题，但我丢失了html标记中vue属性的语法高亮显示。

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

如何做到这一点？

语法高亮显示。vue来自扩展。

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

In尝试在VScode的全局设置.json中添加以下行

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

但这对他们俩都没有用。

Vetur只是忽略了该设置并按照漂亮的规则格式化了. vue文件。（您无法在Vetur设置中更改）

使用vue美化时，发现没有为.vue文件安装格式化程序。尽管我明确指定要使用内置HTML格式器。

如何强制VScode使用内置的HTML格式器来处理.vue文件，同时仍然使用“Vetur”或“vue美化”提供的所有其他功能？

或

如何告诉“Vetur”或“vue-美化”扩展的“更漂亮的html”模块保留空的换行符？

更新:-尝试了“uni美化”..但是不支持vue的“preserve-max-newlines”特性，也不支持“美化”特性，完全不支持vue。-和“pretier”-不支持vue的“preserve-max-newlines”

Answer 1

我遇到与 vue-html 相同的 *.html 文件问题，在我的 VueJS 项目中，我为 html、ts 和 css 使用单独的文件，我将我的 Visual Studio 代码配置为检测 *.html 文件作为 Vetur 的 vue-html“语言类型”：

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

解决问题这里是我的解决方案：

1. 在VSCode上安装Beautify扩展
2. 在文件类型下添加语言类型以匹配相同的“格式化程序样式”：

// 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
    ]
  },

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

我保持Vue模板的语法高亮显示，因为我的文件仍然被认为是Vue html，我得到的格式样式是html文件。

Answer 2

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

1. 在 VSCODE 中打开文件
2. 按住 Ctrl 移位 P（或查看 -

Answer 3

Vetur目前不支持切换到内置HTML格式器，但您可以在Vetur的问题中要求将其作为新功能。

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

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

在VS代码首选项中，将Vetur的HTML格式设置为＜Code＞js美化HTML＜/Code＞：

然后在< code>settings.json(从命令调板中选择< code >首选项:打开设置(json))中，添加如下所示的JSON块。关键是将< code > 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
    }
}

忽略注释的优点：

• 禁用格式化程序/linter，同时记录有意的空格，这对读者/维护人员非常重要
• 可以根据代码段轻松启用/禁用

Vetur的默认HTML格式化程序是prettyhtml，它在内部使用prettier，所以你可以使用Prettier的忽略注释：

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



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

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

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



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

在设置中将Vetur的HTML格式化程序设置为< code>none会禁用< code>*中HTML部分的格式化程序。vue文件。虽然这解决了折叠换行符的不必要的格式问题，但是它有一个明显的副作用，就是禁用Vue模板中的所有格式，这对于您的使用来说可能是可以接受的。