如何为Visual Studio Code扩展启用IntelliSense？

1. 搭建基础项目结构 #

先确保你的VS Code扩展项目已初始化（未初始化的话，用yo code命令创建扩展模板），然后新增核心文件：

• server/src/server.ts：承载语言服务的核心逻辑
• client/src/extension.ts：负责VS Code客户端侧的注册与服务启动

2. 实现Language Server逻辑 #

IntelliSense依赖Language Server Protocol（LSP），需在server.ts中实现对应接口：

• 初始化服务连接：

  import { createConnection, TextDocuments } from 'vscode-languageserver/node';
  import { TextDocument } from 'vscode-languageserver-textdocument';
  
  // 创建服务连接
  const connection = createConnection();
  // 管理文档实例
  const documents = new TextDocuments(TextDocument);
  documents.listen(connection);
  

• 实现代码补全功能：

  import { CompletionItem, CompletionItemKind } from 'vscode-languageserver/node';
  
  connection.onCompletion(() => {
    // 自定义补全列表，可根据语法分析动态生成
    const completionItems: CompletionItem[] = [
      {
        label: 'customFunction',
        kind: CompletionItemKind.Function,
        detail: '自定义工具函数',
        documentation: '执行特定业务逻辑的函数，参数为字符串类型'
      },
      {
        label: 'configObject',
        kind: CompletionItemKind.Object,
        detail: '全局配置对象'
      }
    ];
    return completionItems;
  });
  

• 实现悬停提示功能：

  connection.onHover((params) => {
    const doc = documents.get(params.textDocument.uri);
    if (!doc) return null;
    // 可根据光标位置解析文本，返回精准提示
    return {
      contents: [{ language: 'typescript', value: '// 这里是自定义的悬停说明' }]
    };
  });
  

• 启动服务：

  connection.listen();
  

3. 客户端注册与服务启动 #

在client/src/extension.ts中完成Language Server的启动与注册：

import * as path from 'path';
import { ExtensionContext } from 'vscode';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind } from 'vscode-languageclient/node';

let client: LanguageClient;

export function activate(context: ExtensionContext) {
  // 服务器编译后的路径
  const serverPath = context.asAbsolutePath(path.join('server', 'out', 'server.js'));
  // 调试配置
  const debugOpts = { execArgv: ['--nolazy', '--inspect=6009'] };

  const serverOptions: ServerOptions = {
    run: { module: serverPath, transport: TransportKind.ipc },
    debug: { module: serverPath, transport: TransportKind.ipc, options: debugOpts }
  };

  // 关联目标语言（示例为自定义的myLang语言）
  const clientOptions: LanguageClientOptions = {
    documentSelector: [{ scheme: 'file', language: 'myLang' }]
  };

  // 创建并启动客户端
  client = new LanguageClient(
    'myLangServer',
    '自定义语言服务',
    serverOptions,
    clientOptions
  );
  client.start();
}

export function deactivate(): Thenable<void> | undefined {
  return client?.stop();
}

4. 配置package.json #

在扩展根目录的package.json中添加关键配置：

• 声明支持的自定义语言：

  "contributes": {
    "languages": [{
      "id": "myLang",
      "aliases": ["自定义语言", "mylang"],
      "extensions": [".mylang"]
    }]
  }
  

• 添加扩展激活事件：

  "activationEvents": ["onLanguage:myLang"]
  

• 配置编译脚本：

  "scripts": {
    "compile": "tsc -b",
    "watch": "tsc -b -w",
    "package": "vsce package"
  }
  

5. 编译与测试 #

• 在项目根目录和server子目录分别执行npm install安装依赖
• 执行npm run compile编译项目
• 按F5启动扩展开发环境，新建.mylang文件即可测试IntelliSense功能

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