jsx-quotes

强制在 JSX 属性中使用双引号或单引号

JSX 属性值可以包含用单引号或双引号分隔的字符串字面。

🌐 JSX attribute values can contain string literals, which are delimited with single or double quotes.

<a b='c' />;
<a b="c" />;
1
2

与 JavaScript 中的字符串字面量不同，JSX 属性中的字符串字面量不能包含转义引号。如果你想在 JSX 属性值中包含例如双引号，你必须使用单引号作为字符串定界符。

🌐 Unlike string literals in JavaScript, string literals within JSX attributes can’t contain escaped quotes. If you want to have e.g. a double quote within a JSX attribute value, you have to use single quotes as string delimiter.

<a b="'" />;
<a b='"' />;
1
2

规则详情

🌐 Rule Details

此规则强制在 JSX 属性中一致地使用双引号或单引号。

🌐 This rule enforces the consistent use of either double or single quotes in JSX attributes.

选项

🌐 Options

此规则有一个字符串选项：

🌐 This rule has a string option:

• "prefer-double"（默认）强制要求对所有不包含双引号的 JSX 属性值使用双引号。
• "prefer-single" 强制要求所有不包含单引号的 JSX 属性值使用单引号。

prefer-double

使用默认 "prefer-double" 选项时，该规则的错误代码示例：

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

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

<a b='c' />;
1
2
3

使用默认 "prefer-double" 选项时，该规则的正确代码示例：

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

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

<a b="c" />;
<a b='"' />;
1
2
3
4

prefer-single

使用 "prefer-single" 选项时违反此规则的错误代码示例：

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

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

<a b="c" />;
1
2
3

使用 "prefer-single" 选项时，此规则的正确代码示例：

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

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

<a b='c' />;
<a b="'" />;
1
2
3
4

何时不使用

🌐 When Not To Use It

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

🌐 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.

相关规则

• quotes

版本

此规则是在 ESLint v1.4.0 中引入。

资源

• 规则源码
• 测试源码