ESLint 样式

外观

@stylistic/

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。