'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

vue.jsvisual-studio-codevetur


Solution 1:[1]

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++ ...)

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amirouche Zeggagh
Solution 2 Antoine Floury

Related Questions