Merge pull request #9250 from Couchers-org/web/chore/eslint-9-flat-config

web: upgrade ESLint to v9 with flat config

Author: kevinortiz43

.vscode/settings.json

@@ -55,7 +55,6 @@
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
   "files.trimTrailingWhitespace": true,
-  "eslint.useFlatConfig": false,
   "python-env.workspaceSearchPaths": [ "app/backend/.venv" ],
   "python.testing.cwd": "app/backend/src/tests",
   "python.testing.unittestEnabled": false,

app/web/.eslintignore

@@ -0,0 +1,102 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import tsParser from "@typescript-eslint/parser";
+import prettier from "eslint-config-prettier/flat";
+import jsonc from "eslint-plugin-jsonc";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import unusedImports from "eslint-plugin-unused-imports";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+const config = [
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "coverage/**",
+      "package-lock.json",
+      "next-env.d.ts",
+      "proto/**",
+    ],
+  },
+  // eslint 9 flipped this default to "warn";
+  {
+    linterOptions: { reportUnusedDisableDirectives: "warn" },
+  },
+
+  // both legacy extends must go through the same FlatCompat instance so the
+  // @typescript-eslint plugin resolves to one module object ("Cannot redefine
+  // plugin" otherwise)
+
+  // Come back to this after we upgrade next.js https://github.com/Couchers-org/couchers/issues/9280
+  ...compat.extends(
+    "plugin:@typescript-eslint/recommended",
+    "next/core-web-vitals",
+  ),
+  prettier,
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+      "unused-imports": unusedImports,
+    },
+    rules: {
+      // ~~~ settings for simple import sort plugin ~~~
+      "simple-import-sort/imports": "warn",
+      "simple-import-sort/exports": "warn",
+      "sort-imports": "off",
+      "import/order": "off",
+      "import/first": "warn",
+      "import/newline-after-import": "warn",
+      "import/no-duplicates": "warn",
+
+      // ~~~ setings for unused imports plugin ~~~
+      "unused-imports/no-unused-imports": "warn",
+
+      // ~~~ custom couchers settings ~~~
+      //allow theme to be unused in makeStyles
+      "@typescript-eslint/no-unused-vars": "off",
+      "no-unused-vars": "off",
+      "unused-imports/no-unused-vars": [
+        "warn",
+        {
+          argsIgnorePattern: "theme",
+          varsIgnorePattern: "classes|useStyles",
+        },
+      ],
+      //good in theory, but ts isn't perfect and library types can be wrong
+      "@typescript-eslint/ban-ts-comment": "off",
+      //better avoided but useful for gRPC
+      "@typescript-eslint/no-non-null-assertion": "off",
+      //used in testing
+      "@typescript-eslint/no-empty-function": "off",
+      //not using this right now
+      "@next/next/no-img-element": "off",
+
+      "react/no-unescaped-entities": "off",
+      // Prefer inferred types so that the code is as close to JS as possible
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+    },
+  },
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+    languageOptions: { parser: tsParser },
+  },
+  // the jsonc preset is pinned to **/*.json: unpinned it would also grab
+  // .json5/.jsonc, and without files globs `eslint .` wouldn't lint json at all
+  ...jsonc.configs["flat/recommended-with-json"].map((config) => ({
+    ...config,
+    files: ["**/*.json"],
+  })),
+  {
+    files: ["**/*.json"],
+    rules: { "jsonc/no-comments": "off" },
+  },
+];
+
+export default config;

app/web/.eslintrc.json

@@ -72,7 +72,6 @@ export default function DashboardMyPublicTrips() {
 
   useEffect(() => {
     updateScrollState();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeTrips.length, isLoading]);
 
   const scroll = (dir: 1 | -1) => {

app/web/eslint.config.mjs

@@ -44,7 +44,7 @@ describe("updateUserProfile action", () => {
       pronouns,
       thingsILike,
     } = defaultUser;
-    /* eslint-disable sort-keys */
+
     const newUserProfileData: UpdateUserProfileData = {
       // Unchanged data
       aboutMe,
@@ -82,7 +82,7 @@ describe("updateUserProfile action", () => {
         ],
       },
     };
-    /* eslint-enable sort-keys */
+
     updateProfileMock.mockResolvedValue(new Empty());
 
     const { result } = renderHook(() => useUpdateUserProfile(), {

app/web/features/dashboard/DashboardMyPublicTrips.tsx

@@ -77,7 +77,6 @@ export default function PublicTripsOverview({
 
   useEffect(() => {
     updateScrollState();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [trips.length, isLoading]);
 
   const scroll = (dir: 1 | -1) => {

app/web/features/profile/hooks/useUpdateUserProfile.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-interface */
 declare module "@mui/private-theming" {
   import type { Theme } from "@mui/material/styles";
 

app/web/features/publicTrips/PublicTripsOverview.tsx

@@ -10,13 +10,13 @@
     "injectsourcemaps": "sentry-cli sourcemaps inject .next/",
     "dev": "next dev",
     "start": "yarn dev",
-    "format": "prettier --write '**/*.{ts,tsx,js,jsx,json,css}' && eslint . --ext .ts,.tsx,.js,.jsx,.json --fix",
+    "format": "prettier --write '**/*.{ts,tsx,js,jsx,json,css}' && eslint . --fix",
     "format:check": "prettier --check '**/*.{ts,tsx,js,jsx,json,css}'",
     "create-translation-files": "node scripts/create-translation-files.js",
     "delete-translation-files": "node scripts/delete-translation-files.js",
     "jest": "jest --modulePaths=.",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.json",
-    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.json --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "serve": "next start",
     "test-ci": "tsc && cross-env NEXT_PUBLIC_API_BASE_URL=http://localhost:8888 CI=true TZ=UTC jest --runInBand --coverageReporters=\"cobertura\" --coverageReporters=\"lcov\" --reporters=\"default\" --reporters=\"jest-junit\" --coverage",
     "test": "cross-env NEXT_PUBLIC_API_BASE_URL=http://localhost:8888 TZ=UTC jest",
@@ -75,6 +75,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
+    "@eslint/eslintrc": "3.3.6",
+    "@eslint/js": "9.39.5",
     "@next/bundle-analyzer": "^16.2.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -95,7 +97,7 @@
     "babel-jest": "^30.4.1",
     "cross-env": "^10.1.0",
     "css-mediaquery": "^0.1.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.39.4",
     "eslint-config-next": "^15.5.7",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsonc": "^2.21.1",

app/web/index.d.ts

@@ -13,7 +13,7 @@ describe("AuthInterceptor", () => {
   it("calls a set UnauthenticatedErrorHandler on unauthenticated error", async () => {
     const errorHandler = jest.fn();
     const invokerMock = jest.fn(() => {
-      throw { code: StatusCode.UNAUTHENTICATED, message: "Unauthenticated" }; //eslint-disable-line no-throw-literal
+      throw { code: StatusCode.UNAUTHENTICATED, message: "Unauthenticated" };
     });
     const interceptor = new AuthInterceptor();
     setUnauthenticatedErrorHandler(errorHandler);
@@ -24,7 +24,7 @@ describe("AuthInterceptor", () => {
   it("throws on an error that isn't an unauthenticated error", async () => {
     const errorHandler = jest.fn();
     const invokerMock = jest.fn(() => {
-      throw { code: StatusCode.NOT_FOUND, message: "Not found" }; //eslint-disable-line no-throw-literal
+      throw { code: StatusCode.NOT_FOUND, message: "Not found" };
     });
     const interceptor = new AuthInterceptor();
     setUnauthenticatedErrorHandler(errorHandler);