← Back to rules

react/jsx-pascal-case スタイル

何を実行するか

ユーザー定義の JSX コンポーネントに対して、ピスカルケース（大文字开头）を強制します。

なぜ問題なのか

ユーザー定義の JSX コンポーネントがピスカルケースで定義および参照されるようにコーディングスタイルを強制します。注意点として、React の JSX では大文字と小文字の区別によりローカルコンポーネントクラスと HTML タグを区別しているため、小文字から始まるコンポーネントについてはこのルールは警告しません。

例

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

<Test_component />
<TEST_COMPONENT />

このルールに準拠する正しいコードの例：

<div />

<TestComponent />

<TestComponent>
    <div />
</TestComponent>

<CSSTransitionGroup />

「allowAllCaps」オプションに準拠する正しいコードの例：

<ALLOWED />

<TEST_COMPONENT />

「allowNamespace」オプションに準拠する正しいコードの例：

<Allowed.div />

<TestComponent.p />

「allowLeadingUnderscore」オプションに準拠する正しいコードの例：

<_AllowedComponent />

<_AllowedComponent>
    <div />
</_AllowedComponent>

設定

このルールは以下のプロパティを持つ設定オブジェクトを受け入れます：

allowAllCaps

type: boolean

default: false

すべて大文字のコンポーネント名を許可するかどうか。

allowLeadingUnderscore

type: boolean

default: false

コンポーネント名の先頭にアンダースコアを許可するかどうか。

allowNamespace

type: boolean

default: false

名前空間付きのコンポーネント名を許可するかどうか。

ignore

type: string[]

default: []

無視するコンポーネント名のリスト。

使い方

このルールを構成ファイルまたは CLI で有効化するには、次のように使用できます：

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-pascal-case": "error"
  }
}

CLI

oxlint --deny react/jsx-pascal-case --react-plugin

参照

• ルールのソース