@stylistic/

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>;

複数行にまたがる中括弧

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

"@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属性または式内のスペースの一貫性を気にしない場合は、このルールをオフにできます。