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:PascalCase
: PascalCasecamelCase
: camelCasekebab-case
: kebab-casesnake_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"],
},
},
];