@stylistic/

jsx-curly-brace-presence

JSXの子要素や属性で、リテラルだけで十分な場合に不要なJSX式を禁止するか、JSX式を強制します。

JSX式が不要な状況については、ReactのドキュメントとJSXの落とし穴に関するこのページを参照してください。

ルールの詳細

デフォルトでは、このルールはJSXのプロパティと子要素の両方で不要な中括弧をチェックし、警告します。後方互換性のために、JSX要素であるプロパティ値はデフォルトでは考慮されません。

JSXプロパティ、子要素、JSX要素であるJSXプロパティ値、またはこれらの3つの任意の組み合わせに中括弧があることを強制するオプションを渡すことができます。不要な中括弧を許可しないオプションと、チェックを無視するオプションも同じです。

**注**: このルールはオブジェクトで設定し、"propElementValues" を "always" に設定することを*強くお勧めします*。JSX要素であるprop値の周りの波括弧を省略できることは分かりにくく、意図的にドキュメント化されておらず、依存すべきではありません。

ルールオプション

...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
...

または代わりに

...
"@stylistic/jsx/jsx-curly-brace-presence": [<enabled>, <string>]
...

<string> の有効なオプション

JSXのプロパティと子要素のチェックには、always、never、ignore があります。

• always: JSXプロパティ、子要素、および/またはJSX要素であるJSXプロパティ値の中に常に中括弧を強制します
• never: JSXプロパティ、子要素、および/またはJSX要素であるJSXプロパティ値の中に不要な中括弧を許可しません
• ignore: JSXプロパティ、子要素、および/またはJSX要素であるJSXプロパティ値のルールを無視します

修正するオプションが渡された場合、スタイル違反は次のように修正されます

• always: JSX属性を中括弧/JSX式で囲み、JSX子要素も同じように二重引用符で囲みます

• never: JSX属性および/またはJSX子要素から中括弧を削除します

• すべての修正操作は二重引用符を使用します。

例として

{ props: "always", children: "always" } で設定した場合のこのルールの**誤った**コードの例

<App>Hello world</App>;
<App prop='Hello world'>{'Hello world'}</App>;

これらは次のように修正できます

<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{'Hello world'}</App>;

{ props: "never", children: "never" } で設定した場合のこのルールの**誤った**コードの例

<App>{'Hello world'}</App>;
<App prop={'Hello world'} attr={"foo"} />;

これらは次のように修正できます

<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

{ props: "always", children: "always", "propElementValues": "always" } で設定した場合のこのルールの**誤った**コードの例

<App prop=<div /> />;

これらは次のように修正できます

<App prop={<div />} />;

{ props: "never", children: "never", "propElementValues": "never" } で設定した場合のこのルールの**誤った**コードの例

<App prop={<div />} />;

これらは次のように修正できます

<App prop=<div /> />;

代替構文

オプションは、同じ意味で always、never、ignore です。

この構文では、文字列のみが提供され、デフォルトはJSXのプロパティと子要素の両方のチェックに対してそのオプションに設定されます。

例として

"always" で設定した場合のこのルールの**誤った**コードの例

<App>Hello world</App>;
<App prop='Hello world' attr="foo">Hello world</App>;

これらは次のように修正できます

<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"}>{"Hello world"}</App>;

"never" で設定した場合のこのルールの**誤った**コードの例

<App prop={'foo'} attr={"bar"}>{'Hello world'}</App>;

次のように修正できます

<App prop="foo" attr="bar">Hello world</App>;

エッジケース

この修正は、テンプレートリテラル、引用符付き文字列、エスケープ文字付き文字列にも対応しています。

• ルールが不要な中括弧を削除するように設定されており、JSX式内のテンプレートリテラルに式がない場合、警告が表示され、二重引用符で修正されます。例えば

<App prop={`Hello world`}>{`Hello world`}</App>;

は警告が表示され、次のように修正されます

<App prop="Hello world">Hello world</App>;

• ルールが中括弧を強制するように設定されており、文字列に引用符が含まれている場合、JSX子要素の場合は二重引用符で、JSX属性の場合は通常の方法で修正されます。また、修正では二重引用符がエスケープされます。

例えば

<App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>;

は警告が表示され、次のように修正されます

<App prop={"Hello \"foo\" world"}>{"Hello 'foo' \"bar\" world"}</App>;

• ルールが不要な中括弧（JSX式）を削除するように設定されており、引用符文字、禁止されているJSXテキスト文字、エスケープ文字、HTMLエンティティ名のように見えるものなど、JSX形式でエスケープする必要がある文字がある場合、修正によってコードが読みにくくなる可能性があるため、コードに対して警告は表示されません。

"never" で設定した場合でも、このルールの**正しい**コードの例

<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * there's no way to inject a whitespace into jsx without a container so this
 * will always be allowed.
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary

使用しない方が良い場合

JSXのプロパティや子要素の中括弧の使用、および不要なJSX式の使用に関する一貫性を維持することに関心がない場合は、このルールを無効にする必要があります。