@stylistic/jsx/

jsx-curly-spacing

JSX属性と式内の波括弧内でのスペースを強制または禁止します。

ルール詳細

このルールは、要素の子要素内のJSX属性と式内のスペースに関する一貫性を維持することを目的としています。

波括弧とそれらの内部の値との間のスペースを要求するか、禁止します。

ルールオプション

このルールには2つの主要なオプションがあります。

• {"when": "always"} は、波括弧内にスペースを強制します。
• {"when": "never"} は、波括弧内のスペースを禁止します（デフォルト）。

属性（attributes）と式（children）でルールがどのように動作するかを指定できるプロパティも2つあります。可能な値は次のとおりです。

• true は、オプションを使用してスペースのチェックを有効にします（attributes のデフォルト）。例：{"attributes": false} は、属性のチェックを無効にします。
• false は、スペースのチェックを無効にします（children のデフォルト、下位互換性のため）。例：{"children": true} は、式のチェックを有効にします。
• グローバルオプションをオーバーライドするオプションを含むオブジェクト。例：{"when": "always", "children": {"when": "never"}} は、属性内にスペースを強制しますが、式内のスペースは禁止します。

never

{ "when": "never" } で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;

このルールに対する**適切な**コードの例。

<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

{ "when": "never", "children": true } で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{ firstname }</Hello>;

このルールに対する**適切な**コードの例。

<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

always

{ "when": "always" } で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;

このルールに対する**適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

{ "when": "always", "children": true } で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{firstname}</Hello>;

このルールに対する**適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

複数行にまたがる波括弧

デフォルトでは、複数行にまたがる波括弧はどちらの設定でも許可されます。禁止する場合は、値をfalseにした追加のallowMultilineプロパティを指定できます。

"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "never", "allowMultiline": false}]

"never" と "allowMultiline": false で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello name={
  firstname
} />;

このルールに対する**適切な**コードの例。

<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

"always" と "allowMultiline": false で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello name={
  firstname
} />;

このルールに対する**適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;

{ "when": "never", "attributes": { "allowMultiline": false }, "children": true } で設定した場合、このルールに対する**不適切な**コードの例。

<Hello name={ firstname } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;

このルールに対する**適切な**コードの例。

<Hello name={firstname} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;

詳細なスペース制御

次の可能な値を持つオブジェクトである追加のspacingプロパティを指定できます。

"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "always", "spacing": {
  "objectLiterals": "never"
}}]

• objectLiterals: jsxの波括弧内の値がオブジェクトリテラルの場合、異なるスペース要件を制御します。

すべてのスペースオプションは、文字列"always"または文字列"never"を受け入れます。「spacing」オプションのデフォルト値は、提供された最初の「always」/「never」オプションと一致します。

"always" と { "objectLiterals": "never" } で設定した場合、このルールに対する**適切な**コードの例。

<App blah={ 3 } foo={{ bar: true, baz: true }} />;

"never" と { "objectLiterals": "always" } で設定した場合、このルールに対する**適切な**コードの例。

<App blah={3} foo={ {bar: true, baz: true} } />;

オブジェクトリテラルの波括弧自体のスペースは、組み込みのobject-curly-spacingルールで制御されることに注意してください。

省略記法オプション

下位互換性を維持するために、2つの追加オプションがサポートされています。

"@stylistic/jsx/jsx-curly-spacing": [2, "always"]

これは次の略記です。

"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "always"}]

そして

"@stylistic/jsx/jsx-curly-spacing": [2, "never"]

これは次の略記です。

"@stylistic/jsx/jsx-curly-spacing": [2, {"when": "never"}]

省略記法オプションを使用する場合、属性のみがチェックされます。他のオプションを指定するには、別の引数を使用してください。

"@stylistic/jsx/jsx-curly-spacing": [2, "never", {
  "allowMultiline": false,
  "spacing": {"objectLiterals": "always"}
}]

使用しない場合

JSX属性または式内のスペースに関する一貫性を気にしない場合は、このルールをオフにすることができます。