Skip to main content

​
quotes

JavaScript allows strings to be defined with double quotes, single quotes, or backticks. This rule enforces consistency.
Rule Type: Layout
Fixable: Yes (automatically fixable)
Deprecated: Consider using Prettier

​
Rule Details

This rule enforces consistent use of quotes throughout your codebase. 
var double = "double";
var single = 'single';
var backtick = `backtick`;  // ES6

​
Options

​
String Option

  • "double" (default) - Require double quotes
  • "single" - Require single quotes
  • "backtick" - Require backticks

​
Object Options

  • "avoidEscape": true - Allow other quotes to avoid escaping
  • "allowTemplateLiterals": true - Allow template literals

​
Examples

​
"double"

Incorrect: 
var single = 'single';
var unescaped = 'a string containing "double" quotes';
var backtick = `back\ntick`;
Correct: 
var double = "double";
var backtick = `back
tick`;  // Newline requires backtick
var backtick = tag`backtick`;  // Tagged template

​
"single"

Incorrect: 
var double = "double";
var unescaped = "a string containing 'single' quotes";
Correct: 
var single = 'single';
var backtick = `back${x}tick`;  // Substitution requires backtick

​
"backtick"

Incorrect: 
var single = 'single';
var double = "double";
var unescaped = 'a string containing `backticks`';
Correct: 
"use strict";  // Directives must use quotes
var backtick = `backtick`;
var obj = { 'prop-name': `value` };  // Property names can't use backticks

​
avoidEscape Option

Allow other quote styles to avoid escaping: 
// With "double", { "avoidEscape": true }
var single = 'a string containing "double" quotes';  // OK

// With "single", { "avoidEscape": true }
var double = "a string containing 'single' quotes";  // OK

// With "backtick", { "avoidEscape": true }
var double = "a string containing `backtick` quotes";  // OK

​
allowTemplateLiterals Option

Allow template literals alongside your preferred quote style: 
// With "double", { "allowTemplateLiterals": true }
var double = "double";
var double = `double`;  // Also OK

// With "single", { "allowTemplateLiterals": true }
var single = 'single';
var single = `single`;  // Also OK
This doesn’t disallow ALL template literals - only simple ones. Template literals with expressions or newlines are always allowed.

​
Configuration Examples

// Double quotes (default)
{
  "rules": {
    "quotes": ["error", "double"]
  }
}

// Single quotes
{
  "rules": {
    "quotes": ["error", "single"]
  }
}

// Backticks
{
  "rules": {
    "quotes": ["error", "backtick"]
  }
}

// With avoidEscape
{
  "rules": {
    "quotes": ["error", "single", { 
      "avoidEscape": true 
    }]
  }
}

// Allow template literals
{
  "rules": {
    "quotes": ["error", "single", { 
      "allowTemplateLiterals": true 
    }]
  }
}

​
Common Patterns

​
Avoiding Escaping

// Without avoidEscape - must escape
var msg = 'It\'s great';
var msg = "Say \"hello\".";

// With avoidEscape - can use other quotes
var msg = "It's great";
var msg = 'Say "hello".';

​
JSX

For JSX attributes, ESLint uses the jsx-quotes rule: 
// quotes rule applies to JS strings
const message = 'hello';

// jsx-quotes applies to JSX attributes
<Component name="value" />
<Component name='value' />

​
Template Literals

// Always OK - has expression
const msg = `Hello ${name}`;

// Always OK - has newline  
const msg = `Hello
World`;

// Always OK - tagged template
const msg = css`color: red`;

// Only OK with allowTemplateLiterals
const msg = `Hello World`;

​
When Not to Use It

Most modern projects use Prettier for formatting. If you use Prettier, disable this rule.
Disable if:
  • You use Prettier or another formatter
  • You don’t care about quote consistency
  • Your team hasn’t agreed on a quote style