close
Rslint

    jsx-pascal-case

    Configuration

    rslint.config.ts
    import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/jsx-pascal-case': 'error',
    },
  },
]);

    Enforce PascalCase for user-defined JSX components.

    Rule Details

    JSX tag names that start with a lowercase letter are interpreted by React as HTML intrinsics (<div>, <span>, …) and are skipped. For user components (<TestComponent>), this rule requires PascalCase: the first character must be an upper-case letter, the remaining characters must be alphanumeric, and at least one lower-case letter or digit must follow.

    Examples of incorrect code for this rule:

    <Test_component />
    <TEST_COMPONENT />

    Examples of correct code for this rule:

    <div />
    <TestComponent />
    <TestComponent>
  <div />
</TestComponent>
    <CSSTransitionGroup />

    Rule Options

    {
  "react/jsx-pascal-case": [
    "error",
    {
      "allowAllCaps": false,
      "allowNamespace": false,
      "allowLeadingUnderscore": false,
      "ignore": []
    }
  ]
}
    • allowAllCaps (default false): allow SCREAMING_SNAKE_CASE component names.
    • allowNamespace (default false): skip the check for parts after the first dot or colon in a namespaced / member-access tag.
    • allowLeadingUnderscore (default false): strip a single leading _ before running the PascalCase / all-caps check.
    • ignore (default []): array of names to exempt. Entries are matched as minimatch-style globs — supports *, ?, character classes, and extglob groups such as +(a|b).

    allowAllCaps

    Examples of correct code for this rule, when allowAllCaps is true:

    { "react/jsx-pascal-case": ["error", { "allowAllCaps": true }] }
    <ALLOWED />
<TEST_COMPONENT />

    allowNamespace

    Examples of correct code for this rule, when allowNamespace is true:

    { "react/jsx-pascal-case": ["error", { "allowNamespace": true }] }
    <Allowed.div />
<TestComponent.p />

    allowLeadingUnderscore

    Examples of correct code for this rule, when allowLeadingUnderscore is true:

    { "react/jsx-pascal-case": ["error", { "allowLeadingUnderscore": true }] }
    <_AllowedComponent />
<_AllowedComponent>
  <div />
</_AllowedComponent>

    Differences from ESLint

    • ignore entries do not support the !(a|b) negative extglob syntax.

    Original Documentation