[Typespec-vscode] Install packages for unrecognized import

.chronus/changes/install-packages-for-unrecognized-import-2025-4-8-7-32-21.md

@@ -0,0 +1,9 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: feature
+packages:
+  - "@typespec/compiler"
+  - typespec-vscode
+---
+
+Install packages for unrecognized import via npm command

packages/compiler/src/server/serverlib.ts

@@ -681,7 +681,10 @@ export function createServer(host: ServerHost): Server {
             diagnostic.severity = DiagnosticSeverity.Hint;
           }
         }
-        diagnostic.data = { id: diagnosticIdCounter++ };
+        diagnostic.data = {
+          id: diagnosticIdCounter++,
+          file: diagDocument.uri,
+        };
         const diagnostics = diagnosticMap.get(diagDocument);
         compilerAssert(
           diagnostics,

packages/typespec-vscode/src/code-action-provider.ts

@@ -1,5 +1,9 @@
+import { PackageJson } from "@typespec/compiler";
 import vscode from "vscode";
-import { CommandName } from "./types.js";
+import logger from "./log/logger.js";
+import { getDirectoryPath, isPathAbsolute } from "./path-utils.js";
+import { CodeActionCommand } from "./types.js";
+import { searchAndLoadPackageJson } from "./utils.js";
 
 export function createCodeActionProvider() {
   return vscode.languages.registerCodeActionsProvider(
@@ -17,20 +21,21 @@ export function createCodeActionProvider() {
 export class TypeSpecCodeActionProvider implements vscode.CodeActionProvider {
   public static readonly providedCodeActionKinds = [vscode.CodeActionKind.QuickFix];
 
-  provideCodeActions(
+  public async provideCodeActions(
     _document: vscode.TextDocument,
     _range: vscode.Range | vscode.Selection,
     context: vscode.CodeActionContext,
     _token: vscode.CancellationToken,
-  ): vscode.CodeAction[] {
-    // for each diagnostic entry that has the matching `code`, create a code action command
-    // A CodeAction will only be created if it is a TypeSpec diagnostic and code is an object and has a target attribute
-    // target attribute is the URL to open
-
-    // target is a Uri type, which corresponds to diagnostic.codeDescription.href in compiler
-    // When target is empty, it does not exist in the code object, so the code action will not be created
+  ): Promise<vscode.CodeAction[]> {
     const actions: vscode.CodeAction[] = [];
-    context.diagnostics.forEach((diagnostic) => {
+
+    for (const diagnostic of context.diagnostics) {
+      // for each diagnostic entry that has the matching `code`, create a code action command
+      // A CodeAction will only be created if it is a TypeSpec diagnostic and code is an object and has a target attribute
+      // target attribute is the URL to open
+
+      // target is a Uri type, which corresponds to diagnostic.codeDescription.href in compiler
+      // When target is empty, it does not exist in the code object, so the code action will not be created
       if (
         diagnostic.source === "TypeSpec" &&
         diagnostic.code &&
@@ -46,10 +51,98 @@ export class TypeSpecCodeActionProvider implements vscode.CodeActionProvider {
           ),
         );
       }
-    });
+
+      // When the corresponding node dependency package is not installed,
+      // consider generating a quick fix to install via npm command
+      if (
+        diagnostic.source === "TypeSpec" &&
+        diagnostic.code &&
+        diagnostic.code === "import-not-found" &&
+        "data" in diagnostic &&
+        diagnostic.data &&
+        typeof diagnostic.data === "object" &&
+        "file" in diagnostic.data
+      ) {
+        // The message content is `Couldn't resolve import "@typespec/http"`.
+        // The compiler's diagnostics do not provide a specific attribute to obtain the package name,
+        // so a regular expression is used to extract the package name within the double quotes,
+        // if no match is reached, the original string is returned
+        const targetPackage = diagnostic.message.replace(/.*"([^"]+)".*/, "$1");
+        logger.debug(`The target package name is '${targetPackage}'.`);
+
+        const packageFile = diagnostic.data.file as string;
+        const packageFileUri = vscode.Uri.parse(packageFile);
+        const { packageJsonFolder, packageJson } = await searchAndLoadPackageJson(
+          getDirectoryPath(packageFileUri.fsPath),
+        );
+
+        const pkgNameInPkgFile = this.isPackageInPackageJson(targetPackage, packageJson);
+
+        // Whether there is or not the package.json file, the installation command will be created;
+        // when there is no package.json file, the user will be given a clear message prompt.
+        actions.push(
+          this.createInstallPackageCodeAction(
+            diagnostic,
+            targetPackage,
+            pkgNameInPkgFile,
+            packageJsonFolder,
+          ),
+        );
+      }
+    }
+
     return actions;
   }
 
+  /**
+   * Determines whether the given packageName is in the package.json file.
+   *
+   * - targetPackage is not a relative or absolute path
+   * - if it's listed in the package.json's dependencies, devDependencies, or peerDependencies.
+   *
+   * @param targetPackage - The name of the package to check.
+   * @param packageJson - The parsed package.json file content or undefined if not available.
+   * @returns True if packageName is in package.json file, false otherwise.
+   */
+  private isPackageInPackageJson(
+    targetPackage: string,
+    packageJson: PackageJson | undefined,
+  ): boolean {
+    if (
+      !targetPackage.startsWith("./") &&
+      !targetPackage.startsWith("../") &&
+      !isPathAbsolute(targetPackage) &&
+      packageJson
+    ) {
+      return !!(
+        (packageJson.peerDependencies && targetPackage in packageJson.peerDependencies) ||
+        (packageJson.dependencies && targetPackage in packageJson.dependencies) ||
+        (packageJson.devDependencies && targetPackage in packageJson.devDependencies)
+      );
+    }
+
+    return false;
+  }
+
+  private createInstallPackageCodeAction(
+    diagnostic: vscode.Diagnostic,
+    pkgName: string,
+    pkgNameInPkgFile: boolean,
+    projectFolder?: string,
+  ): vscode.CodeAction {
+    const action = new vscode.CodeAction(
+      `Install "${pkgName}" using npm`,
+      vscode.CodeActionKind.QuickFix,
+    );
+    action.command = {
+      command: CodeActionCommand.NpmInstallPackage,
+      title: diagnostic.message,
+      arguments: [projectFolder, pkgName, pkgNameInPkgFile],
+    };
+    action.diagnostics = [diagnostic];
+    return action;
+  }
+
   private createOpenUrlCodeAction(
     diagnostic: vscode.Diagnostic,
     url: string,
@@ -61,7 +154,7 @@ export class TypeSpecCodeActionProvider implements vscode.CodeActionProvider {
       vscode.CodeActionKind.QuickFix,
     );
     action.command = {
-      command: CommandName.OpenUrl,
+      command: CodeActionCommand.OpenUrl,
       title: diagnostic.message,
       arguments: [url],
     };

packages/typespec-vscode/src/extension.ts

@@ -16,6 +16,7 @@ import telemetryClient from "./telemetry/telemetry-client.js";
 import { OperationTelemetryEvent, TelemetryEventName } from "./telemetry/telemetry-event.js";
 import { TspLanguageClient } from "./tsp-language-client.js";
 import {
+  CodeActionCommand,
   CommandName,
   InstallGlobalCliCommandArgs,
   RestartServerCommandArgs,
@@ -25,7 +26,7 @@ import {
   SettingName,
 } from "./types.js";
 import { installCompilerWithUi } from "./typespec-utils.js";
-import { isWhitespaceStringOrUndefined } from "./utils.js";
+import { isWhitespaceStringOrUndefined, spawnExecutionAndLogToOutput } from "./utils.js";
 import { createTypeSpecProject } from "./vscode-cmd/create-tsp-project.js";
 import { emitCode } from "./vscode-cmd/emit-code/emit-code.js";
 import { importFromOpenApi3 } from "./vscode-cmd/import-from-openapi3.js";
@@ -63,7 +64,40 @@ export async function activate(context: ExtensionContext) {
       );
 
       context.subscriptions.push(
-        commands.registerCommand(CommandName.OpenUrl, (url: string) => {
+        commands.registerCommand(
+          CodeActionCommand.NpmInstallPackage,
+          async (projectFolder: string | undefined, pkgName: string, pkgNameInPkgFile: boolean) => {
+            try {
+              if (projectFolder) {
+                await spawnExecutionAndLogToOutput(
+                  "npm",
+                  pkgNameInPkgFile ? ["install"] : ["install", pkgName],
+                  projectFolder,
+                );
+              } else {
+                logger.error(
+                  "No package.json file was found, and the dependency package could not be installed",
+                  [],
+                  {
+                    showPopup: true,
+                  },
+                );
+              }
+            } catch (error) {
+              logger.error(
+                "Failed to execute npm install, please check the output for details",
+                [error],
+                {
+                  showPopup: true,
+                },
+              );
+            }
+          },
+        ),
+      );
+
+      context.subscriptions.push(
+        commands.registerCommand(CodeActionCommand.OpenUrl, (url: string) => {
           try {
             vscode.env.openExternal(vscode.Uri.parse(url));
           } catch (error) {

packages/typespec-vscode/src/types.ts

@@ -10,12 +10,16 @@ export const enum CommandName {
   RestartServer = "typespec.restartServer",
   InstallGlobalCompilerCli = "typespec.installGlobalCompilerCli",
   CreateProject = "typespec.createProject",
-  OpenUrl = "typespec.openUrl",
   EmitCode = "typespec.emitCode",
   ImportFromOpenApi3 = "typespec.importFromOpenApi3",
   ShowOpenApi3 = "typespec.showOpenApi3",
 }
 
+export const enum CodeActionCommand {
+  OpenUrl = "typespec.openUrl",
+  NpmInstallPackage = "typespec.npmInstallPackage",
+}
+
 export type RestartServerCommandResult = Result<TspLanguageClient>;
 
 export interface BaseCommandArgs {