Simplify ESLint configuration (#172)

.eslintrc.cjs

@@ -1,22 +1,140 @@
-/** @type {import('@types/eslint').Linter.BaseConfig} */
+/**
+ * This is intended to be a basic starting point for linting in the Grunge 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 set the jest version explicitly.
-  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",
+        "plugin-remix.js",
+        "remix.config.js",
+        "mocks/**/*.js",
+      ],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

.github/workflows/lint-repo.yml

@@ -30,4 +30,4 @@ jobs:
         run: npm install
 
       - name: 🔬 Lint
-        run: npm run lint:repo
+        run: npm run lint

app/models/note.server.ts

@@ -3,17 +3,17 @@ import { createId } from "@paralleldrive/cuid2";
 
 import type { User } from "./user.server";
 
-export type Note = {
+export interface Note {
   id: ReturnType<typeof createId>;
   userId: User["id"];
   title: string;
   body: string;
-};
+}
 
-type NoteItem = {
+interface NoteItem {
   pk: User["id"];
   sk: `note#${Note["id"]}`;
-};
+}
 
 const skToId = (sk: NoteItem["sk"]): Note["id"] => sk.replace(/^note#/, "");
 const idToSk = (id: Note["id"]): NoteItem["sk"] => `note#${id}`;
@@ -39,14 +39,15 @@ export async function getNote({
 
 export async function getNoteListItems({
   userId,
-}: Pick<Note, "userId">): Promise<Array<Pick<Note, "id" | "title">>> {
+}: Pick<Note, "userId">): Promise<Pick<Note, "id" | "title">[]> {
   const db = await arc.tables();
 
   const result = await db.note.query({
     KeyConditionExpression: "pk = :pk",
     ExpressionAttributeValues: { ":pk": userId },
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return result.Items.map((n: any) => ({
     title: n.title,
     id: skToId(n.sk),

app/models/user.server.ts

@@ -2,8 +2,13 @@ import arc from "@architect/functions";
 import bcrypt from "bcryptjs";
 import invariant from "tiny-invariant";
 
-export type User = { id: `email#${string}`; email: string };
-export type Password = { password: string };
+export interface User {
+  id: `email#${string}`;
+  email: string;
+}
+export interface Password {
+  password: string;
+}
 
 export async function getUserById(id: User["id"]): Promise<User | null> {
   const db = await arc.tables();

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"

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={{

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 {

cypress/support/commands.ts

@@ -1,7 +1,9 @@
 import { faker } from "@faker-js/faker";
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface Chainable {
       /**
        * Logs in with a random user. Yields the user and adds an alias to the user
@@ -44,7 +46,7 @@ function login({
 // 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);
 }

package.json

@@ -7,9 +7,8 @@
     "build": "remix build",
     "dev": "remix dev --manual -c \"arc sandbox -e testing\"",
     "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.cjs",
     "start": "cross-env NODE_ENV=production arc sandbox",
     "test": "vitest",
     "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
@@ -40,7 +39,6 @@
   "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/architect__functions": "^3.13.7",
@@ -49,17 +47,25 @@
     "@types/node": "^18.17.6",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.2",
     "autoprefixer": "^10.4.15",
     "cross-env": "^7.0.3",
     "cypress": "12.17.3",
     "esbuild": "^0.19.2",
-    "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.2",
+    "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",
     "mock-aws-s3": "^4.0.2",
     "msw": "^1.2.3",