filename

Rule category

Convention.

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`  react/jsx-filename-naming-convention
 
✖ 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`  react/jsx-filename-naming-convention
 
✖ 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. Can be one of the following:
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" }]
  }
];

eslint.config.js

// ...
export default [
  // ...
  {
    files: ["src/**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "PascalCase"],
    },
  },
  {
    files: ["src/**/use*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename": ["warn", "kebab-case"],
    },
  },
  {
    files: ["fixtures/**/*.tsx"],
    rules: {
      "@eslint-react/naming-convention/filename": "off",
    },
  },
];

naming-convention/component-name naming-convention/filename-extension