以CommonJS编写激活器，开发VS Code ES模块扩展遇导入问题

核心问题原因 #

VS Code扩展运行在CommonJS宿主环境中，vscode是宿主注入的内置模块，并非标准npm包。当你将package.json的type设为"module"后，Node会强制按ES模块规则解析所有文件，此时ES模块里的import * as vscode from 'vscode'会触发Node去node_modules里查找vscode包，自然找不到。

具体修复方案 #

1. 调整package.json配置 #

• 移除package.json中的"type": "module"，让默认的CommonJS规则生效（VS Code扩展要求入口文件必须是CommonJS）。
• 保留扩展入口配置（比如"main": "./out/extension.js"），确保入口文件遵循CommonJS规范。

2. 修改tsconfig.json配置 #

• 保持compilerOptions.module为"Node16"，同时添加"moduleResolution": "Node16"，确保模块解析规则与模块格式匹配。
• 若需部分文件使用ES模块，可在单个文件顶部添加// @ts-ignore或"type": "module"注释，但不推荐在扩展代码中大量混用，避免宿主兼容问题。

3. 调整动态导入的ES模块代码 #

• 不在ES模块中直接导入vscode，而是通过CommonJS入口传递vscode对象：
  • 在CommonJS入口文件（extension.js）中先获取vscode：

    // extension.js (CommonJS)
    const vscode = require('vscode');
    
    async function activate(context) {
      const { AppState } = await import('./tools/AppState.js');
      const appState = new AppState(vscode); // 传递vscode对象
      // 后续业务逻辑
    }
    

  • 在ES模块AppState.ts中通过构造函数接收vscode，同时保留类型提示：

    // AppState.ts
    export class AppState {
      private vscode: typeof import('vscode');
    
      constructor(vscode: typeof import('vscode')) {
        this.vscode = vscode;
      }
    
      // 使用示例
      showMessage() {
        this.vscode.window.showInformationMessage('ComBlocks is running!');
      }
    }
    

• 这种方式既通过typeof import('vscode')保留了TypeScript的类型检查，又避免了ES模块直接导入vscode的报错。

4. 类型声明依赖检查 #

• 确保已安装@types/vscode开发依赖：npm install @types/vscode --save-dev，保证TypeScript能正确识别vscode API的类型定义。

额外注意事项 #

• 调试前清理out目录的旧编译产物，确保编译结果与最新配置一致。
• 尽量避免在VS Code扩展中混用CommonJS和ES模块的导入逻辑，以CommonJS为入口核心，ES模块仅做业务拆分，通过参数传递宿主API。

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