@stylistic/js/

quotes

JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backticks (as of ECMAScript 6). For example:

/*eslint-env es6*/

var double = "double";
var single = 'single';
var backtick = `backtick`;    // ES6 only

Each of these lines creates a string and, in some cases, can be used interchangeably. The choice of how to define strings in a codebase is a stylistic one outside of template literals (which allow embedded expressions to be interpreted).

Many codebases require strings to be defined in a consistent manner.

Rule Details

This rule enforces the consistent use of either backticks, double, or single quotes.

This rule is aware of directive prologues such as "use strict" and will not flag or autofix them if doing so will change how the directive prologue is interpreted.

Options

This rule has two options, a string option and an object option.

String option:

• "double" (default) requires the use of double quotes wherever possible
• "single" requires the use of single quotes wherever possible
• "backtick" requires the use of backticks wherever possible

Object option:

• "avoidEscape": true allows strings to use single-quotes, double-quotes, or template literals so long as the string contains a quote that would have to be escaped otherwise
• "allowTemplateLiterals": true allows strings to use backticks
• "ignoreStringLiterals": true don’t report string literals, only template strings

Deprecated: The object property avoid-escape is deprecated; please use the object property avoidEscape instead.

double

Examples of incorrect code for this rule with the default "double" option:

/*eslint @stylistic/js/quotes: ["error", "double"]*/

var single = 
'single'
;
var unescaped = 
'a string containing "double" quotes'
;
var backtick = 
`back\ntick`
; // you can use \n in single or double quoted strings

incorrect

Examples of correct code for this rule with the default "double" option:

/*eslint @stylistic/js/quotes: ["error", "double"]*/
/*eslint-env es6*/

var double = "double";
var backtick = `back
tick`;  // backticks are allowed due to newline
var backtick = tag`backtick`; // backticks are allowed due to tag

correct

single

Examples of incorrect code for this rule with the "single" option:

/*eslint @stylistic/js/quotes: ["error", "single"]*/

var double = 
"double"
;
var unescaped = 
"a string containing 'single' quotes"
;

incorrect

Examples of correct code for this rule with the "single" option:

/*eslint @stylistic/js/quotes: ["error", "single"]*/
/*eslint-env es6*/

var single = 'single';
var backtick = `back${x}tick`; // backticks are allowed due to substitution

correct

backticks

Examples of incorrect code for this rule with the "backtick" option:

/*eslint @stylistic/js/quotes: ["error", "backtick"]*/

var single = 
'single'
;
var double = 
"double"
;
var unescaped = 
'a string containing `backticks`'
;

incorrect

Examples of correct code for this rule with the "backtick" option:

/*eslint @stylistic/js/quotes: ["error", "backtick"]*/
/*eslint-env es6*/

"use strict"; // directives must use single or double quotes
var backtick = `backtick`;
var obj = { 'prop-name': `value` }; // backticks not allowed for property names

correct

avoidEscape

Examples of additional correct code for this rule with the "double", { "avoidEscape": true } options:

/*eslint @stylistic/js/quotes: ["error", "double", { "avoidEscape": true }]*/

var single = 'a string containing "double" quotes';

correct

Examples of additional correct code for this rule with the "single", { "avoidEscape": true } options:

/*eslint @stylistic/js/quotes: ["error", "single", { "avoidEscape": true }]*/

var double = "a string containing 'single' quotes";

correct

Examples of additional correct code for this rule with the "backtick", { "avoidEscape": true } options:

/*eslint @stylistic/js/quotes: ["error", "backtick", { "avoidEscape": true }]*/

var double = "a string containing `backtick` quotes"

correct

allowTemplateLiterals

Examples of additional correct code for this rule with the "double", { "allowTemplateLiterals": true } options:

/*eslint @stylistic/js/quotes: ["error", "double", { "allowTemplateLiterals": true }]*/

var double = "double";
var double = `double`;

correct

Examples of additional correct code for this rule with the "single", { "allowTemplateLiterals": true } options:

/*eslint @stylistic/js/quotes: ["error", "single", { "allowTemplateLiterals": true }]*/

var single = 'single';
var single = `single`;

correct

{ "allowTemplateLiterals": false } will not disallow the usage of all template literals. If you want to forbid any instance of template literals, use no-restricted-syntax and target the TemplateLiteral selector.

When Not To Use It

If you do not need consistency in your string styles, you can safely disable this rule.