如何在自制VSCode扩展中为自定义类实现IntelliSense智能提示补全？

我正好处理过类似的需求，要让用户在使用你的Foo类时获得完整的智能提示，核心是给类提供清晰的类型信息——VSCode的IntelliSense就是靠这个来生成补全和提示的。下面分两种常见场景给你具体实现步骤：

如果你用TypeScript写扩展（最省心的方案） #

TypeScript自带的类型系统会被VSCode直接识别，几乎不需要额外配置：

1. 完善类的类型定义
   先修正你原代码里的小问题（把aMemberFunc从字符串属性改成类方法），然后用标准TS语法明确每个成员的类型：

   export class Foo {
     // 明确字符串类型
     public aMemberVar: string = 'aMemberVar Member Variable';
     
     // 修正为类方法，标注返回类型
     public aMemberFunc(): void {
       console.log('Inside `aMemberFunc()`');
     }
     
     // 给嵌套的settings结构定义精确类型
     public settings: {
       display: {
         alignment: 'left' | 'center' | 'right'; // 限定可选值
         height: number;
         width: number;
         theme: {
           on: boolean;
           color: string;
         };
       };
     } = {
       display: {
         alignment: 'left',
         height: 100,
         width: 100,
         theme: {
           on: true,
           color: 'blue'
         }
       }
     };
   }
   

2. 在package.json中暴露类型
   编译TS后会生成.d.ts类型声明文件，你只需要在扩展的package.json里加上types字段，指向这个文件：

   {
     "name": "your-extension-name",
     "main": "./out/extension.js",
     "types": "./out/extension.d.ts",
     // 其他扩展配置...
   }
   

   用户安装你的扩展后，VSCode会自动读取这个类型文件，输入new Foo().时就能看到所有成员的补全和提示。

如果你用JavaScript写扩展 #

JS没有自带类型系统，需要通过JSDoc注释或者单独的类型声明文件来提供类型信息：

方法A：直接加JSDoc注释（快速实现） #

在你的JS类上添加详细的JSDoc，VSCode会自动解析这些注释生成智能提示：

/**
 * 自定义的Foo类，提供XXX功能
 */
export class Foo {
  constructor() {
    /**
     * 成员变量：示例描述文本
     * @type {string}
     */
    this.aMemberVar = 'aMemberVar Member Variable';
    
    /**
     * 嵌套的显示设置
     * @type {{
     *   display: {
     *     alignment: 'left' | 'center' | 'right',
     *     height: number,
     *     width: number,
     *     theme: {
     *       on: boolean,
     *       color: string
     *     }
     *   }
     * }}
     */
    this.settings = {
      display: {
        alignment: 'left',
        height: 100,
        width: 100,
        theme: {
          on: true,
          color: 'blue'
        }
      }
    };
  }

  /**
   * 自定义成员方法：执行XXX操作
   */
  aMemberFunc() {
    console.log('Inside `aMemberFunc()`');
  }
}

这样用户实例化Foo后，输入foo.就能看到所有成员的补全，包括settings嵌套结构的提示。

方法B：单独写.d.ts类型声明文件（适合复杂结构） #

如果你的类结构比较复杂，单独写一个类型声明文件会更清晰，比如创建foo.d.ts：

// 先定义嵌套的接口
export interface FooThemeSettings {
  on: boolean;
  color: string;
}

export interface FooDisplaySettings {
  alignment: 'left' | 'center' | 'right';
  height: number;
  width: number;
  theme: FooThemeSettings;
}

export interface FooSettings {
  display: FooDisplaySettings;
}

// 再定义Foo类的类型
export declare class Foo {
  aMemberVar: string;
  settings: FooSettings;
  aMemberFunc(): void;
}

然后同样在package.json中配置types字段指向这个文件，VSCode会自动加载它。

进阶：自定义动态补全（可选） #

如果需要更定制化的补全（比如根据上下文动态生成选项、添加特殊描述），可以用VSCode的registerCompletionItemProviderAPI：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册针对JS/TS文件的补全提供者
  const fooCompletionProvider = vscode.languages.registerCompletionItemProvider(
    ['javascript', 'typescript'],
    {
      provideCompletionItems(document, position) {
        // 判断用户是否在Foo实例后输入点号
        const linePrefix = document.lineAt(position).text.slice(0, position.character);
        if (linePrefix.match(/foo\.$/)) {
          // 创建补全项
          const items = [
            new vscode.CompletionItem('aMemberVar', vscode.CompletionItemKind.Variable),
            new vscode.CompletionItem('aMemberFunc', vscode.CompletionItemKind.Method),
            new vscode.CompletionItem('settings', vscode.CompletionItemKind.Property),
            // 还可以添加嵌套的补全项，比如settings.display
            new vscode.CompletionItem('display', vscode.CompletionItemKind.Property),
          ];

          // 给补全项添加描述和详情
          items.forEach(item => {
            switch (item.label) {
              case 'aMemberVar':
                item.documentation = 'aMemberVar Member Variable';
                break;
              case 'aMemberFunc':
                item.documentation = '执行自定义操作的方法';
                break;
            }
          });

          return items;
        }
        return undefined;
      }
    },
    '.' // 触发补全的字符：点号
  );

  context.subscriptions.push(fooCompletionProvider);
}

这种方式适合需要特殊逻辑的场景，不过一般情况下，前面的类型定义方案已经能满足基础的智能提示需求了。

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