Upgrade ESLint v9 to v10 and replace React plugins with @eslint-react

- Bump eslint to ^10.0.2 and @eslint/js to ^10.0.1
- Replace eslint-plugin-react + eslint-plugin-react-hooks with
  @eslint-react/eslint-plugin (recommended-type-checked config)
- Use globalIgnores() for idiomatic v10 global ignore patterns
- Fix preserve-caught-error violations (new v10 recommended rule)
  by adding { cause } to re-thrown errors in catch blocks
- Fix @eslint-react naming-convention warnings: rename refs to
  use Ref suffix, rename useState destructuring to match convention
- Give LogEntry objects stable IDs so WorkspaceLogs avoids
  array-index-key; derive ActionMenu keys in a pre-processing step
- Disable package-json rules that don't apply to VS Code extensions
  (scoped to root only so workspace packages are fully linted)

Author: EhabY

eslint.config.mjs

@@ -1,30 +1,26 @@
 // @ts-check
 import eslint from "@eslint/js";
-import { defineConfig } from "eslint/config";
+import { defineConfig, globalIgnores } from "eslint/config";
 import markdown from "@eslint/markdown";
 import tseslint from "typescript-eslint";
 import prettierConfig from "eslint-config-prettier";
 import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
 import { flatConfigs as importXFlatConfigs } from "eslint-plugin-import-x";
 import packageJson from "eslint-plugin-package-json";
-import reactPlugin from "eslint-plugin-react";
-import reactHooksPlugin from "eslint-plugin-react-hooks";
+import eslintReact from "@eslint-react/eslint-plugin";
 import globals from "globals";
 
 export default defineConfig(
-	// Global ignores
-	{
-		ignores: [
-			"out/**",
-			"dist/**",
-			"packages/*/dist/**",
-			"**/*.d.ts",
-			"vitest.config.ts",
-			"**/vite.config*.ts",
-			"**/createWebviewConfig.ts",
-			".vscode-test/**",
-		],
-	},
+	globalIgnores([
+		"out/**",
+		"dist/**",
+		"packages/*/dist/**",
+		"**/*.d.ts",
+		"vitest.config.ts",
+		"**/vite.config*.ts",
+		"**/createWebviewConfig.ts",
+		".vscode-test/**",
+	]),
 
 	// Base ESLint recommended rules (for JS/TS/TSX files only)
 	{
@@ -176,38 +172,31 @@ export default defineConfig(
 		},
 	},
 
-	// React hooks and compiler rules (covers .ts hook files too)
+	// React rules with type-checked analysis (covers hooks, JSX, DOM)
 	{
 		files: ["packages/**/*.{ts,tsx}"],
-		...reactHooksPlugin.configs.flat.recommended,
+		extends: [eslintReact.configs["recommended-type-checked"]],
 		rules: {
-			...reactHooksPlugin.configs.flat.recommended.rules,
 			// React Compiler auto-memoizes; exhaustive-deps false-positives on useCallback
-			"react-hooks/exhaustive-deps": "off",
+			"@eslint-react/exhaustive-deps": "off",
 		},
 	},
 
-	// TSX files - React JSX rules
+	// Package.json linting
+	packageJson.configs.recommended,
 	{
-		files: ["**/*.tsx"],
-		plugins: {
-			react: reactPlugin,
-		},
-		settings: {
-			react: {
-				version: "detect",
-			},
-		},
+		// The root package.json is a VS Code extension (not an npm package),
+		// so these publishing-oriented rules don't apply.
+		files: ["package.json"],
+		ignores: ["packages/**/package.json"],
 		rules: {
-			...reactPlugin.configs.recommended.rules,
-			...reactPlugin.configs["jsx-runtime"].rules, // React 17+ JSX transform
-			"react/prop-types": "off", // Using TypeScript
+			"package-json/require-exports": "off",
+			"package-json/require-files": "off",
+			"package-json/require-sideEffects": "off",
+			"package-json/require-attribution": "off",
 		},
 	},
 
-	// Package.json linting
-	packageJson.configs.recommended,
-
 	// Markdown linting with GitHub-flavored admonitions allowed
 	...markdown.configs.recommended,
 	{

package.json

@@ -489,7 +489,8 @@
 		"zod": "^4.3.6"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.39.2",
+		"@eslint-react/eslint-plugin": "^2.13.0",
+		"@eslint/js": "^10.0.1",
 		"@eslint/markdown": "^7.5.1",
 		"@tanstack/react-query": "catalog:",
 		"@testing-library/jest-dom": "^6.9.1",
@@ -518,13 +519,11 @@
 		"dayjs": "^1.11.19",
 		"electron": "^40.6.1",
 		"esbuild": "^0.27.3",
-		"eslint": "^9.39.2",
+		"eslint": "^10.0.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-import-resolver-typescript": "^4.4.4",
 		"eslint-plugin-import-x": "^4.16.1",
 		"eslint-plugin-package-json": "^0.89.2",
-		"eslint-plugin-react": "^7.37.5",
-		"eslint-plugin-react-hooks": "^7.0.1",
 		"globals": "^17.4.0",
 		"jsdom": "^28.1.0",
 		"jsonc-eslint-parser": "^3.1.0",

packages/tasks/src/components/ActionMenu.tsx

@@ -74,39 +74,44 @@ export function ActionMenu({ items }: ActionMenuProps) {
 					tabIndex={-1}
 					onKeyDown={(e) => isEscape(e) && close()}
 				>
-					{items.map((item, index) =>
-						item.separator ? (
-							<div
-								key={`sep-${index}`}
-								className="action-menu-separator"
-								role="separator"
-							/>
-						) : (
-							<button
-								key={`${item.label}-${index}`}
-								type="button"
-								className={[
-									"action-menu-item",
-									item.danger && "danger",
-									item.loading && "loading",
-								]
-									.filter(Boolean)
-									.join(" ")}
-								onClick={() => {
-									item.onClick();
-									close();
-								}}
-								disabled={item.disabled === true || item.loading === true}
-							>
-								{item.loading ? (
-									<VscodeProgressRing className="action-menu-spinner" />
-								) : (
-									<VscodeIcon name={item.icon} className="action-menu-icon" />
-								)}
-								<span>{item.label}</span>
-							</button>
-						),
-					)}
+					{items
+						.map((item, i) => ({
+							item,
+							key: item.separator ? `separator-${i}` : `${item.label}-${i}`,
+						}))
+						.map(({ item, key }) =>
+							item.separator ? (
+								<div
+									key={key}
+									className="action-menu-separator"
+									role="separator"
+								/>
+							) : (
+								<button
+									key={key}
+									type="button"
+									className={[
+										"action-menu-item",
+										item.danger && "danger",
+										item.loading && "loading",
+									]
+										.filter(Boolean)
+										.join(" ")}
+									onClick={() => {
+										item.onClick();
+										close();
+									}}
+									disabled={item.disabled === true || item.loading === true}
+								>
+									{item.loading ? (
+										<VscodeProgressRing className="action-menu-spinner" />
+									) : (
+										<VscodeIcon name={item.icon} className="action-menu-icon" />
+									)}
+									<span>{item.label}</span>
+								</button>
+							),
+						)}
 				</div>
 			)}
 		</div>

packages/tasks/src/components/WorkspaceLogs.tsx

@@ -19,7 +19,7 @@ export function WorkspaceLogs({ task }: { task: Task }) {
 			{lines.length === 0 ? (
 				<LogViewerPlaceholder>Waiting for logs...</LogViewerPlaceholder>
 			) : (
-				lines.map((line, i) => <LogLine key={i}>{line}</LogLine>)
+				lines.map((entry) => <LogLine key={entry.id}>{entry.text}</LogLine>)
 			)}
 		</LogViewer>
 	);

packages/tasks/src/hooks/useFollowScroll.ts

@@ -17,7 +17,7 @@ interface ScrollableElement extends HTMLElement {
  */
 export function useFollowScroll(): RefObject<HTMLDivElement | null> {
 	const ref = useRef<HTMLDivElement>(null);
-	const atBottom = useRef(true);
+	const atBottomRef = useRef(true);
 
 	useEffect(() => {
 		const sentinel = ref.current;
@@ -28,7 +28,7 @@ export function useFollowScroll(): RefObject<HTMLDivElement | null> {
 		const container = parent as ScrollableElement;
 
 		function onScroll() {
-			atBottom.current =
+			atBottomRef.current =
 				container.scrollMax - container.scrollPos <= BOTTOM_THRESHOLD;
 		}
 
@@ -41,7 +41,7 @@ export function useFollowScroll(): RefObject<HTMLDivElement | null> {
 		});
 
 		const mo = new MutationObserver(() => {
-			if (atBottom.current) {
+			if (atBottomRef.current) {
 				scrollToBottom();
 			}
 		});

packages/tasks/src/hooks/useWorkspaceLogs.ts

@@ -2,14 +2,19 @@ import { useEffect, useState } from "react";
 
 import { useTasksApi } from "./useTasksApi";
 
+export interface LogEntry {
+	id: number;
+	text: string;
+}
+
 /**
  * Subscribes to workspace log lines pushed from the extension.
  * Batches updates per animation frame to avoid excessive re-renders
  * when many lines arrive in quick succession.
  */
-export function useWorkspaceLogs(): string[] {
+export function useWorkspaceLogs(): LogEntry[] {
 	const { onWorkspaceLogsAppend, stopStreamingWorkspaceLogs } = useTasksApi();
-	const [lines, setLines] = useState<string[]>([]);
+	const [lines, setLines] = useState<LogEntry[]>([]);
 
 	useEffect(() => {
 		let pending: string[] = [];
@@ -22,7 +27,13 @@ export function useWorkspaceLogs(): string[] {
 					const batch = pending;
 					pending = [];
 					frame = 0;
-					setLines((prev) => prev.concat(batch));
+					setLines((prev) => {
+						const entries = batch.map((text, i) => ({
+							id: prev.length + i,
+							text,
+						}));
+						return prev.concat(entries);
+					});
 				});
 			}
 		});

packages/webview-shared/src/react/hooks.ts

@@ -22,7 +22,7 @@ export function useMessage<T>(handler: (message: T) => void): void {
  * Hook to manage webview state with VS Code's state API
  */
 export function useVsCodeState<T>(initialState: T): [T, (state: T) => void] {
-	const [state, setLocalState] = useState<T>((): T => {
+	const [localState, setLocalState] = useState<T>((): T => {
 		const saved = getState<T>();
 		return saved ?? initialState;
 	});
@@ -32,5 +32,5 @@ export function useVsCodeState<T>(initialState: T): [T, (state: T) => void] {
 		setState(newState);
 	}, []);
 
-	return [state, setVsCodeState];
+	return [localState, setVsCodeState];
 }

packages/webview-shared/src/react/useIpc.ts

@@ -43,20 +43,20 @@ type NotificationHandler = (data: unknown) => void;
  */
 export function useIpc(options: UseIpcOptions = {}) {
 	const { timeoutMs = DEFAULT_TIMEOUT_MS } = options;
-	const pendingRequests = useRef<Map<string, PendingRequest>>(new Map());
-	const notificationHandlers = useRef<Map<string, Set<NotificationHandler>>>(
+	const pendingRequestsRef = useRef<Map<string, PendingRequest>>(new Map());
+	const notificationHandlersRef = useRef<Map<string, Set<NotificationHandler>>>(
 		new Map(),
 	);
 
 	// Cleanup on unmount
 	useEffect(() => {
 		return () => {
-			for (const req of pendingRequests.current.values()) {
+			for (const req of pendingRequestsRef.current.values()) {
 				clearTimeout(req.timeout);
 				req.reject(new Error("Component unmounted"));
 			}
-			pendingRequests.current.clear();
-			notificationHandlers.current.clear();
+			pendingRequestsRef.current.clear();
+			notificationHandlersRef.current.clear();
 		};
 	}, []);
 
@@ -71,11 +71,11 @@ export function useIpc(options: UseIpcOptions = {}) {
 
 			// Response handling (has requestId + success)
 			if ("requestId" in msg && "success" in msg) {
-				const pending = pendingRequests.current.get(msg.requestId);
+				const pending = pendingRequestsRef.current.get(msg.requestId);
 				if (!pending) return;
 
 				clearTimeout(pending.timeout);
-				pendingRequests.current.delete(msg.requestId);
+				pendingRequestsRef.current.delete(msg.requestId);
 
 				if (msg.success) {
 					pending.resolve(msg.data);
@@ -87,7 +87,7 @@ export function useIpc(options: UseIpcOptions = {}) {
 
 			// Notification handling (has type, no requestId)
 			if ("type" in msg && !("requestId" in msg)) {
-				const handlers = notificationHandlers.current.get(msg.type);
+				const handlers = notificationHandlersRef.current.get(msg.type);
 				if (handlers) {
 					for (const h of handlers) {
 						h(msg.data);
@@ -113,13 +113,13 @@ export function useIpc(options: UseIpcOptions = {}) {
 
 		return new Promise((resolve, reject) => {
 			const timeout = setTimeout(() => {
-				if (pendingRequests.current.has(requestId)) {
-					pendingRequests.current.delete(requestId);
+				if (pendingRequestsRef.current.has(requestId)) {
+					pendingRequestsRef.current.delete(requestId);
 					reject(new Error(`Request timeout: ${definition.method}`));
 				}
 			}, timeoutMs);
 
-			pendingRequests.current.set(requestId, {
+			pendingRequestsRef.current.set(requestId, {
 				resolve: resolve as (value: unknown) => void,
 				reject,
 				timeout,
@@ -162,20 +162,20 @@ export function useIpc(options: UseIpcOptions = {}) {
 		callback: (data: D) => void,
 	): () => void {
 		const method = definition.method;
-		let handlers = notificationHandlers.current.get(method);
+		let handlers = notificationHandlersRef.current.get(method);
 		if (!handlers) {
 			handlers = new Set();
-			notificationHandlers.current.set(method, handlers);
+			notificationHandlersRef.current.set(method, handlers);
 		}
 		handlers.add(callback as NotificationHandler);
 
 		// Return unsubscribe function
 		return () => {
-			const h = notificationHandlers.current.get(method);
+			const h = notificationHandlersRef.current.get(method);
 			if (h) {
 				h.delete(callback as NotificationHandler);
 				if (h.size === 0) {
-					notificationHandlers.current.delete(method);
+					notificationHandlersRef.current.delete(method);
 				}
 			}
 		};