logoESLint React
Rules

filename

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

react-naming-convention/filename

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention/filename

Features

🔍 ⚙️

What it does

Enforces naming convention for JSX files. Can be used to enforce PascalCase, camelCase, kebab-case, snake_case. By default, it enforces PascalCase.

Examples

Failing

Terminal
npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "PascalCase" }]' .
 
src/components/component.tsx
    1:1  error  "File name `component.tsx` does not match `PascalCase`. Should rename to `Component.tsx`  @eslint-react/naming-convention/filename
 
✖ 1 problems (0 errors, 1 warnings)
npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "kebab-case" }]' .
 
src/components/example_component.tsx
    1:1  error  "File name `example_component.tsx` does not match `kebab-case`. Should rename to `example-component.tsx`  @eslint-react/naming-convention/filename
 
✖ 1 problems (0 errors, 1 warnings)

Passing

Terminal
npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "PascalCase" }]' .
 
src/components/Component.tsx
 
✨  Done in 0.61s.
Terminal
npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "kebab-case" }]' .
 
src/components/example-component.tsx
 
✨  Done in 0.61s.

Rule Options

  • rule: The rule to apply to the file name. Default is "PascalCase". Possible values:
    1. PascalCase: PascalCase
    2. camelCase: camelCase
    3. kebab-case: kebab-case
    4. snake_case: snake_case

Rule Options Examples

eslint.config.js
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "PascalCase"]
  }
];
eslint.config.js
// ...
export default [
  // ...
  {
    files: ["**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", { "rule": "kebab-case" }]
  }
];

Applying different rules to different files

eslint.config.js
// ...
export default [
  // ...
  {
    files: ["src/**/*.{ts,tsx}"],
    ignore: ["**/index.{ts,tsx}"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "PascalCase"],
    },
  },
  {
    files: ["src/pages/**/*.{ts,tsx}"],
    ignore: ["**/index.{ts,tsx}"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "kebab-case"],
    },
  },
  {
    files: ["src/hooks/**/use*.{ts,tsx}"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "camelCase"],
    },
  },
];

Implementation

Previous

component-name

Next

filename-extension

On this page