Add extension typecheck workflow and enhance lint workflow (#604)

## Changes

Enhanced linting and typecheck in `vscode-extension`

#### Typecheck 

- typecheck CI workflow to run on changes in `vscode-extension`
- added default `replaysEnabled: false` to `ProjectContextProps` in
`ProjectProvider.tsx` (typecheck was failing because it was missing)

#### Lint

- `eslint` is now run also on `.tsx/.js/.jsx` files, so I fixed issues
in them
- fixed `prettier --check` in CI which was not working
- fixed some lint warnings about `!=` instead of `!==`
- added `no-unused-vars` rule to `eslint` to prevent unused imports and
variables, fixed issues that have been found
- set `{ args: none }` in `no-unused-vars` rule because we have some
functions with arguments that are not used - but I didn't want to change
any interfaces

.github/workflows/typecheck-extension.yml

@@ -0,0 +1,37 @@
+name: Typecheck vscode-extension
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - ".github/workflows/typecheck-extension.yml"
+      - "packages/vscode-extension/**"
+  pull_request:
+    paths:
+      - ".github/workflows/typecheck-extension.yml"
+      - "packages/vscode-extension/**"
+
+jobs:
+  check:
+    if: github.repository == 'software-mansion/radon-ide'
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: packages/vscode-extension
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+          cache-dependency-path: packages/vscode-extension/package-lock.json
+
+      - name: Install node dependencies
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: npm i
+
+      - name: Typecheck extension
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: npm run typecheck

packages/vscode-extension/.eslintrc.json

@@ -7,13 +7,20 @@
   },
   "plugins": ["@typescript-eslint", "import"],
   "rules": {
-    "@typescript-eslint/naming-convention": "off",
-    "@typescript-eslint/semi": "warn",
     "curly": "warn",
     "eqeqeq": "warn",
     "no-throw-literal": "warn",
     "semi": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/semi": "warn",
     "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "^_",
+        "args": "none"
+      }
+    ],
     "import/order": ["warn", { "groups": ["builtin", "external"] }]
   },
   "ignorePatterns": ["webview-ui/**"],

packages/vscode-extension/package.json

@@ -438,7 +438,7 @@
     "build:dist": "npm run build:extension && npm run build:sim-server && npm run build:webview",
     "watch:extension": "vite",
     "package": "rm -rf dist/ && npm run build:dist",
-    "lint": "eslint src --ext ts && npm exec prettier --check src",
+    "lint": "eslint src/**/*.\\{ts,tsx,js,jsx\\} && prettier --check src",
     "typecheck": "tsc --noEmit",
     "format": "prettier --write --list-different src",
     "build:tests": "tsc --project tsconfig.test.json",

packages/vscode-extension/src/builders/PlatformBuildCache.ts

@@ -8,7 +8,6 @@ import { IOSBuildResult } from "./buildIOS";
 import { AndroidBuildResult } from "./buildAndroid";
 import { getLaunchConfiguration } from "../utilities/launchConfiguration";
 import { runfingerprintCommand } from "./customBuild";
-import { CancelToken } from "./cancelToken";
 import { calculateMD5 } from "../utilities/common";
 import { BuildResult } from "./BuildManager";
 

packages/vscode-extension/src/debugging/DebugAdapter.ts

@@ -14,8 +14,6 @@ import {
   Source,
   StackFrame,
 } from "@vscode/debugadapter";
-import { getReactNativeVersion } from "../utilities/reactNative";
-import semver from "semver";
 import { DebugProtocol } from "@vscode/debugprotocol";
 import WebSocket from "ws";
 import { NullablePosition, SourceMapConsumer } from "source-map";
@@ -324,13 +322,13 @@ export class DebugAdapter extends DebugSession {
           line: lineNumber1Based - lineOffset,
           column: columnNumber0Based,
         });
-        if (pos.source != null) {
+        if (pos.source !== null) {
           sourceURL = pos.source;
         }
-        if (pos.line != null) {
+        if (pos.line !== null) {
           sourceLine1Based = pos.line;
         }
-        if (pos.column != null) {
+        if (pos.column !== null) {
           sourceColumn0Based = pos.column;
         }
       }
@@ -485,7 +483,7 @@ export class DebugAdapter extends DebugSession {
         column: columnNumber0Based,
         bias: SourceMapConsumer.LEAST_UPPER_BOUND,
       });
-      if (pos.line != null) {
+      if (pos.line !== null) {
         originalSourceURL = sourceURL;
         position = { ...pos, line: pos.line + lineOffset };
       }

packages/vscode-extension/src/debugging/DebugSession.ts

@@ -4,7 +4,6 @@ import {
   Disposable,
   DebugSession as VscDebugSession,
 } from "vscode";
-import { getAppRootFolder } from "../utilities/extensionContext";
 import { Metro } from "../project/metro";
 
 export type DebugSessionDelegate = {

packages/vscode-extension/src/debugging/cdp.ts

@@ -1,5 +1,3 @@
-import { Source } from "@vscode/debugadapter";
-
 export type CDPRemoteObject =
   | {
       type: "undefined";

packages/vscode-extension/src/devices/DeviceBase.ts

@@ -2,7 +2,7 @@ import fs from "fs";
 import { Disposable } from "vscode";
 import { Preview } from "./preview";
 import { BuildResult } from "../builders/BuildManager";
-import { AppPermissionType, DeviceSettings, TouchPoint, Locale } from "../common/Project";
+import { AppPermissionType, DeviceSettings, TouchPoint } from "../common/Project";
 import { DeviceInfo, DevicePlatform } from "../common/DeviceManager";
 import { tryAcquiringLock } from "../utilities/common";
 

packages/vscode-extension/src/devices/preview.ts

@@ -1,5 +1,5 @@
-import { Disposable, workspace } from "vscode";
 import path from "path";
+import { Disposable, workspace } from "vscode";
 import { exec, ChildProcess, lineReader } from "../utilities/subprocess";
 import { extensionContext } from "../utilities/extensionContext";
 import { Logger } from "../Logger";

packages/vscode-extension/src/panels/LaunchConfigController.ts

@@ -33,7 +33,7 @@ export class LaunchConfigController implements Disposable, LaunchConfig {
         return {};
       }
 
-      const { android, appRoot, ios, isExpo, metroConfigPath, env, ...rest } = RNIDEConfiguration;
+      const { android, appRoot, ios, isExpo, metroConfigPath, env } = RNIDEConfiguration;
 
       return { android, appRoot, ios, isExpo, metroConfigPath, env };
     };

packages/vscode-extension/src/panels/WebviewController.ts

@@ -1,4 +1,4 @@
-import vscode, { Webview, Disposable, window, commands, Uri } from "vscode";
+import { Webview, Disposable, commands, Uri } from "vscode";
 import { DependencyManager } from "../dependency/DependencyManager";
 import { DeviceManager } from "../devices/DeviceManager";
 import { Project } from "../project/project";

packages/vscode-extension/src/panels/webviewContentGenerator.ts

@@ -1,7 +1,6 @@
-import { ExtensionContext, ExtensionMode, Webview, Uri, extensions } from "vscode";
+import { ExtensionContext, ExtensionMode, Webview, Uri } from "vscode";
 import { getUri } from "../utilities/getUri";
 import { getNonce } from "../utilities/getNonce";
-import { getDevServerScriptUrl } from "../utilities/common";
 import { Platform } from "../utilities/platform";
 
 const VITE_DEV_HOST = "localhost:2137";

packages/vscode-extension/src/project/metro.ts

@@ -1,5 +1,6 @@
 import path from "path";
 import fs from "fs";
+import WebSocket from "ws";
 import { Disposable, Uri, workspace } from "vscode";
 import stripAnsi from "strip-ansi";
 import { exec, ChildProcess, lineReader } from "../utilities/subprocess";
@@ -8,7 +9,6 @@ import { extensionContext, getAppRootFolder } from "../utilities/extensionContex
 import { shouldUseExpoCLI } from "../utilities/expoCli";
 import { Devtools } from "./devtools";
 import { getLaunchConfiguration } from "../utilities/launchConfiguration";
-import WebSocket from "ws";
 
 export interface MetroDelegate {
   onBundleError(): void;

packages/vscode-extension/src/utilities/packageManager.ts

@@ -10,15 +10,6 @@ export type PackageManagerInfo = {
   workspacePath?: string;
 };
 
-async function pathExists(p: string) {
-  try {
-    await fs.access(p);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 export async function resolvePackageManager(): Promise<PackageManagerInfo | undefined> {
   function findWorkspace(appRoot: string) {
     let currentDir = appRoot;
@@ -81,7 +72,7 @@ export async function resolvePackageManager(): Promise<PackageManagerInfo | unde
 
 async function isNpmModulesInstalled(workspacePath: string): Promise<boolean> {
   try {
-    const { stdout, stderr } = await command("npm ls --json", {
+    const { stdout } = await command("npm ls --json", {
       cwd: workspacePath,
       quietErrorsOnExit: true,
     });

packages/vscode-extension/src/utilities/utils.ts

@@ -1,7 +1,7 @@
-import { commands, env, Uri, window, workspace } from "vscode";
 import { homedir } from "node:os";
 import fs from "fs";
 import path from "path";
+import { commands, env, Uri, window, workspace } from "vscode";
 import JSON5 from "json5";
 import vscode from "vscode";
 import { Logger } from "../Logger";

packages/vscode-extension/src/webview/components/DeviceRemovalConfirmation.tsx

@@ -1,6 +1,6 @@
 import "./DeviceRemovalConfirmation.css";
-import { DeviceInfo } from "../../common/DeviceManager";
 import { useEffect, useState } from "react";
+import { DeviceInfo } from "../../common/DeviceManager";
 import { useDevices } from "../providers/DevicesProvider";
 import Button from "./shared/Button";
 import { useModal } from "../providers/ModalProvider";

packages/vscode-extension/src/webview/components/DeviceSettingsDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import * as Slider from "@radix-ui/react-slider";

packages/vscode-extension/src/webview/components/IconButtonWithOptions.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useState } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import classNames from "classnames";
 import IconButton, { IconButtonProps } from "./shared/IconButton";
 import "./IconButtonWithOptions.css";
-import classNames from "classnames";
 
 interface IconButtonWithOptions extends IconButtonProps {
   options: Record<string, () => void>;
@@ -12,7 +12,6 @@ export const IconButtonWithOptions = forwardRef<HTMLButtonElement, IconButtonWit
   (props, ref) => {
     const { options, children, ...iconButtonProps } = props;
 
-    const timer = useRef<NodeJS.Timeout | undefined>(undefined);
     const [dropdownTriggerVisible, setDropdownTriggerVisible] = useState(false);
 
     return (

packages/vscode-extension/src/webview/components/InspectDataMenu.css

@@ -18,11 +18,11 @@
 }
 
 .inspect-data-menu-label {
-    font-size: 12px;
-    line-height: 25px;
-    padding-left: 5px;
-    color: var(--swm-secondary-text);
-  }
+  font-size: 12px;
+  line-height: 25px;
+  padding-left: 5px;
+  color: var(--swm-secondary-text);
+}
 
 .inspect-data-menu-item {
   font-size: clamp(4px, 4vw, 12px);

packages/vscode-extension/src/webview/components/Preview.tsx

@@ -99,9 +99,9 @@ const MjpegImg = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageE
           } catch {
             // Stream connection was dropped
             if (!cancelled) {
-              const tempSrc = img.src;
+              const srcCopy = img.src;
               img.src = NO_IMAGE_DATA;
-              img.src = tempSrc;
+              img.src = srcCopy;
             }
           }
         }

packages/vscode-extension/src/webview/components/PreviewLoader.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import "./PreviewLoader.css";
 

packages/vscode-extension/src/webview/components/ReplayOverlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
+import * as Select from "@radix-ui/react-select";
 import { RecordingData } from "../../common/Project";
 import { useUtils } from "../providers/UtilsProvider";
-import * as Select from "@radix-ui/react-select";
 import "./ReplayOverlay.css";
 import Button from "./shared/Button";
 
@@ -65,11 +65,13 @@ function Seekbar({ videoRef, startTime }: SeekbarProps) {
 
   useEffect(() => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
 
     const updateProgress = () => {
-      const progress = ((video.currentTime - startTime) / (video.duration - startTime)) * 100;
-      setProgress(progress);
+      const newProgress = ((video.currentTime - startTime) / (video.duration - startTime)) * 100;
+      setProgress(newProgress);
     };
     updateProgress();
 
@@ -79,7 +81,9 @@ function Seekbar({ videoRef, startTime }: SeekbarProps) {
 
   const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
     const seekbar = seekbarRef.current;
-    if (!seekbar) return;
+    if (!seekbar) {
+      return;
+    }
 
     const rect = seekbar.getBoundingClientRect();
     const seekPosition = (e.clientX - rect.left) / rect.width;
@@ -136,11 +140,11 @@ function LengthSelector({ startTime, videoRef, setStartTime }: LengthSelectorPro
     return `${length}s`;
   }
 
-  function onValueChange(value: string) {
-    if (value === "Full") {
+  function onValueChange(newValue: string) {
+    if (newValue === "Full") {
       setStartTime(0);
     } else {
-      const newStartTime = videoDuration - parseInt(value);
+      const newStartTime = videoDuration - parseInt(newValue);
       setStartTime(newStartTime);
     }
   }

packages/vscode-extension/src/webview/components/UrlSelect.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useState, useEffect } from "react";
+import React, { PropsWithChildren } from "react";
 import * as Select from "@radix-ui/react-select";
 import "./UrlSelect.css";
 

packages/vscode-extension/src/webview/components/shared/Alert.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
 import "./Alert.css";
-import classNames from "classnames";
 import ErrorIcon from "../icons/ErrorIcon";
 
 interface AlertProps {

packages/vscode-extension/src/webview/components/shared/Modal.tsx

@@ -12,10 +12,6 @@ interface ModalProps {
   headerShown?: boolean;
 }
 
-function preventDefault(e: Event) {
-  e.preventDefault();
-}
-
 export default function Modal({ title, component, open, setOpen, headerShown }: ModalProps) {
   const close = () => setOpen(false);
   return (

packages/vscode-extension/src/webview/hooks/useResizableProps.tsx

@@ -1,5 +1,5 @@
 import { ResizeCallback } from "re-resizable";
-import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
+import { CSSProperties, useCallback, useEffect, useState } from "react";
 import { DeviceProperties } from "../utilities/consts";
 import { ZoomLevelType } from "../../common/Project";
 import { DEVICE_DEFAULT_SCALE } from "../components/ZoomControls";

packages/vscode-extension/src/webview/providers/AlertProvider.tsx

@@ -32,16 +32,16 @@ export default function AlertProvider({ children }: { children: React.ReactNode
   );
 
   const openAlert = useCallback(({ id, title, description, actions, priority }: AlertType) => {
-    setAlerts((alerts) => {
-      if (alerts.some((alert) => alert.id === id)) {
-        return alerts;
+    setAlerts((oldAlerts) => {
+      if (oldAlerts.some((alert) => alert.id === id)) {
+        return oldAlerts;
       }
-      return [...alerts, { id, title, description, actions, priority }];
+      return [...oldAlerts, { id, title, description, actions, priority }];
     });
   }, []);
 
   const closeAlert = useCallback((id: string) => {
-    setAlerts((alerts) => alerts.filter((alert) => alert.id !== id));
+    setAlerts((oldAlerts) => oldAlerts.filter((alert) => alert.id !== id));
   }, []);
 
   const topAlert = getTopAlert(alerts);