@stylistic/js/

jsx-quotes

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" オプションを使用したこのルールに対する不正なコードの例

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

<a b=
'c'
 />;

不正

デフォルトの "prefer-double" オプションを使用したこのルールに対する正しいコードの例

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

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

正しい

prefer-single

"prefer-single" オプションを使用したこのルールに対する不正なコードの例

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

<a b=
"c"
 />;

不正

"prefer-single" オプションを使用したこのルールに対する正しいコードの例

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

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

正しい

使用しない場合

JSXを使用しない場合、またはJSX属性内での引用符の一貫した使用に関心がない場合は、このルールをオフにすることができます。