ESLint Stylistic

外观

@stylistic/jsx/

jsx-pascal-case ​

强制执行用户定义的 JSX 组件以 PascalCase 形式定义和引用的编码风格。

请注意，由于 React 的 JSX 使用大写和小写约定来区分本地组件类和 HTML 标签，因此此规则不会对以小写字母开头的组件发出警告。

规则详情 ​

此规则不正确代码示例

jsx
<Test_component />

<TEST_COMPONENT />

此规则正确代码示例

jsx
<div />

<TestComponent />

<TestComponent>
  <div />
</TestComponent>

<CSSTransitionGroup />

规则选项 ​

js
...
"@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。