@stylistic/jsx/

jsx-sort-props

propsをアルファベット順にソートすることを強制します。

一部の開発者は、後で必要なpropsをより簡単に見つけられるように、props名をアルファベット順にソートすることを好みます。そうでない人もおり、それは複雑さを増し、維持する負担になると感じています。

ルール詳細

このルールは、すべてのJSXコンポーネントをチェックし、すべてのpropsがアルファベット順にソートされていることを検証します。スプレッド属性は検証をリセットします。ルールのデフォルト設定では、大文字と小文字が区別されます。

このルールに違反する誤ったコードの例

<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の場合、ルールはpropsの順序の大文字と小文字の区別を無視します。

このルールに従う正しいコードの例

<Hello name="John" Number="2" />;

callbacksLast

trueの場合、shorthandLastが設定されている場合でも、コールバックは他のすべてのpropsの後にリストする必要があります。

<Hello tel={5555555} onClick={this._handleClick} />

shorthandFirst

trueの場合、ショートハンドpropsは他のすべてのpropsの前にリストする必要がありますが、アルファベット順は尊重されます。

<Hello active validate name="John" tel={5555555} />

shorthandLast

trueの場合、ショートハンドpropsは、(callbacksLastが設定されていない限り)他のすべてのpropsの後にリストする必要がありますが、アルファベット順は尊重されます。

<Hello name="John" tel={5555555} active validate />

multiline

複数行のpropsのソートを強制します。

• ignore: 複数行のpropsはソートの対象外になります。

• first: 複数行のpropsは、(shorthandFirstが設定されていない限り)他のすべてのpropsの前にリストする必要がありますが、アルファベット順は尊重されます。

• last: 複数行のpropsは、(callbacksLastまたはshorthandLastのいずれかが設定されていない限り)他のすべてのpropsの後にリストする必要がありますが、アルファベット順は尊重されます。

デフォルトは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の予約済みprops (children、dangerouslySetInnerHTML - DOMコンポーネントの場合のみ、key、およびref) は、他のすべてのpropsの前にリストする必要がありますが、アルファベット順は尊重されます。

<Hello key={0} ref={johnRef} name="John">
  <div dangerouslySetInnerHTML={{__html: 'ESLint Plugin React!'}} ref={dangerDivRef} />
</Hello>

配列として指定された場合、配列の値は予約済みpropsのデフォルトリストを上書きします。注: 配列の値は、React予約済みpropsのサブセットのみにすることができます。

reservedFirst: ["key"]の場合、以下は警告を出しません。

<Hello key={'uuid'} name="John" ref={johnRef} />

locale

デフォルトは"auto"で、これは現在の環境のロケールを意味します。

ここに指定された他の文字列はString.prototype.localeCompareに渡すことができます - 不明または無効なロケールは例外をスローしてクラッシュする可能性があることに注意してください。

使用しない場合

このルールは書式設定の好みであり、それに従わなくてもコードの品質に悪影響を与えることはありません。propsをアルファベット順に並べることがコーディング標準の一部でない場合は、このルールをオフにすることができます。