DocumentationRulesnaming-convention/filename

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`  @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" }]
  }
];
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-namenaming-convention/filename-extension