Language-tools: vscode: bizarre spaces during formatting

Created on 7 May 2020 · 8Comments · Source: sveltejs/language-tools

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 https://github.com/UnwrittenFun/svelte-vscode/issues/50.

question

Source

frederikhors

Most helpful comment

Here's the relevant issue for prettier-plugin-svelte - https://github.com/sveltejs/prettier-plugin-svelte/issues/24 (it's labelled as a bug)

ryanatkn on 7 May 2020

👍3

All 8 comments

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.

dummdidumm on 7 May 2020

👎1

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

frederikhors on 7 May 2020

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.

dummdidumm on 7 May 2020

👎1

 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.

jasonlyu123 on 7 May 2020

👍1

Here's the relevant issue for prettier-plugin-svelte - https://github.com/sveltejs/prettier-plugin-svelte/issues/24 (it's labelled as a bug)

ryanatkn on 7 May 2020

👍3

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  option is a nice workaround for now.
EDIT: Actually it looks like this already works.