jsx-sort-props
プロパティをアルファベット順にソートすることを強制します。
一部の開発者は、後で必要なプロパティを見つけやすくするために、プロパティ名をアルファベット順にソートすることを好みます。一方で、複雑さを増し、保守の負担になると感じる開発者もいます。
ルールの詳細
このルールは、すべての JSX コンポーネントをチェックし、すべてのプロパティがアルファベット順にソートされていることを確認します。スプレッド属性は検証をリセットします。ルールのデフォルト設定では、大文字と小文字が区別されます。
このルールの**誤った**コードの例
<Hello lastName="Smith" firstName="John" />;このルールの**正しい**コードの例
<Hello firstName="John" lastName="Smith" />;
<Hello tel={5555555} {...this.props} firstName="John" lastName="Smith" />;ルールオプション
...
"@stylistic/jsx/jsx-sort-props": [<enabled>, {
"callbacksLast": <boolean>,
"shorthandFirst": <boolean>,
"shorthandLast": <boolean>,
"multiline": "ignore" | "first" | "last",
"ignoreCase": <boolean>,
"noSortAlphabetically": <boolean>,
"reservedFirst": <boolean>|<array<string>>,
"locale": "auto" | "any valid locale"
}]
...ignoreCase
true の場合、ルールは大文字と小文字を区別せずにプロパティの順序を無視します。
このルールの**正しい**コードの例
<Hello name="John" Number="2" />;callbacksLast
true の場合、`shorthandLast` が設定されている場合でも、コールバックは他のすべてのプロパティの後にリストする必要があります。
<Hello tel={5555555} onClick={this._handleClick} />shorthandFirst
true の場合、省略形プロパティは他のすべてのプロパティの前にリストする必要がありますが、アルファベット順は依然として尊重されます。
<Hello active validate name="John" tel={5555555} />shorthandLast
true の場合、省略形プロパティは（`callbacksLast` が設定されていない限り）他のすべてのプロパティの後にリストする必要がありますが、アルファベット順は依然として尊重されます。
<Hello name="John" tel={5555555} active validate />`multiline`
複数行のプロパティのソートを強制します。
`ignore`: 複数行のプロパティはソートの対象になりません。
`first`: 複数行のプロパティは、他のすべてのプロパティの前にリストする必要がありますが（`shorthandFirst`が設定されていない限り）、アルファベット順は依然として尊重されます。
`last`: 複数行のプロパティは、他のすべてのプロパティの後にリストする必要がありますが（`callbacksLast`または`shorthandLast`が設定されていない限り）、アルファベット順は依然として尊重されます。
デフォルトは`ignore`です。
// 'jsx-sort-props': [1, { multiline: 'first' }]
<Hello
classes={{
greetings: classes.greetings,
}}
active
validate
name="John"
tel={5555555}
/>
// 'jsx-sort-props': [1, { multiline: 'last' }]
<Hello
active
validate
name="John"
tel={5555555}
classes={{
greetings: classes.greetings,
}}
/>`noSortAlphabetically`
`true`の場合、アルファベット順は**強制されません**。
<Hello tel={5555555} name="John" />`reservedFirst`
これは、ブール値または配列オプションです。
`reservedFirst`が定義されている場合、Reactの予約済みプロパティ（`children`、`dangerouslySetInnerHTML` - **DOMコンポーネントの場合のみ**、`key`、`ref`）は、他のすべてのプロパティの前にリストする必要がありますが、アルファベット順は依然として尊重されます。
<Hello key={0} ref={johnRef} name="John">
<div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref={dangerDivRef} />
</Hello>配列として指定された場合、配列の値は予約済みプロパティのデフォルトリストをオーバーライドします。**注**: 配列内の値は、Reactの予約済みプロパティの**サブセット**のみ可能です。
`reservedFirst: ["key"]` の場合、以下は警告を**出しません**。
<Hello key={'uuid'} name="John" ref={johnRef} />`locale`
デフォルトは`"auto"`で、現在の環境のロケールを意味します。
ここで指定された他の文字列は、`String.prototype.localeCompare`に渡される可能性があります。 - 不明なロケールまたは無効なロケールは例外をスローしてクラッシュする可能性があることに注意してください。
使用しない場合
このルールは書式設定の好みであり、ルールに従わなくてもコードの品質に悪影響はありません。プロパティのアルファベット順ソートがコーディング標準の一部でない場合は、このルールをオフにすることができます。