如何借助API获取VS Code中JavaScript函数及注释列表？

VS Code函数详情弹窗的实现逻辑 #

VS Code的函数hover详情弹窗，核心依赖语言服务协议（LSP）：

• 针对JavaScript/TypeScript，它内置了官方的TypeScript Language Service，该服务会对代码做语法解析、AST构建、类型校验，同时自动提取JSDoc注释和函数元信息（参数、返回值等）。
• 当你hover到函数上时，VS Code通过LSP向语言服务发送textDocument/hover请求，服务返回结构化的hover数据（包含函数签名、JSDoc内容），最后由VS Code渲染成弹窗。

获取函数及注释的具体方法 #

1. 基于VS Code扩展API（适合在VS Code内做工具） #

直接调用VS Code内置的语言服务或命令来获取数据：

• 使用vscode.languages.getLanguageService()获取JavaScript语言服务实例，传入代码文档后，调用getHover()方法获取指定位置的函数信息。
• 也可以直接调用内置命令vscode.executeHoverProvider，传入文件URI和位置，拿到标准化的hover结果。
• 简化示例代码：

  const vscode = require('vscode');
  
  async function collectFunctionInfo(fileUri) {
    const doc = await vscode.workspace.openTextDocument(fileUri);
    // 调用内置hover提供者
    const hoverResults = await vscode.commands.executeCommand(
      'vscode.executeHoverProvider',
      fileUri,
      new vscode.Position(0, 0) // 替换为实际函数位置，可通过AST遍历定位所有函数
    );
    // 从hoverResults中提取注释和函数签名
  }
  

2. 静态代码分析工具（无需依赖VS Code） #

TypeScript Compiler API

即使处理纯JavaScript文件，也能用TS编译器API高效提取信息：

• 配置tsconfig.json开启allowJs: true，用ts.createProgram()加载项目文件。
• 遍历AST找到FunctionDeclaration、FunctionExpression、ArrowFunction等函数节点。
• 用ts.getJSDocCommentsForNode()直接获取节点关联的JSDoc注释。

Esprima/Acorn

轻量级JS语法解析器，手动遍历AST收集信息：

• 解析代码时开启comment: true选项，同时获取AST和注释列表。
• 匹配注释（判断是否为/** ... */格式的JSDoc）与后续的函数节点，关联对应信息。
• 简化示例：

  const esprima = require('esprima');
  const fs = require('fs');
  
  const code = fs.readFileSync('./target.js', 'utf8');
  const { body, comments } = esprima.parseScript(code, { comment: true, loc: true });
  
  // 遍历函数节点，匹配对应的JSDoc注释
  body.forEach(node => {
    if (node.type === 'FunctionDeclaration') {
      // 找到节点上方的JSDoc注释
      const jsDoc = comments.find(cmt => 
        cmt.type === 'Block' && cmt.value.startsWith('*') && 
        cmt.loc.end.line === node.loc.start.line - 1
      );
      console.log(`函数名：${node.id.name}，注释：${jsDoc?.value}`);
    }
  });
  

JSDoc命令行工具

用官方jsdoc工具直接生成结构化文档数据：

• 安装jsdoc后，通过命令行指定要解析的文件，加上-X参数输出JSON格式的原始数据。
• 直接从JSON结果中提取所有函数的名称、参数、注释等信息，无需手动处理AST。

3. 其他方案 #

• 自定义ESLint规则：在规则的AST遍历逻辑中，收集函数和注释信息，输出到指定文件。
• 基于Babel AST：用@babel/parser解析代码生成AST，遍历节点提取函数和注释。

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