Consistent quote style for both JS and JSX?

[lencioni]

The style guide says to prefer single quotes for JS. However, for JSX, it prefers double quotes because:

double quotes make conjunctions like "don't" easier to type

Although in practice it probably occurs less frequently, you could make the same argument for using single quotes to make quoted bits like 'Say "hello"' easier to type.

Still, all of this seems to me to matter less than the consistency that would be gained by choosing either single quotes or double quotes for both JS and JSX. What do you think?

[ljharb]

The "easier to type" thing I don't really buy because one shouldn't be using straight quotes from a typography standpoint - ie, 'don’t' and "don’t" are equally easy to type. We should improve the rationale in that section.

Personally I prefer double quotes in JSX because double quotes are also ideal for HTML (even though single quotes work, they look ugly in HTML), and I see JSX and HTML as largely similar.

JS and JSX aren't the same - I don't see any value in necessarily having consistency between them. I also think that there's value in differentiating inline JSX values from JS values.

[lencioni]

The "easier to type" thing I don't really buy because one shouldn't be using straight quotes from a typography standpoint - ie, 'don’t' and "don’t" are equally easy to type. We should improve the rationale in that section.

Agreed. The stated rationale is pretty weak.

double quotes are also ideal for HTML (even though single quotes work, they look ugly in HTML)

Is this just aesthetics or do you see other reasons why double quotes are ideal in HTML?

JS and JSX aren't the same - I don't see any value in necessarily having consistency between them.

Since JSX is a layer of syntactic sugar on top of JS, they seem pretty similar to me--at least in terms of what they do and how they operate. I think the value in having consistency between them in the areas they overlap is that when writing code, developers won't have to think about which style they should be using. This is particularly pronounced when you have JS that takes string arguments in your JSX props next to other string props.

<MyComponent
  someText="Hello"
  somethingElse={this.makeSomething('good')}
/>

It's not a huge deal, but I think that these microdecisions add up, and if it is easy to minimize them, then we should.

I also think that there's value in differentiating inline JSX values from JS values.

Perhaps, but what would this value be?

[ljharb]

Different rules apply. JS expressions can have side effects, JSX inline strings can't. (This is a weak argument in favor of the difference, but I'm just pointing it out).

I understand the majority viewpoint that "JSX is not HTML, it's sugar over JS", but that's just not how I see it :-)

[AlicanC]

I understand the majority viewpoint that "JSX is not HTML, it's sugar over JS", but that's just not how I see it :-)

When I saw JSX I was like "HTML in JS? Booyah!" until this exploded in my face:

return (
  <div class="someclass" />
);

I started using single quotes for JSX because it immediately sets my brain's "This is not HTML, this is JSX." mode on. HTML has no power here. It's all about it's JS API.

Edit: Fixed the typo mentioned in the following comments.

[ljharb]

well, if you write HTML in the XHTML style, you'd never not close a non-self-closing tag :-p

[AlicanC]

Oh no, that was just a typo. The real catch is that you use "className" and not "class".

[goatslacker]

Was also discussed here #269 (comment)

[ljharb]

Closing due to the discussion in that PR.