Simplify ESLint Config (#261)

brophdawg11 · web-flow · commit 521a3cb5e90c · 2023-10-12T11:32:45.000-04:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,22 +1,135 @@
+/**
+ * This is intended to be a basic starting point for linting in the Indie Stack.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  extends: [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "@remix-run/eslint-config/jest-testing-library",
-    "prettier",
-  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
   env: {
-    "cypress/globals": true,
+    browser: true,
+    commonjs: true,
+    es6: true,
   },
-  plugins: ["cypress"],
-  // we're using vitest which has a very similar API to jest
-  // (so the linting plugins work nicely), but it means we have to explicitly
-  // set the jest version.
-  settings: {
-    jest: {
-      version: 28,
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:jsx-a11y/recommended",
+        "prettier",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+      },
+      rules: {
+        "react/jsx-no-leaked-render": [
+          "warn",
+          { validStrategies: ["ternary"] },
+        ],
+      },
     },
-  },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/stylistic",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+        "prettier",
+      ],
+      rules: {
+        "import/order": [
+          "error",
+          {
+            alphabetize: { caseInsensitive: true, order: "asc" },
+            groups: ["builtin", "external", "internal", "parent", "sibling"],
+            "newlines-between": "always",
+          },
+        ],
+      },
+    },
+
+    // Markdown
+    {
+      files: ["**/*.md"],
+      plugins: ["markdown"],
+      extends: ["plugin:markdown/recommended", "prettier"],
+    },
+
+    // Jest/Vitest
+    {
+      files: ["**/*.test.{js,jsx,ts,tsx}"],
+      plugins: ["jest", "jest-dom", "testing-library"],
+      extends: [
+        "plugin:jest/recommended",
+        "plugin:jest-dom/recommended",
+        "plugin:testing-library/react",
+        "prettier",
+      ],
+      env: {
+        "jest/globals": true,
+      },
+      settings: {
+        jest: {
+          // we're using vitest which has a very similar API to jest
+          // (so the linting plugins work nicely), but it means we have to explicitly
+          // set the jest version.
+          version: 28,
+        },
+      },
+    },
+
+    // Cypress
+    {
+      files: ["cypress/**/*.ts"],
+      plugins: ["cypress"],
+      extends: ["plugin:cypress/recommended", "prettier"],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js", "mocks/**/*.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };
diff --git a/.eslintrc.repo.js b/.eslintrc.repo.js
diff --git a/.github/workflows/lint-repo.yml b/.github/workflows/lint-repo.yml
@@ -30,4 +30,4 @@ jobs:
         run: npm install
 
       - name: 🔬 Lint
-        run: npm run lint:repo
+        run: npm run lint
diff --git a/app/models/user.server.ts b/app/models/user.server.ts
@@ -56,6 +56,7 @@ export async function verifyLogin(
     return null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { password: _password, ...userWithoutPassword } = userWithPassword;
 
   return userWithoutPassword;
diff --git a/app/routes/join.tsx b/app/routes/join.tsx
@@ -100,6 +100,7 @@ export default function Join() {
                 ref={emailRef}
                 id="email"
                 required
+                // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus={true}
                 name="email"
                 type="email"
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
@@ -95,6 +95,7 @@ export default function LoginPage() {
                 ref={emailRef}
                 id="email"
                 required
+                // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus={true}
                 name="email"
                 type="email"
@@ -160,7 +161,7 @@ export default function LoginPage() {
               </label>
             </div>
             <div className="text-center text-sm text-gray-500">
-              Don't have an account?{" "}
+              Don&apos;t have an account?{" "}
               <Link
                 className="text-blue-500 underline"
                 to={{
diff --git a/app/singleton.server.ts b/app/singleton.server.ts
@@ -6,8 +6,8 @@ export const singleton = <Value>(
   name: string,
   valueFactory: () => Value,
 ): Value => {
-  const g = global as any;
+  const g = global as unknown as { __singletons: Record<string, unknown> };
   g.__singletons ??= {};
   g.__singletons[name] ??= valueFactory();
-  return g.__singletons[name];
+  return g.__singletons[name] as Value;
 };
diff --git a/app/utils.ts b/app/utils.ts
@@ -44,8 +44,13 @@ export function useMatchesData(
   return route?.data as Record<string, unknown>;
 }
 
-function isUser(user: any): user is User {
-  return user && typeof user === "object" && typeof user.email === "string";
+function isUser(user: unknown): user is User {
+  return (
+    user != null &&
+    typeof user === "object" &&
+    "email" in user &&
+    typeof user.email === "string"
+  );
 }
 
 export function useOptionalUser(): User | undefined {
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -1,6 +1,7 @@
 import { faker } from "@faker-js/faker";
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
       /**
@@ -85,7 +86,7 @@ function deleteUserByEmail(email: string) {
 // Also added custom types to avoid getting detached
 // https://github.com/cypress-io/cypress/issues/7306#issuecomment-1152752612
 // ===========================================================
-function visitAndCheck(url: string, waitTime: number = 1000) {
+function visitAndCheck(url: string, waitTime = 1000) {
   cy.visit(url);
   cy.location("pathname").should("contain", url).wait(waitTime);
 }
diff --git a/package.json b/package.json
@@ -7,9 +7,8 @@
     "dev": "remix dev -c \"npm run dev:serve\"",
     "dev:serve": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
     "format": "prettier --write .",
-    "format:repo": "npm run format && npm run lint:repo -- --fix",
+    "format:repo": "npm run format && npm run lint -- --fix",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
-    "lint:repo": "npm run lint -- --config .eslintrc.repo.js",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
     "start": "remix-serve ./build/index.js",
     "start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
@@ -41,26 +40,33 @@
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
     "@remix-run/dev": "*",
-    "@remix-run/eslint-config": "*",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@types/bcryptjs": "^2.4.2",
     "@types/eslint": "^8.44.2",
     "@types/node": "^18.17.6",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.2",
     "autoprefixer": "^10.4.15",
     "binode": "^1.0.5",
     "cookie": "^0.5.0",
     "cross-env": "^7.0.3",
     "cypress": "12.17.3",
-    "eslint": "^8.47.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-prefer-let": "^3.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-testing-library": "^6.0.2",
     "happy-dom": "^10.10.4",
     "msw": "^1.2.3",
     "npm-run-all": "^4.1.5",
@@ -72,7 +78,7 @@
     "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^3.6.0",
     "vitest": "^0.34.2"
diff --git a/remix.init/index.js b/remix.init/index.js
@@ -56,30 +56,17 @@ const getPackageManagerVersion = (packageManager) =>
 
 const getRandomString = (length) => crypto.randomBytes(length).toString("hex");
 
-const removeUnusedDependencies = (dependencies, unusedDependencies) =>
-  Object.fromEntries(
-    Object.entries(dependencies).filter(
-      ([key]) => !unusedDependencies.includes(key),
-    ),
-  );
-
 const updatePackageJson = ({ APP_NAME, packageJson }) => {
   const {
-    devDependencies,
     scripts: {
+      // eslint-disable-next-line no-unused-vars
       "format:repo": _repoFormatScript,
-      "lint:repo": _repoLintScript,
       ...scripts
     },
   } = packageJson.content;
 
   packageJson.update({
     name: APP_NAME,
-    devDependencies: removeUnusedDependencies(
-      devDependencies,
-      // packages that are only used for linting the repo
-      ["eslint-plugin-markdown", "eslint-plugin-prefer-let"],
-    ),
     scripts,
   });
 };
@@ -190,13 +177,12 @@ const main = async ({ packageManager, rootDirectory }) => {
     fs.rm(path.join(rootDirectory, ".github", "workflows", "no-response.yml")),
     fs.rm(path.join(rootDirectory, ".github", "dependabot.yml")),
     fs.rm(path.join(rootDirectory, ".github", "PULL_REQUEST_TEMPLATE.md")),
-    fs.rm(path.join(rootDirectory, ".eslintrc.repo.js")),
     fs.rm(path.join(rootDirectory, "LICENSE.md")),
   ]);
 
   execSync(pm.run("setup"), { cwd: rootDirectory, stdio: "inherit" });
 
-  execSync(pm.run("format", "--loglevel warn"), {
+  execSync(pm.run("format", "--log-level warn"), {
     cwd: rootDirectory,
     stdio: "inherit",
   });

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@ export async function verifyLogin(`
`56`	`56`	`return null;`
`57`	`57`	`}`
`58`	`58`
	`59`	`+ // eslint-disable-next-line @typescript-eslint/no-unused-vars`
`59`	`60`	`const { password: _password, ...userWithoutPassword } = userWithPassword;`
`60`	`61`
`61`	`62`	`return userWithoutPassword;`
Original file line number	Diff line number	Diff line change
`@@ -44,8 +44,13 @@ export function useMatchesData(`
`44`	`44`	`return route?.data as Record<string, unknown>;`
`45`	`45`	`}`
`46`	`46`
`47`		`-function isUser(user: any): user is User {`
`48`		`- return user && typeof user === "object" && typeof user.email === "string";`
	`47`	`+function isUser(user: unknown): user is User {`
	`48`	`+ return (`
	`49`	`+ user != null &&`
	`50`	`+ typeof user === "object" &&`
	`51`	`+ "email" in user &&`
	`52`	`+ typeof user.email === "string"`
	`53`	`+ );`
`49`	`54`	`}`
`50`	`55`
`51`	`56`	`export function useOptionalUser(): User \| undefined {`