`jsx-pascal-case`

ユーザー定義のJSXコンポーネントがパスカルケースで定義され、参照されるコーディングスタイルを強制します。

ReactのJSXは、ローカルコンポーネントクラスとHTMLタグを区別するために大文字と小文字の規則を使用しているため、このルールは小文字で始まるコンポーネントでは警告しないことに注意してください。

ルールの詳細

このルールに違反する不正なコードの例

jsx

<Test_component />

<TEST_COMPONENT />

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

jsx

<div />

<TestComponent />

<TestComponent>
  <div />
</TestComponent>

<CSSTransitionGroup />

ルールオプション

...
"@stylistic/jsx/jsx-pascal-case": [<enabled>, { allowAllCaps: <boolean>, allowNamespace: <boolean>, allowLeadingUnderscore: <boolean>, ignore: <string[]> }]

enabled: ルールを有効にするための設定。0=オフ、1=警告、2=エラー。デフォルトは0です。
allowAllCaps: オプションのブール値で、trueに設定すると、すべて大文字のコンポーネント名を許可します（デフォルトはfalse）。
allowLeadingUnderscore: オプションのブール値で、trueに設定すると、アンダースコアで始まるコンポーネント名を許可します（デフォルトはfalse）。
allowNamespace: オプションのブール値で、trueに設定すると、名前空間付きのコンポーネントを無視します（デフォルトはfalse）。
ignore: 検証中に無視するコンポーネント名のオプションの文字列配列（picomatchスタイルのglobをサポート）。

`allowAllCaps`

allowAllCapsがtrueの場合のこのルールに適合する正しいコードの例

jsx

<ALLOWED />
<TEST_COMPONENT />

`allowNamespace`

allowNamespaceがtrueの場合のこのルールに適合する正しいコードの例

jsx

<Allowed.div />
<TestComponent.p />

`allowLeadingUnderscore`

allowLeadingUnderscoreがtrueの場合のこのルールに適合する正しいコードの例

jsx

<_AllowedComponent />
<_AllowedComponent>
  <div />
</_AllowedComponent>

警告：コンポーネントの名前に先頭にアンダースコアを追加しても、そのコンポーネントの可視性やアクセス可能性には影響しません。先頭にアンダースコアを使用してコンポーネントのプライバシーを強制しようとすることはエラーです。

使用しない場合

JSXを使用していない場合。

jsx-pascal-case ​

ルールの詳細 ​

ルールオプション ​

allowAllCaps ​

allowNamespace ​

allowLeadingUnderscore ​

使用しない場合 ​