react/jsx-pascal-case

Components named UserCard, User_Card and USERCARD in one codebase are hard to search for and easy to mix up with constants. This rule wants one style: a capital first letter, no underscores, and at least one lowercase letter or digit.

Tags that start with a lowercase letter are HTML elements, so the rule skips them. One-character names, such as <T />, are allowed. In <Menu.Item />, the rule checks each part.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/jsx-pascal-case" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/jsx-pascal-case" = ["error", {
  allowAllCaps = false,
  allowLeadingUnderscore = false,
  allowNamespace = false,
  ignore = [],
}]

Examples#

example.jsx2 problems

const page = (
  <User_Card>
    <NAVBAR />
  </User_Card>
);

example.jsxNo problems

const page = (
  <UserCard>
    <Navbar />
    <H1 />
  </UserCard>
);

Options#

Option	Default	What it does
`allowAllCaps`	`false`	Also allow names in capitals, with underscores between words: `<NAV_BAR />`.
`allowLeadingUnderscore`	`false`	Allow one underscore before the name: `<_Button />`.
`allowNamespace`	`false`	In `<Form.input />`, only check `Form`.
`ignore`	`[]`	Names to skip. Globs such as `"*_DEPRECATED"` work.

example.jsxwith { "allowAllCaps": true }No problems

const nav = <NAV_BAR />;

example.jsx1 problem

const button = <_Button />;

example.jsxwith { "allowLeadingUnderscore": true }No problems

const button = <_Button />;

example.jsx1 problem

const field = <Form.input />;

example.jsxwith { "allowNamespace": true }No problems

const field = <Form.input />;

example.jsxwith { "ignore": ["*_DEPRECATED"] }No problems

const dialog = <Modal_DEPRECATED />;