@stylistic/

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/jsx-quotes: ["error", "prefer-double"]*/

<a b=
'c'
 />;

誤り

デフォルトの "prefer-double" オプションでこのルールに準拠するコードの例

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

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

正しい

prefer-single

"prefer-single" オプションでこのルールに違反するコードの例

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

<a b=
"c"
 />;

誤り

"prefer-single" オプションでこのルールに準拠するコードの例

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

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

正しい

使用しない場合

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