[vscode][pug] formatter keep adding spaces in v-for on save

[chiboreache]

<template lang="pug">
div(v-for='i in list') {{i}}
</template>
<script setup>
</script>

    "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },

rec-2022-06-05_04.45.52.mp4

[johnsoncodehk]

Hi @chiboreache, I note that formatting trimmed last line space character when you save, but this is not volar behavior.
I think you have other extension installed that auto format with ignore editor.defaultFormatter setting.

[chiboreache]

Hi @chiboreache, I note that formatting trimmed last line space character when you save, but this is not volar behavior. I think you have other extension installed that auto format with ignore editor.defaultFormatter setting.

[chiboreache]

FOUND!

as always it was the m$ issue... even with disabled formatter, it still did its nasty things....

    "javascript.format.enable": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
    "javascript.format.semicolons": "remove",
    "javascript.updateImportsOnFileMove.enabled": "always",

so this is the line causing the issue

"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,

[chiboreache]

but, it's still your issue ;)

microsoft/vscode#151355

[sh4wn]

any progress?

[negativems]

I still have the same issue

[focussing]

save overhere... any progress?

[davide-granello]

same here in html template

<v-list>
  <v-list-item
    v-for="  optionValue   in   item.option_values  "
    :key=" optionValue.id "
    :title=" optionValue.name "
  >
    <template #append>
      <v-btn
        variant="text"
        color="dark"
        size="small"
      >
        <v-icon :color=" optionValue.blacklist?.length ? 'error' : 'grey' ">
          mdi-cancel
        </v-icon>
        <p
          v-if=" optionValue.blacklist?.length "
          class="text-caption"
        >{{ optionValue.blacklist?.length }}</p>
      </v-btn>
    </template>
  </v-list-item>
  </v-list>

It also keeps adding spaces also in other props!
Volar v1.6.4

[focussing]

Same over here...

[andriasmelianus]

This bug is still exists. I'am using version 1.8.27.
It keeps adding spaces before the HTML elements on Save.
It's sad that there is no solution for this until now.

[andriasmelianus]

However this article could be a good alternative:

https://dev.to/tao/adding-eslint-and-prettier-to-nuxt-3-2023-5bg

[jmvelazquezr]

Setting these two to false did it for me:

"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,

[flyingduck92]

i still have the issue
The culprit actually the Volar, if you disable Volar as defaultFormatter it will stop adding spaces

 "[vue]": {
    "editor.formatOnSave": true,
    "editor.tabCompletion": "onlySnippets"
    // "editor.defaultFormatter": "Vue.volar"
  },