improve linting

Author: kentcdodds

.eslintrc.cjs

@@ -1,14 +1,56 @@
+const vitestFiles = ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*']
+const testFiles = ['**/tests/**', ...vitestFiles]
+const appFiles = ['app/**']
+
 /** @type {import('@types/eslint').Linter.BaseConfig} */
 module.exports = {
 	extends: [
 		'@remix-run/eslint-config',
 		'@remix-run/eslint-config/node',
 		'prettier',
 	],
+	rules: {
+		'@typescript-eslint/consistent-type-imports': [
+			'warn',
+			{
+				prefer: 'type-imports',
+				disallowTypeAnnotations: true,
+				fixStyle: 'inline-type-imports',
+			},
+		],
+		'@typescript-eslint/no-duplicate-imports': 'warn',
+	},
 	overrides: [
+		{
+			plugins: ['remix-react-routes'],
+			files: appFiles,
+			excludedFiles: testFiles,
+			rules: {
+				'remix-react-routes/use-link-for-routes': 'error',
+				'remix-react-routes/require-valid-paths': 'error',
+				// disable this one because it doesn't appear to work with our
+				// route convention. Someone should dig deeper into this...
+				'remix-react-routes/no-relative-paths': [
+					'off',
+					{ allowLinksToSelf: true },
+				],
+				'remix-react-routes/no-urls': 'error',
+				'no-restricted-imports': [
+					'error',
+					{
+						patterns: [
+							{
+								group: testFiles,
+								message: 'Do not import test files in app files',
+							},
+						],
+					},
+				],
+			},
+		},
 		{
 			extends: ['@remix-run/eslint-config/jest-testing-library'],
-			files: ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*'],
+			files: vitestFiles,
 			rules: {
 				'testing-library/no-await-sync-events': 'off',
 				'jest-dom/prefer-in-document': 'off',
@@ -23,15 +65,4 @@ module.exports = {
 			},
 		},
 	],
-	rules: {
-		'@typescript-eslint/consistent-type-imports': [
-			'warn',
-			{
-				prefer: 'type-imports',
-				disallowTypeAnnotations: true,
-				fixStyle: 'inline-type-imports',
-			},
-		],
-		'@typescript-eslint/no-duplicate-imports': 'warn',
-	},
 }

app/routes/admin+/cache.tsx

@@ -1,6 +1,7 @@
 import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import {
 	Form,
+	Link,
 	useFetcher,
 	useLoaderData,
 	useSearchParams,
@@ -189,10 +190,12 @@ function CacheKeyRow({
 }: {
 	cacheKey: string
 	instance?: string
-	type: string
+	type: 'sqlite' | 'lru'
 }) {
 	const fetcher = useFetcher()
 	const dc = useDoubleCheck()
+	const encodedKey = encodeURIComponent(cacheKey)
+	const valuePage = `/admin/cache/${type}/${encodedKey}?instance=${instance}`
 	return (
 		<div className="flex items-center gap-2 font-mono">
 			<fetcher.Form method="post">
@@ -211,13 +214,9 @@ function CacheKeyRow({
 						: 'Deleting...'}
 				</Button>
 			</fetcher.Form>
-			<a
-				href={`/admin/cache/${type}/${encodeURIComponent(
-					cacheKey,
-				)}?instance=${instance}`}
-			>
+			<Link reloadDocument to={valuePage}>
 				{cacheKey}
-			</a>
+			</Link>
 		</div>
 	)
 }