filename
Full Name in @eslint-react/eslint-plugin
@eslint-react/naming-convention/filenameFull Name in eslint-plugin-react-naming-convention
react-naming-convention/filenameFeatures
⚙️
Description
Enforces consistent file naming conventions.
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
type Options = {
rule?: "PascalCase" | "camelCase" | "kebab-case" | "snake_case";
excepts?: string[];
};rule
The naming convention to enforce.
Default: "PascalCase"
excepts
An array of strings or regex patterns to exclude certain file names from this rule.
Default:
[
"index", // Ignores `index` 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",
},
},
];