Respect jsxSingleQuote

[sxxov]

Currently the plugin formats single quotes in html markup into double quotes regardless if jsxSingeQuote is set. It would be nice if the plugin would respect the setting & use single quotes in html as well.

Source:

<div class='arrow'></div>

Current behaviour:

<div class="arrow"></div>

Expected behaviour:

<div class='arrow'></div>

[dummdidumm]

jsxSingeQuote is deprecated, it's suggested to use bracketSameLine in the future. There's an already merged PR #251 which implemented supporting bracketSameLine, but it's not released yet. Up until then, you can use https://github.com/sveltejs/prettier-plugin-svelte#svelte-bracket-new-line (which will be deprecated, too, in favor of bracketSameLine)

[sxxov]

@dummdidumm I think there's been a slight confusion.

bracketSameLine is the replacement for jsxBracketSameLine. jsxSingleQuote is not deprecated nor does it perform the same function.

See https://prettier.io/docs/en/options.html#jsx-quotes

Please reevaluate the closing of this issue.

[dummdidumm]

Oh yes I'm sorry, I got confused by the jsx thing in front. This isn't implemented yet, and I'm unsure how this should interact with the singleQuote property.

[sxxov]

all good, our monkey brains were never meant to parse text anyways xd.

i was thinking using jsxSingleQuote instead of singleQuote for users to be able to keep the current behaviour if they choose to. as the name implies, this is how jsx/tsx handles it too.

[svenjacobs]

I'm having the same issue that quotes in HTML are converted to " although singleQuote and jsxSingleQuote are set to true.

[svenjacobs]

I just had a quick look at the source code. I'm absolutely unfamiliar how Prettier or this plugin work. Maybe this is the faulty line?

[dummdidumm]

Yes this is probably the line (or one of the lines). The problem is that we would need to check the contents of attributes for quotes and switch them if necessary. I suspect there are quite a few people who like to use single quotes in their script tags but double quotes for attributes because that's more common for HTML. These people would get a breaking change experience because

• if we use singleQuote for attributes, too, they suddenly are formatted differently
• it might very well make code invalid if we don't switch quotes within the attribute (attr="some { value ? 'bar' : 'foo'}" -> attr='some { value ? 'bar' : 'foo'}' <- invalid)

So if we would add support for that then I think it should be a new setting, and it also shouldn't be jsxSingleQuote because Svelte has nothing to do with JSX and that could confuse people.

[svenjacobs]

The problem is that we would need to check the contents of attributes for quotes and switch them if necessary.

You're right, I didn't think about that. However this is already a problem with the current conversion to double quotes. When I write

<div style='background-image: url("https://picsum.photos/200/300")'></div>

it will be converted by this plugin to the following broken markup

<div style="background-image: url("https://picsum.photos/200/300")"></div>

I agree that this behaviour should be configured by a new plugin-specific configuration option, not by singleQuote or jsxSingleQuote.

[svenjacobs]

I started to work on this, please see #271. However I need some help. Please have a look at my comment in the PR.