Redesign `quotes` options

What rule do you want to change?

quotes

Current limitations:

• "allowTemplateLiterals": true allows all template literals, i.e. the rule ignores them. This could be a bug, the option is designed in #5234 just to allow backticks as the alternative to avoid escaping.
• "single", "avoidEscape": true, "allowTemplateLiterals": true does not enforce consistent style for the alternative, both double quotes and backticks are allowed to avoid escaping.
• "single", "avoidEscape": true, "allowTemplateLiterals": false is an ambiguous combination. When allowTemplateLiterals: false is explicitly set, a user could expect the rule to work like in #12129, when omitted (default is false) user could expect #10627, while the rule actually does neither of those, it fixes to single quotes with an escaped quote.
• "backtick" there is no option to enforce consistent style for necessary string literals (directive, import source, object key).
• "backtick", "avoidEscape": true assumes that the double quotes are the preferred alternative.
• There is no option to use ‘third’ quotes to avoid escaping, e.g. backticks when a string has both single and double quotes.

Does this change cause the rule to produce more or fewer warnings?

More and fewer.

How will the change be implemented? (New option, new default behavior, etc.)?

Allow an array with up to 3 elements in the place of the string option.

E.g. ["single", "double"] or ["single", "double", "backtick"] instead of just "single"

When it’s an array, and "avoidEscape": true, reported node is fixed to first quotes from the list where it would be without escapes (or the very first if it’s impossible). allowTemplateLiterals setting is ignored.

Please provide some example code that this change will affect:

/*eslint quotes: ['error', ['single', 'backtick'], { 'avoidEscape': true }]*/

// good
foo = `has a single ' quote`;

// bad
foo = `no quotes`; // fixed to 'no quotes' 
foo = "has a single ' quote"; // fixed to `has a single ' quote`

/*eslint quotes: ['error', ['single', 'double'], { 'avoidEscape': true }]*/

// good
foo = "has a single ' quote";
foo = 'has a single \' quote'; // there could be also an option to disallow this, and fix to double

// bad
foo = "no quotes"; // fixed to 'no quotes'
foo = `has a single ' quote`; // fixed to "has a single ' quote"

/*eslint quotes: ['error', ['backtick', 'single']]*/

// good
'use strict';

// bad
"use strict"; // fixed to 'use strict'

/*eslint quotes: ['error', ['backtick', 'single'], { 'avoidEscape': true }]*/

// good
foo = 'has a ` backtick';

// bad
foo = "has a ` backtick"; // fixed to 'has a ` backtick'

/*eslint quotes: ['error', ['single', 'double', 'backtick'], { 'avoidEscape': true }]*/

// good
foo = `has a ' single and a " double quote`;

What does the rule currently do for this code?

Has the above limitations.

What will the rule do after it’s changed?

Will not have those limitations, I guess.

Are you willing to submit a pull request to implement this change?

Yes.

[kaicataldo]

I wonder if it would make configuration clearer to make this new array option a named option.

/* eslint quotes: ['error', { precedence: ['single', 'double', 'backtick'], avoidEscape: true } ]*/

This would also allow one to use the object configuration options without having to copy the default value for the array option. If we did this, we could have the default value be ['single', 'double', 'backtick'] and deprecate the allowTemplateLiterals option (since the new array option would cover this case). If avoidEscape is false (default), it would only use the first element in the array. If avoidEscape is true, it would read the whole array and use the precedence order listed.

[reduckted]

I’m not sure about this example:

/*eslint quotes: ['error',  { precedence: ['single', 'double'], 'avoidEscape': true }]*/

// good
foo = 'has a single \' quote'; // there could be also an option to disallow this, and fix to double

I think that since avoidEscape is true, this should be considered a “bad” case.

---

Based on those examples, it looks like the avoidEscape option is only used when when there is more than one value in precedence. Perhaps that could be inferred. Consider this example:

/*eslint quotes: ['error', { precedence: ['backtick', 'single'] }]*/

// good
`use strict`;

// bad
'use strict'; // fixed to `use strict`
"use strict"; // fixed to `use strict`
foo = 'has a ` backtick'; // fixed to  `has a \` backtick`

Having 'single' as a value in precedence seems to be pointless because 'use strict' is considered an error.

Maybe precedence can be used like this:

┌─────────────────────┐      ┌───────────────┐
│ Can the first quote ├─────►│ Use the first │◄──┐
│ type be used        │ Yes  │ quote type.   │   │
│ without escaping?   │      └───────────────┘   │
└─────────┬───────────┘                          │
          │No                                    │
          ▼                                      │
┌───────────────────┐                            │
│ Is there a second ├────────────────────────────┤
│ quote type?       │ No                         │
└─────────┬─────────┘                            │
          │Yes                                   │
          ▼                                      │
┌─────────────────────┐      ┌────────────────┐  │
│ Can the second quote├─────►│ Use the second │  │
│ type be used        │ Yes  │ quote type.    │  │
│ without escaping?   │      └────────────────┘  │
└─────────┬───────────┘                          │
          │No                                    │
          ▼                                      │
┌───────────────────┐                            │
│ Is there a third  ├────────────────────────────┤
│ quote type?       │ No                         │
└─────────┬─────────┘                            │
          │Yes                                   │
          ▼                                      │
┌─────────────────────┐      ┌────────────────┐  │
│ Can the third quote ├─────►│ Use the third  │  │
│ type be used        │ Yes  │ quote type.    │  │
│ without escaping?   │      └────────────────┘  │
└─────────┬───────────┘                          │
          │No                                    │
          └──────────────────────────────────────┘

Basically, whichever quote type from precedence can be used without escaping is what is used. If none of them can avoid escaping, then the first one is used.