@stylistic/

jsx-pascal-case

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

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

ルールの詳細

このルールの**誤った**コードの例

<Test_component />

<TEST_COMPONENT />

このルールの**正しい**コードの例

<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 の場合の、このルールの**正しい**コードの例

<ALLOWED />
<TEST_COMPONENT />

allowNamespace

allowNamespace が true の場合の、このルールの**正しい**コードの例

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

allowLeadingUnderscore

allowLeadingUnderscore が true の場合の、このルールの**正しい**コードの例

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

**警告:** コンポーネントの名前にアンダースコアを追加しても、そのコンポーネントの可視性やアクセシビリティには**影響しません**。アンダースコアを使用してコンポーネントのプライバシーを強制しようとするとエラーになります。

使用しない場合

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