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
This rule enforces consistent file naming conventions for React components, hooks, and other project files.
By default, this rule enforces PascalCase
, but it can be configured to support camelCase
, kebab-case
, or snake_case
to match your project's standards.
Examples
Failing
If the rule is configured for PascalCase
, the following filename will trigger a warning:
export default [
{
files: ["**/*.tsx"],
rules: {
"@eslint-react/naming-convention/filename": ["warn", { rule: "PascalCase" }],
},
},
];
# File name "component.tsx" does not match 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 problem (1 error, 0 warnings)
Passing
With the same PascalCase
configuration, this file name is valid:
# Correctly named file.
This file will pass without any warnings.
Rule Options
The rule accepts an object with the following properties:
rule
: The naming convention to enforce. Default:"PascalCase"
."PascalCase"
:ExampleComponent.tsx
"camelCase"
:exampleComponent.tsx
"kebab-case"
:example-component.tsx
"snake_case"
:example_component.tsx
excepts
: An array of strings or regex patterns to exclude certain file names from this rule. The default exceptions are designed to accommodate common patterns in modern web frameworks:"index"
: Ignoresindex
files (e.g.,index.ts
,index.tsx
)."/^_/"
: Ignores files starting with an underscore (e.g.,_app.tsx
,_layout.tsx
)."/^\\$/"
: Ignores files starting with a dollar sign (e.g.,$.tsx
)."/^[0-9]+$/"
: Ignores files that are purely numeric (e.g.,404.tsx
)."/^\[[^\]]+\]$/"
: Ignores files with dynamic route segments in brackets (e.g.,[slug].tsx
).
Configuration Examples
Enforcing kebab-case
export default [
{
files: ["**/*.tsx"],
rules: {
"@eslint-react/naming-convention/filename": ["warn", { rule: "kebab-case" }],
},
},
];
Different Rules for Different Files
You can apply different conventions to different parts of your project. For example, use PascalCase
for components and camelCase
for hooks.
export default [
{
files: ["src/components/**/*.{ts,tsx}"],
rules: {
"@eslint-react/naming-convention/filename": ["warn", { rule: "PascalCase" }],
},
},
{
files: ["src/hooks/**/use*.{ts,tsx}"],
rules: {
"@eslint-react/naming-convention/filename": ["warn", { rule: "camelCase" }],
},
},
];
Disabling the Rule for Specific Directories
Framework-specific directories like Next.js's app
router often have their own naming conventions. You can disable the rule for these directories.
export default [
{
files: ["**/*.{ts,tsx}"],
rules: {
"@eslint-react/naming-convention/filename": ["warn", { rule: "kebab-case" }],
},
},
{
// Opt-out for files in the 'app' directory
files: ["app/**/*.{ts,tsx}"],
rules: {
"@eslint-react/naming-convention/filename": "off",
},
},
];