eslint/docs/rules/jsx-quotes.md

   1 # enforce the consistent use of either double or single quotes in JSX attributes (jsx-quotes)
   2
   3 JSX attribute values can contain string literals, which are delimited with single or double quotes.
   4
   5 ```xml
   6 <a b='c' />
   7 <a b="c" />
   8 ```
   9
  10 Unlike string literals in JavaScript, string literals within JSX attributes can’t contain escaped quotes.
  11 If you want to have e.g. a double quote within a JSX attribute value, you have to use single quotes as string delimiter.
  12
  13 ```xml
  14 <a b="'" />
  15 <a b='"' />
  16 ```
  17
  18 ## Rule Details
  19
  20 This rule enforces the consistent use of either double or single quotes in JSX attributes.
  21
  22 ## Options
  23
  24 This rule has a string option:
  25
  26 * `"prefer-double"` (default) enforces the use of double quotes for all JSX attribute values that don't contain a double quote.
  27 * `"prefer-single"` enforces the use of single quotes for all JSX attribute values that don’t contain a single quote.
  28
  29 ### prefer-double
  30
  31 Examples of **incorrect** code for this rule with the default `"prefer-double"` option:
  32
  33 ```xml
  34 /*eslint jsx-quotes: ["error", "prefer-double"]*/
  35
  36 <a b='c' />
  37 ```
  38
  39 Examples of **correct** code for this rule with the default `"prefer-double"` option:
  40
  41 ```xml
  42 /*eslint jsx-quotes: ["error", "prefer-double"]*/
  43
  44 <a b="c" />
  45 <a b='"' />
  46 ```
  47
  48 ### prefer-single
  49
  50 Examples of **incorrect** code for this rule with the `"prefer-single"` option:
  51
  52 ```xml
  53 /*eslint jsx-quotes: ["error", "prefer-single"]*/
  54
  55 <a b="c" />
  56 ```
  57
  58 Examples of **correct** code for this rule with the `"prefer-single"` option:
  59
  60 ```xml
  61 /*eslint jsx-quotes: ["error", "prefer-single"]*/
  62
  63 <a b='c' />
  64 <a b="'" />
  65 ```
  66
  67 ## When Not To Use It
  68
  69 You can turn this rule off if you don’t use JSX or if you aren’t concerned with a consistent usage of quotes within JSX attributes.
  70
  71 ## Related Rules
  72
  73 * [quotes](quotes.md)