Enforce import sorting in CI

eslint.config.js

@@ -1,4 +1,5 @@
 import js from "@eslint/js";
+import importPlugin from "eslint-plugin-import";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
@@ -23,6 +24,7 @@ export default tseslint.config(
       react,
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
+      import: importPlugin,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
@@ -43,11 +45,41 @@ export default tseslint.config(
       "@typescript-eslint/no-explicit-any": "warn",
       "no-console": "warn",
       "prefer-const": "error",
+      "import/order": [
+        "error",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+          ],
+          pathGroups: [
+            {
+              pattern: "src/**",
+              group: "internal",
+              position: "before",
+            },
+          ],
+          pathGroupsExcludedImportTypes: ["builtin"],
+          "newlines-between": "always",
+          alphabetize: {
+            order: "asc",
+            caseInsensitive: true,
+          },
+        },
+      ],
     },
     settings: {
       react: {
         version: "18.2",
       },
+      "import/resolver": {
+        typescript: true,
+        node: true,
+      },
     },
   }
 );

package.json

@@ -36,6 +36,8 @@
     "@types/styled-components": "^5.1.25",
     "@vitejs/plugin-react": "^5.0.2",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",

src/apiClient/approvals.ts

@@ -1,4 +1,5 @@
 import { toIsoDate } from "src/lib/fmtDate";
+
 import { request } from "./client";
 import { GearTypeWithShorthand } from "./gear";
 import { PersonBase } from "./people";

src/components/GearLink.tsx

@@ -1,4 +1,5 @@
 import { LinkProps } from "react-router-dom";
+
 import { gearDbApi } from "src/redux/api";
 
 import { PrefetchLink } from "./PrefetchLink";

src/components/GearLocationSelect.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import Select, { MultiValue } from "react-select";
 
-import { useGetGearLocationsQuery } from "src/redux/api";
 import { GearLocation } from "src/apiClient/gear";
+import { useGetGearLocationsQuery } from "src/redux/api";
 
 type GearLocationOption = GearLocation & {
   value: number;

src/components/Notes.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 
-import { formatDateTime } from "src/lib/fmtDate";
 import type { Person } from "src/apiClient/people";
-import { TextArea } from "src/components/Inputs/TextArea";
 import { ToggleExpandButton, ArchiveButton } from "src/components/Buttons";
+import { TextArea } from "src/components/Inputs/TextArea";
+import { formatDateTime } from "src/lib/fmtDate";
 
 type Props = {
   notes: Person["notes"];

src/components/PrefetchLink.tsx

@@ -1,9 +1,6 @@
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Link, LinkProps } from "react-router-dom";
 
-import { useEffect } from "react";
-import { useCallback } from "react";
-
 type Props = {
   id: string;
   fetchAction: () => void;

src/components/useDebounce.ts

@@ -1,5 +1,5 @@
-import { useMemo, useState } from "react";
 import { debounce } from "lodash";
+import { useMemo, useState } from "react";
 
 export function useDebounce<T extends (...args: any) => any>(
   fn: T,