Versions

jsx-quotes

Enforce the consistent use of either double or single quotes in JSX attributes

🔧 Fixable

Some problems reported by this rule are automatically fixable by the --fix command line option

JSX 属性值可以包含字符串字面,用单引号或双引号划定。

<a b='c' />
<a b="c" />

与 JavaScript 中的字符串字面量不同,JSX 属性中的字符串字面量不能包含转义引号。 如果你想在 JSX 属性值中有一个双引号,你必须使用单引号作为字符串分隔符。

<a b="'" />
<a b='"' />

规则细节

这条规则强制要求在 JSX 属性中统一使用双引号或单引号。

选项

此规则选项为字符串:

  • "prefer-double"(默认值)对于所有不包含双引号的 JSX 属性值,强制使用双引号。
  • "prefer-single"对所有不包含单引号的 JSX 属性值强制使用单引号。

prefer-double

使用此规则与默认的 "prefer-double" 选项的错误示例:

Open in Playground
/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b='c' />

使用此规则与默认的 "prefer-double" 选项的正确示例:

Open in Playground
/*eslint jsx-quotes: ["error", "prefer-double"]*/

<a b="c" />
<a b='"' />

prefer-single

使用此规则与 "prefer-single" 选项的错误示例:

Open in Playground
/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b="c" />

使用此规则与 "prefer-single" 选项的正确示例:

Open in Playground
/*eslint jsx-quotes: ["error", "prefer-single"]*/

<a b='c' />
<a b="'" />

何时不用

如果你不使用 JSX,或者你不关心 JSX 属性中引号的一致用法,你可以关闭这个规则。

Version

This rule was introduced in ESLint v1.4.0.

Resources

更改语言