如何告诉 VScode 将文件类型 A 格式化为文件类型 B，同时保留语法突出显示? [英] How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?

问题描述

我遇到了这个问题:(从命令面板中选择 Preferences: Open settings (JSON))，添加如下所示的 JSON 块.关键是将 max_preserve_newlines 设置为一个较高的数字，以允许您获得所需的换行数.

"vetur.format.defaultFormatterOptions": {js-beautify-html":{"max_preserve_newlines": 10000,//一个块中要保留的最大换行符数(0 禁用)"preserve_newlines": true//是否应保留元素之前的现有换行符}}

选项 2:使用忽略注释

忽略注释的优点:

• 禁用格式化程序/linter，同时记录有意的空白，这对读​​者/维护者很重要
• 可以轻松地启用/禁用每段代码

Vetur 的默认 HTML 格式化程序是 prettyhtml，它内部使用 prettier，因此您可以使用 Prettier 的 忽略评论:

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

如果您将 HTML 格式化程序切换为 js-beautify-html，请使用相应的 忽略评论:

<!-- 美化忽略:开始--><!-- 美化忽略:结束 --><div>foo</div><div>bar</div>

选项 3:禁用 Vetur 的 HTML 格式

在设置中将 Vetur 的 HTML 格式化程序设置为 none 将禁用 *.vue 文件中 HTML 部分的格式化程序.虽然这解决了折叠换行符的不需要的格式，但它具有在 Vue 模板中禁用 all 格式的明显副作用，这对于您的使用来说可能是可以接受的.

I had this problem: How to preserve empty lines when formatting .vue files in VScode?

I solved it by telling VScode (bottom right corner) that a .vue file should be formatted as a .html file.

That fixed the formatting issue, but I lost syntax highlighting for vue attributes in the html tags.

I need to get VScode to format file-type .vue as .html, while preserving syntax highlighting.

How can that be done?

Syntax highlighting for .vue comes from extensions.

I tried Vetur extension and vue-beautify extension. They highlighted the syntax but didn't format the .vue file correctly (for me at least)

In tried to add the following line in the VScode's global settings.json

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

But it didn't work for both of them.

Vetur just ignored the setting and formatted the .vue file following Prettier rules. (which you can't change in Vetur settings)

While with vue-beautify threw that there's no formatter installed for .vue files. Although I explicitly specified that I want to use the build in HTML formatter.

How can I force VScode to use the built in HTML formatter for .vue files, while still using all the rest of the features that "Vetur" or "vue-beautify" provide?

OR

How can I tell "Vetur" or "vue-beautify" extensions' "Prettier-html" module to preserve empty newlines?

UPDATE: - tried "unibeautify".. but no support for "preserve-max-newlines" feature for vue - and "beautify" - no support for vue at all. - and "pretier" - no support for "preserve-max-newlines" for vue

解决方案

Vetur currently doesn't support switching to the built-in HTML formatter, but you could request that as a new feature in Vetur's issues.

Since the root problem seems to be the collapsing of newlines, I propose different solutions that address only that problem:

• Switch Vetur's HTML formatter to js-beautify-html, and configure it to preserve newlines
• Surround the newlines with ignore-comments
• Disable Vetur's HTML formatting

Option 1: Use js-beautify-html

In VS Code preferences, set Vetur's HTML formatter to js-beautify-html:

Then in settings.json (Choose Preferences: Open settings (JSON) from command palette), add the JSON block shown below. The key is to set max_preserve_newlines to a high number that allows your desired number of 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
    }
}

Option 2: Use ignore-comments

The advantages of ignore-comments:

• Disables formatter/linter while also documenting intentional whitespace, which is important for readers/maintainers
• Can be easily enabled/disabled per section of code

Vetur's default HTML formatter is prettyhtml, which internally uses prettier, so you could utilize Prettier's ignore-comments:

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



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

If you switch the HTML formatter to js-beautify-html, use the corresponding ignore-comments:

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



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

Option 3: Disable Vetur's HTML formatting

Setting Vetur's HTML formatter to none in settings would disable the formatter for HTML sections in *.vue files. While this resolves the unwanted formatting of collapsing newlines, it has the obvious side effect of disabling all formatting in Vue templates, which might be acceptable for your usage.

这篇关于如何告诉 VScode 将文件类型 A 格式化为文件类型 B，同时保留语法突出显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！