CODEWITHSUNDEEP
vue.jsvisual-studio-codevetur
Nils Riga
Nils Riga

Reputation: 110

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

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

Upvotes: 6

Views: 3890

Answers (3)

Antoine Floury
Antoine Floury

Reputation: 1191

I get the same problem with *.html files as vue-html, in my VueJS project, I use separate files for html, ts and css and I configure my Visual Studio Code to detect *.html files as vue-html 'language type' from Vetur :

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

So same as you, format doesn't work if langage is vue-html or Vue so I have to change from vue-html file language vue-html

to HTML langage to make format works but I loose the syntax highlighting. enter image description here

To solve the problem here is my solution :

  1. Install Beautify extension on VSCode
  2. Add language type under the file type to match the same '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
    ]
  },

Check Beautify docs for more infos about this params

I think it's exactly what you mean by "How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?"

I keep syntax highlighting for Vue template because my file is still considered as vue-html and I get the format style as an HTML file.

Upvotes: 0

Amirouche
Amirouche

Reputation: 3766

To tell VScode to format file-type A as file-type B

  1. open your file in vscode
  2. Ctrl+Shift+P (or View -> Command Palette from the menu)
  3. and then type Change Language Mode
  4. type the name of programming language (for exemple sql,C++ ...)

Upvotes: 5

tony19
tony19

Reputation: 138576

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.

Upvotes: 3

Related Questions