如何在Monaco编辑器中为自定义库开启代码补全/IntelliSense？

针对你遇到的带export的.d.ts无法在Monaco Editor中触发全局代码补全的问题，以下是几种无需手动修改原.d.ts文件的解决方案：

方法1：通过TypeScript编译器配置启用UMD全局访问 #

如果你的类库可以构建为UMD格式（Vite可配置输出格式），可以通过Monaco的TypeScript配置开启allowUmdGlobalAccess，让Monaco自动将模块导出的成员识别为全局变量：

// 从Vite构建产物中读取原始.d.ts内容
const typeDefinitions = `
declare class MyCoolClass {
    static func(x: number): number;
}

export { MyCoolClass };`;

// 配置TypeScript默认编译选项
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    allowUmdGlobalAccess: true,
    module: monaco.languages.typescript.ModuleKind.UMD,
});

// 将.d.ts添加为额外库，路径模拟node_modules中的模块（帮助Monaco解析）
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    typeDefinitions,
    'file:///node_modules/your-library-name/index.d.ts'
);

// 创建编辑器
const editor = monaco.editor.create(aDomNode, {
    automaticLayout: true,
    value: '',
    language: 'typescript',
});

此方法无需修改任何代码或类型文件，是最贴合需求的方案，前提是你的类库输出格式支持UMD。

方法2：动态转换.d.ts为全局声明 #

如果无法调整类库输出格式，可以在加载.d.ts时自动将内容包裹到declare global块中，将导出成员转为全局类型：

// 原始.d.ts内容
const originalDts = `
declare class MyCoolClass {
    static func(x: number): number;
}

export { MyCoolClass };`;

// 动态处理：移除export语句，将声明包裹到global块
const processedDts = `
declare global {
    ${originalDts.replace(/export\s+\{.*\};/, '')}
}
// 保持模块结构避免类型冲突
export {};`;

// 添加处理后的类型定义
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    processedDts,
    'your-library-global.d.ts'
);

// 创建编辑器
const editor = monaco.editor.create(aDomNode, {
    automaticLayout: true,
    value: '',
    language: 'typescript',
});

这种方法通过简单的正则处理实现自动化转换，无需手动修改原文件，适合大多数场景。

方法3：在编辑器初始代码中挂载全局变量 #

如果允许编辑器初始代码包含导入逻辑，可以通过导入模块并挂载到window对象，实现全局访问：

// 添加原始.d.ts作为额外库
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    typeDefinitions,
    'file:///node_modules/your-library-name/index.d.ts'
);

// 创建编辑器时，在初始代码中完成导入和全局挂载
const editor = monaco.editor.create(aDomNode, {
    automaticLayout: true,
    value: `import { MyCoolClass } from 'your-library-name';
// 挂载到全局
(window as any).MyCoolClass = MyCoolClass;

// 现在输入MyCoolClass即可触发补全
MyCoolClass.`,
    language: 'typescript',
});

此方法适合需要保留模块规范，但希望用户能直接全局使用类库的场景。

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