component-name

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/component-name

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention/component-name

Features

🔍

What it does

Enforces naming conventions for components.

Examples

This rule enforces naming conventions for components. Can be used to enforce PascalCase and CONSTANT_CASE. By default, it enforces PascalCase.

Failing

import React from "react";
 
function Example_Component() {
  //     ^^^^^^^^^^^^^^^^^
  //     - Expected component name to be in 'PascalCase'.
  return null;
}

Passing

import React from "react";
 
function ExampleComponent() {
  return null;
}

Rule Options

• rule: The rule to apply to the file name. Default is "PascalCase". Possible values:
  1. PascalCase: PascalCase
  2. CONSTANT_CASE: CONSTANT_CASE
• excepts: (optional) An array of component names that are allowed to not follow the rule.
• allowAllCaps: (optional) If true, allows all caps file names. Default is false.
• allowNamespace: (optional) If true, allows namespace in JSX elements. Default is false.
• allowLeadingUnderscore: (optional) If true, allows leading underscore in file names. Default is false.

{
  "@eslint-react/naming-convention/component-name": ["warn", "PascalCase"]
}

{
  "@eslint-react/naming-convention/component-name": [
    "warn",
    { "rule": "PascalCase", "excepts": ["MyComponent"] }
  ]
}