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

⚙️

Description

Enforces consistent file naming conventions.

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

See Also

context-name

Previous Page

filename-extension

Next Page