vscode: bizarre spaces during formatting

[frederikhors]

Is there a way to not add spaces in the below html during formatting?

I need this code to stay like this:

<div>
  Test (<span class="color">one</span>)
</div>

It becomes this instead:

<div>
  Test (
  <span class="color">one</span>
  )
</div>

---

From jamesbirtles/svelte-vscode#50.

[dummdidumm]

The Plugin uses Prettier to format the code. So in the end this is prettier formatting the code that way. Since Prettier is very opinionated and does not have much options, I guess there is not much you can do about this.
If you want to turn of formatting altogether, you can do so by setting the option svelte.format.enable to false in your VSCode settings.

[frederikhors]

Nope, I need it. But I think we should re-think this formatting issues. Please, don't close. RFC this. Please.

[dummdidumm]

I think this comes down to user preferences - I for example would want the code to be formatted that way. Since prettier is very opinionated, there are few options to tweak the outcome. Since it also does not break your code, it is more an inconvenience. Would it help you if you could turn off html formatting (related feature request)? Then script/style would be formatted but not html.

Replacing prettier with an entirely different formatter is something we don't want to do at the moment. What we could do is add the vscode html formatter as a second option, so you would choose between one of the two. But even if we would add another formatter, then there is always the question whether or not that formatter then does what you want.

[jasonlyu123]

<!-- prettier-ignore --> is implemented in prettier-plugin-svelte 1.1.0 and @dummdidumm just bump the version of prettier-plugin-svelte of this repo to it. You could use it in lastest svelte beta.

[ryanatkn]

Here's the relevant issue for prettier-plugin-svelte - sveltejs/prettier-plugin-svelte#24 (it's labelled as a bug)

[dimfeld]

Yeah, the problem is that adding newlines here alters the rendered output by inserting spaces into the output. The first snippet at the top renders in the browser as Test (one) but after adding the newlines it becomes Test ( one )

Standard Prettier HTML formatting does have an HTML whitespace setting to determine how it treats whitespace in HTML, but the Svelte Prettier plugin does not appear to honor that. From my limited exploration, it reimplements a lot of HTML formatting functionality in order to also support Svelte template syntax.

IMO updating so we get a <!-- prettier-ignore --> option is a nice workaround for now.
EDIT: Actually it looks like this already works.

[jasonlyu123]

if anyone wanted to help to solve this. you can pick what's left with this PR
sveltejs/prettier-plugin-svelte#41

[dummdidumm]

Since this is a prettier-plugin-svelte issue, I'm going to close this. As a workaround, use <!-- prettier-ignore -->.