filename-case: Allow $-prefixed filenames (#3012)

sindresorhus · web-flow · commit b9cbbed75894 · 2026-06-06T01:01:11.000+02:00
diff --git a/docs/rules/filename-case.md b/docs/rules/filename-case.md
@@ -11,7 +11,9 @@ Enforces all linted files to have their names in a certain case style and lowerc
 
 Files named `index.js`, `index.mjs`, `index.cjs`, `index.ts`, `index.tsx`, `index.vue` are ignored as they can't change case (Only a problem with `pascalCase`).
 
-Characters in the filename except `a-z`, `A-Z`, `0-9`, `-`, and `_` are ignored.
+Characters other than `a-z`, `A-Z`, `0-9`, `-`, and `_` are ignored for casing and kept as-is in suggested filenames.
+
+The filename case check ignores filenames starting with `$`, as they are commonly used for route parameters.
 
 ## Cases
 
diff --git a/rules/filename-case.js b/rules/filename-case.js
@@ -167,7 +167,7 @@ const create = context => {
 		}
 
 		const {leading, words} = splitFilename(filename);
-		const isValid = validateFilename(words, chosenCasesFunctions);
+		const isValid = filename.startsWith('$') || validateFilename(words, chosenCasesFunctions);
 
 		if (isValid) {
 			if (!isLowerCase(extension)) {
diff --git a/test/filename-case.js b/test/filename-case.js
@@ -93,10 +93,14 @@ test({
 		testCase('src/foo/_FooBar.js', 'pascalCase'),
 		testCase('src/foo/___FooBar.js', 'pascalCase'),
 		testCase('src/foo/$foo.js'),
+		testCase('src/foo/$userId.tsx'),
+		testCase('src/foo/$foo_bar.js'),
+		testCase('src/foo/$fooBar.js'),
 		testManyCases('src/foo/foo-bar.js'),
 		testManyCases('src/foo/foo-bar.js', {}),
 		testManyCases('src/foo/fooBar.js', {camelCase: true}),
 		testManyCases('src/foo/FooBar.js', {kebabCase: true, pascalCase: true}),
+		testManyCases('src/foo/$idCertidao.tsx', {kebabCase: true, pascalCase: true}),
 		testManyCases('src/foo/___foo_bar.js', {snakeCase: true, pascalCase: true}),
 		testCaseWithOptions('src/foo/bar.js'),
 		testCase('src/foo/[fooBar].js', 'camelCase'),
@@ -248,7 +252,14 @@ test({
 			},
 		]),
 		// Ignored
-		...['index.js', 'index.mjs', 'index.cjs', 'index.ts', 'index.tsx', 'index.vue'].flatMap(filename => ['camelCase', 'snakeCase', 'kebabCase', 'pascalCase'].map(chosenCase => testCase(filename, chosenCase))),
+		...[
+			'index.js',
+			'index.mjs',
+			'index.cjs',
+			'index.ts',
+			'index.tsx',
+			'index.vue',
+		].flatMap(filename => ['camelCase', 'snakeCase', 'kebabCase', 'pascalCase'].map(chosenCase => testCase(filename, chosenCase))),
 		testCaseWithOptions('index.tsx', undefined, [{case: 'pascalCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/index.tsx', undefined, [{case: 'pascalCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/fooBar.test.js', undefined, [{case: 'camelCase', multipleFileExtensions: false}]),
@@ -257,6 +268,7 @@ test({
 		testCaseWithOptions('src/foo/foo.test.js', undefined, [{case: 'kebabCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/foo-bar.test.js', undefined, [{case: 'kebabCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/foo-bar.test-utils.js', undefined, [{case: 'kebabCase', multipleFileExtensions: false}]),
+		testCaseWithOptions('src/foo/$userId.test.tsx', undefined, [{case: 'kebabCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/Foo.Test.js', undefined, [{case: 'pascalCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/FooBar.Test.js', undefined, [{case: 'pascalCase', multipleFileExtensions: false}]),
 		testCaseWithOptions('src/foo/FooBar.TestUtils.js', undefined, [{case: 'pascalCase', multipleFileExtensions: false}]),
@@ -431,14 +443,14 @@ test({
 			'Filename is not in kebab case. Rename it to `[foo-bar].js`.',
 		),
 		testCase(
-			'src/foo/$foo_bar.js',
+			'src/foo/foo$Bar.js',
 			undefined,
-			'Filename is not in kebab case. Rename it to `$foo-bar.js`.',
+			'Filename is not in kebab case. Rename it to `foo$bar.js`.',
 		),
 		testCase(
-			'src/foo/$fooBar.js',
+			'src/foo/$userId.TSX',
 			undefined,
-			'Filename is not in kebab case. Rename it to `$foo-bar.js`.',
+			'File extension `.TSX` is not in lowercase. Rename it to `$userId.tsx`.',
 		),
 		testManyCases(
 			'src/foo/{foo_bar}.js',

Original file line number	Diff line number	Diff line change
`@@ -167,7 +167,7 @@ const create = context => {`
`167`	`167`	`}`
`168`	`168`
`169`	`169`	`const {leading, words} = splitFilename(filename);`
`170`		`- const isValid = validateFilename(words, chosenCasesFunctions);`
	`170`	`+ const isValid = filename.startsWith('$') \|\| validateFilename(words, chosenCasesFunctions);`
`171`	`171`
`172`	`172`	`if (isValid) {`
`173`	`173`	`if (!isLowerCase(extension)) {`