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

5
votes

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

1
vue.jsvisual-studio-codevetur
Have you tried disabling the linter rule that removes the newlines? - tony19
That's the thing, that I don't know how to disable that. In this case Prettier's rule - which is what Vetur uses. And as far as I know, Vetur is the only VScode's help with vue files in particular, in things besides beautifying code. - Latvia Riga
How can I perhaps force Vetur to use the inbuilt HTML beautifier for the html part of the code? The inbuilt HTML parser which came with VScode is just what I'm searching for, but no way to connect it to Vetur (or some other Vue code helper for VScode) - Latvia Riga

1 Answers

3
votes

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:

screenshot of <code>js-beautify-html</code>

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.