开发VSCode扩展：将JS函数参数视为AngularJS服务依赖导入

问题背景 #

在ServiceNow平台上，AngularJS服务以单个JS文件存储，文件内仅包含一个与服务同名的函数，函数参数即为依赖项，示例代码如下：

function exampleService(anotherService, $timeout, $q) {
  // service code here
}

需要实现两个核心功能：

• 通过服务名称（函数名）快速定位对应服务代码
• 让VSCode识别服务函数内的serviceName参数是new serviceName()的实例对象

目前已实现serviceName = serviceName的自动补全，但无法让VSCode认定该变量是实例化后的对象；AngularJS内置依赖（如$q、$timeout）已通过.d.ts文件处理完成，希望复用VSCode原生的导入自动补全能力，将函数参数视为导入，避免自行编写完整的文件查找与解析逻辑。

解决方案 #

1. 复用VSCode原生查找逻辑：注册定义与类型跳转Provider #

VSCode内置的文件查找、跳转逻辑可以直接通过注册DefinitionProvider和TypeDefinitionProvider复用，无需自己实现文件遍历：

• DefinitionProvider：实现服务名称跳转到对应文件的功能
• TypeDefinitionProvider：关联服务函数的类型，让VSCode识别参数的实例属性

核心代码示例：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册定义跳转
  const definitionProvider = vscode.languages.registerDefinitionProvider('javascript', {
    async provideDefinition(document, position, token) {
      const wordRange = document.getWordRangeAtPosition(position);
      const serviceName = document.getText(wordRange);
      // 复用VSCode文件查找，匹配同名服务文件
      const matchedFiles = await vscode.workspace.findFiles(`**/${serviceName}.js`);
      if (matchedFiles.length) {
        return new vscode.Location(matchedFiles[0], new vscode.Position(0, 0));
      }
      return undefined;
    }
  });

  // 注册类型定义跳转，关联实例类型
  const typeDefProvider = vscode.languages.registerTypeDefinitionProvider('javascript', {
    async provideTypeDefinition(document, position, token) {
      const wordRange = document.getWordRangeAtPosition(position);
      const serviceName = document.getText(wordRange);
      const matchedFiles = await vscode.workspace.findFiles(`**/${serviceName}.js`);
      if (matchedFiles.length) {
        return new vscode.Location(matchedFiles[0], new vscode.Position(0, 0));
      }
      return undefined;
    }
  });

  context.subscriptions.push(definitionProvider, typeDefProvider);
}

2. 动态生成类型声明，标记服务为构造函数 #

为每个服务JS文件自动生成对应的.d.ts声明文件，将服务函数标记为构造函数类型，让VSCode识别参数是其实例：
比如为exampleService.js生成exampleService.d.ts：

declare class exampleService {
  constructor(anotherService: anotherService, $timeout: angular.ITimeoutService, $q: angular.IQService);
  // 可根据服务内方法动态补充类型，或留空让VSCode推断
}

declare var exampleService: typeof exampleService;
export = exampleService;

在扩展中监听文件打开事件，自动关联对应的.d.ts文件，VSCode就能识别参数的实例属性了。

3. 复用导入补全：将参数映射为虚拟导入项 #

注册CompletionItemProvider，在用户输入服务函数参数时，返回服务名称补全项并标记为导入类型，复用VSCode原生补全逻辑：

const completionProvider = vscode.languages.registerCompletionItemProvider('javascript', {
  async provideCompletionItems(document, position, token) {
    const lineText = document.lineAt(position).text;
    // 判断是否处于服务函数的参数列表中
    if (/function\s+\w+\(/.test(lineText)) {
      const serviceFiles = await vscode.workspace.findFiles('**/*.js');
      return serviceFiles.map(file => {
        const serviceName = file.name.replace('.js', '');
        const item = new vscode.CompletionItem(serviceName, vscode.CompletionItemKind.Import);
        item.detail = 'ServiceNow AngularJS Service';
        item.documentation = 'Auto-completed Service Dependency';
        return item;
      });
    }
    return undefined;
  }
}, ',', '('); // 触发补全的字符：逗号、左括号

context.subscriptions.push(completionProvider);

关键注意点 #

• 调整findFiles的匹配规则，只筛选ServiceNow服务文件（比如排除通用工具JS文件）
• 缓存自动生成的.d.ts文件，避免重复生成影响性能
• 结合WorkspaceSymbolProvider实现服务名称全局搜索，进一步提升体验

内容的提问来源于stack exchange，提问作者Eiluviann