Quote and unquote number keys

[lydell]

Closes #6064
Closes #6132

Note: Flow parses number keys, but errors on them during type checking, so we don’t unquote number keys for the flow and babel-flow parsers.

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBjOA7AzgFzAA8wBeMAb1TDAAYAuMARlQF8g

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[thorn0]

They also must not be quoted or unquoted in obect types:
Prettier pr-8508
Playground link

--parser typescript

Input:

var foo: { "2": boolean }

Output:

var foo: { 2: boolean };

[thorn0]

Hm. I might be wrong about object types...

[lydell]

Yeah, as far as I can tell TypeScript doesn’t care about quotes in object types

https://www.typescriptlang.org/play/#code/C4TwDgpgBAglC8UDeUBEAmVAuKAjA9vgDYQCGAdlAL4BQNokUAQgslOjgcWZbTQMb5yAZ2BRSOOIhQcowAE4BXaLUEixuHC2lpMOAGakiwlUA

[thorn0]

Not always, but sometimes it does:

https://www.typescriptlang.org/play/#code/DYUwLgBAhhC8EG8IEYBcKA0EBM7sQF8AoUSAIzkQgHJlr1ktrt6dCiiATEAY2CgBOICKWhR0AaxABPAPYAzCGGkAHEAugBuLr35CR4CGTKSZG5Wo1ltRKDHjHtQA

So it's not safe to do in TS at all. Even in object literals.

[thorn0]

BigInts can be used as keys too: { 2n: 1 } gives the same result as { '2': 1 }.

[lydell]

I wonder if the default "babel" parser is starting to become dangerous … it supports some type syntax, but is not entirely safe to run on Flow and TypeScript code 🤔

[thorn0]

There is an issue about this #8204

[lydell]

Quoting and unquoting can be a little bit “destructive” (but still correct).

x = {
  0b10: null,
};

edit ->

x = {
  0b10: null,
  "something-else": null,
};

prettier ->

x = {
  "2": null,
  "something-else": null,
};

edit ->

x = {
  "2": null,
};

prettier ->

x = {
  2: null,
};

It’s like Prettier has turned 0b10 into 2!

Maybe we should only quote/unquote ^\d+$ 🤔
Or the above case is rare and fine…

[thorn0]

Quoting happens only if the user opts in for it using --quote-props consistent, so I think it's fine. As for unquoting, I think these cases are confusing and probably shouldn't be unescaped:
Prettier pr-8508
Playground link

--parser babel

Input:

a={'1e+100':1,'2e-10':2}

Output:

a = { 1e100: 1, 2e-10: 2 };

[lydell]

But I think it’s important that Prettier is “round-trippable”. An addition followed by a deletion should end up with the input code.

a = { 1e100: 1, 2e-10: 2 };

edit ->

a = { 1e100: 1, 2e-10: 2, "a-a": 3 };

prettier ->

a = { "1e+100": 1, "2e-10": 2, "a-a": 3 };

edit ->

a = { "1e+100": 1, "2e-10": 2 };

prettier – here we need to unqoute to get back again! ->

a = { 1e100: 1, 2e-10: 2 };

But that has the unfortunate side effect of "1e+100" being unquoted for as-needed users as well.

That’s why I was thinking we should only do stuff with “digits-only” (maybe also floats?) keys – I’m thinking that’s the only likely case we’ll encounter in real code.

[lydell]

Given everything we’ve learned in this PR, it could also make sense to leave things the way the are and close the issue, leaving it up to the user to decide, or to use the ESLint quote-props rule.

[thorn0]

All considered, I vote for "digits only, including floats". Let's play it safe and keep non-decimals, number separators, bigints, etc. as is.

[lydell]

Updated to only touch “simple” numbers.

[fisker]

Note: Flow parses number keys, but errors on them during type checking, so we don’t unquote number keys for the flow and babel-flow parsers.

But, parser=babel supports flow.

prettier/src/language-js/parser-babel.js

Line 105 in 4009ecf

const parse = createParse("parse", ["jsx", "flow"]);

Related: #8204 (comment)

[thorn0]

That's fine. The babel parser isn't safe for Flow anyway: https://prettier.io/blog/2019/01/20/1.16.0.html#flow
I agree that it's a mess. BTW, probably this means that if we proceed with #8204 (parse Flow syntax only if the pragma is present), it won't really be a breaking change as we'd break something that is already broken.

[brodybits]

we don’t unquote number keys for the flow and babel-flow parsers

Quote & unquote with TypeScript seems to be considered "not safe" as well, as was noted in some comments added to the source code.