react/jsx-pascal-case Style
它的作用
强制用户定义的 JSX 组件使用 PascalCase。
为什么这不好?
它强制用户定义的 JSX 组件在定义和引用时都使用 PascalCase 命名。请注意,由于 React 的 JSX 使用大小写约定 来区分本地组件类和 HTML 标签,因此该规则不会对以小写字母开头的组件发出警告。
示例
以下是此规则的错误代码示例:
jsx
<Test_component />
<TEST_COMPONENT />以下是此规则的正确代码示例:
jsx
<div />
<TestComponent />
<TestComponent>
<div />
</TestComponent>
<CSSTransitionGroup />以下是 "allowAllCaps" 选项的正确代码示例:
jsx
<ALLOWED />
<TEST_COMPONENT />以下是 "allowNamespace" 选项的正确代码示例:
jsx
<Allowed.div />
<TestComponent.p />以下是 "allowLeadingUnderscore" 选项的正确代码示例:
jsx
<_AllowedComponent />
<_AllowedComponent>
<div />
</_AllowedComponent>配置
此规则接受一个配置对象,包含以下属性:
allowAllCaps
type: boolean
default: false
是否允许全大写的组件名称。
allowLeadingUnderscore
type: boolean
default: false
是否允许组件名称以下划线开头。
allowNamespace
type: boolean
default: false
是否允许带命名空间的组件名称。
ignore
type: string[]
default: []
要忽略的组件名称列表。
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/jsx-pascal-case": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/jsx-pascal-case": "error",
},
});bash
oxlint --deny react/jsx-pascal-case --react-plugin版本
此规则于 v1.19.0 中添加。
