vue.js - How to preserve empty lines when formatting .vue files in VScode?

Question

I am starting to hate .vue as a framework because all the VScode formatters I tried are deleting empty lines.

Everything is cool and fine with everything, except that empty lines are removed.

All my hard work of dividing code blocks with empty lines is just deleted every time I autoformat with Shift+Alt+F.

I have spend way too many days on this issue combining every time I come across it. But this time for .vue files I have no luck in finding a fix.

When I write:

    <div class="ui attached segment">





      <div class="ui grid">

        <div class="row">

          <div class="column eight wide computer sixteen wide tablet">

            <div>
              <div class="badge-wrapper">


                <discount-tag v-bind:item="item">
                </discount-tag>

                <div v-for="badge in item.badges" class="ui labels">

                  <a
                    class="ui label"
                    :style="{ backgroundColor: '#'+badge.color, color: '#fff'}"
                  >{{badge.label}}
                  </a>


                </div>
              </div>




            </div>

            <g-zoom :item="item"></g-zoom>

          </div>





          <div class="column eight wide computer sixteen wide tablet">

            <h1>{{ item.goods_name }}</h1>

            <p>{{ item.description }}</p>

I expect the line-breaks and new-lines to be preserved, but instead it's mushed into this machine code:

    <div class="ui attached segment">
      <div class="ui grid">
        <div class="row">
          <div class="column eight wide computer sixteen wide tablet">
            <div>
              <div class="badge-wrapper">
                <discount-tag v-bind:item="item"></discount-tag>
                <div v-for="badge in item.badges" class="ui labels">
                  <a
                    class="ui label"
                    :style="{ backgroundColor: '#'+badge.color, color: '#fff'}"
                  >{{badge.label}}</a>
                </div>
              </div>
            </div>
            <g-zoom :item="item"></g-zoom>
          </div>
          <div class="column eight wide computer sixteen wide tablet">
            <h1>{{ item.goods_name }}</h1>
            <p>{{ item.description }}</p>

For .jsx, .js, .html, .php, .env, etc. files it's all good. Except for .vue

Basically what I'm looking is for this line of setting to work: "vetur.format.defaultFormatter.html": "vscode.html-language-features"

in VScode user settings

{
    "window.zoomLevel": -3,
    "terminal.integrated.shell.windows": "C:\Program Files\Git\bin\bash.exe",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "vscode.html-language-features",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
}

Vetur extensions is basically the things, which knows where html ends and js/css begins. And you can choose your formatter there. But you can't choose the VScodes built in formatter. It just ignores that setting.

Could somebody Please, please help in fixing or circumventing this issue, so that I would have autoformatting AND preserve empty newlines and linebreaks?

Answer 1

I got formatting to work perfectly for the HTML, JS and CSS part just by simply telling VScode (in the bottom right corner), that a .vue file should be formatted as a HTML, but now I lost the Vue syntax highlighting.

No idea how to get that back.

That's a question of its own. How to tell VScode to format file-type A as file-type B, while preserving syntax highlighting?