Eslint-plugin-react: [no-unescaped-entities] single quote

[tleunen]

I'm having the no-unescaped-entities thrown when a single quote is used.

Example

<div>I'm not ok</div>

[ljharb]

That's correct. You should either:
a) use {"I'm not ok"} to make it explicit, or
b) use ‘ (a curly quote) because straight quotes are typographically incorrect.

[tleunen]

hmm I see. But writing with curly quotes is quite painful :)
Thanks for the quick answer!

[ljharb]

@tleunen on a mac, ⌥-] or ⌥-}, on windows, alt 0145 or alt 0146 :-p

[julienw]

b) use ‘ (a curly quote) because straight quotes are typographically incorrect.

I think you wanted to mention ’ instead of ‘ :)

[duane]

Naturally, there are other uses for ' than contractions and right single quotes. It's disappointing to see a typographic defense of all things for restricting valid input.

[duane]

Notably, ASCII 39 (') is primarily apostrophe, aka '. This is how most fonts render the glyph; the only subculture that uses this as a right quote are japanese fonts that render it as a right single quotation mark. Furthermore, using single quotation marks in prose is vanishingly rare these days, whereas english contractions and possessives are as common as ever. You're hamstringing prose to support the typographer for no demonstrative benefit in the general case.

[julienw]

You can disable the rule if you don't like it.

I'm finding it useful, especially because github highlighting engine goes crazy with an alone apostrophe.

[ljharb]

@duane english contractions and possessives should only be curly quotes too. The benefit is that curly quotes can't enclose HTML attribute values, which means the presence of a curly quote is never a bug, but the presence of a straight quote might be one.

[duane]

@ljharb

@duane english contractions and possessives should only be curly quotes too.

This is incorrect; it's an apostrophe, and it is wildly different than a quotation mark.

[julienw]

There are a lot of symbols that look alike. The Wikipedia page is very clear.
You can use ’ as an apostrophe. You're right, a quotation mark ’ is not correct. Even if that looks alike in most fonts.

[ljharb]

@duane technically ' is not an apostrophe; ’ is. ' is only used for notating "minutes" in degree-minute-second notation.

[duane]

@ljharb, @julienw, check the ascii spec. ' is an apostrophe.

@ljharb, that is a right single quotation mark, not an apostrophe; you only use it for closing quotations that were started with a left single quotation mark.

[ljharb]

I understand that's how computers describe it; however, typography, not the ASCII spec, determines what a character is, and what should be used.

[taion]

See http://www.unicode.org/Public/10.0.0/ucd/NamesList.txt. The Unicode spec explicitly glosses U+2019 as the "preferred character to use for apostrophe":

2019    RIGHT SINGLE QUOTATION MARK
    = single comma quotation mark
    * this is the preferred character to use for apostrophe
    x (apostrophe - 0027)
    x (modifier letter apostrophe - 02BC)
    x (heavy single comma quotation mark ornament - 275C)

[taion]

' (U+0027), the apostrophe, is also not the right character to use for minute notation, if we want to be specific. That's actually ′ (U+2032), the prime character.

I`m not sure there are any cases where ' (U+0027) is the preferred character, though obviously it⁗s convenient and easy to use in many cases.

I think it's quite fair to discourage the use of that character via lint rules, though.

[jimrandomh]

For the benefit of other people who come across this: Put "react/no-unescaped-entities": 0 in the rules section of .eslintrc. This warning is enforcing a typography geek's pet peeve, and the problem is with the warning, not with your code.

[ljharb]

It’s absolutely a problem with your code. That you may not care about correctness doesn’t mean that incorrectness is acceptable to endorse.

[macouella]

You could also just disable quotes...

"react/no-unescaped-entities": [
    "error",
    {
      forbid: [">", "}"],
    },
  ],

Had to do it that way, because I still care about <div>>></div> :)

[gio-built]

I did forbid: [">", """, "}"]