← Back to rules

react/jsx-pascal-case 스타일

작동 방식

사용자 정의 JSX 컴포넌트에 대해 파스칼 표기법을 강제합니다.

왜 문제가 되는가?

이 규칙은 사용자 정의 JSX 컴포넌트가 파스칼 표기법으로 정의되고 참조되도록 코딩 스타일을 강제합니다. 다만, 리액트의 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

기본값: false

모든 대문자로 된 컴포넌트 이름을 허용할지 여부.

allowLeadingUnderscore

type: boolean

기본값: false

컴포넌트 이름의 앞에 언더스코어(_)를 허용할지 여부.

allowNamespace

type: boolean

기본값: false

네임스페이스를 포함한 컴포넌트 이름을 허용할지 여부.

ignore

type: string[]

기본값: []

무시할 컴포넌트 이름 목록.

사용 방법

구성 파일 또는 커맨드 라인에서 이 규칙을 활성화하려면 다음과 같이 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스