如何引入monaco.d.ts以获取monaco-editor的智能提示

• 优先确认类型文件有效性：如果是第三方npm包自带的d.ts，先检查包的package.json是否存在types/typings字段指向该d.ts，常规情况下TS会自动识别这类官方自带的类型，无需额外配置。
• 修正tsconfig配置逻辑：不要同时在include和files数组中配置同一份d.ts路径，二选一即可：
  全局生效的d.ts优先加到include数组中，路径需要和tsconfig.json的存放位置严格匹配；如果你的tsconfig配置了exclude字段，无需担心单独指定的d.ts被排除，TS会优先采用include的配置规则。
• 三斜线指令兜底：如果配置后仍不生效，可以在src目录下新建global.d.ts全局声明文件，加入对应d.ts的引用指令即可：

  /// <reference path="../node_modules/xxx/xxx.d.ts" />
  

  三斜线指令是TS官方提供的全局类型引入方式，优先级高于tsconfig的路径配置。

你之前的配置不生效，大概率是两个原因：一是误装了已废弃的第三方类型包导致冲突，二是TS服务没有刷新，或者tsconfig的typeRoots配置没有覆盖到monaco的类型文件。按以下步骤操作即可解决：

• 首先删除冲突的第三方类型包，monaco-editor官方已经自带完整类型，社区维护的@types/monaco-editor早已废弃，安装后会导致类型冲突，运行命令卸载：

  npm uninstall @types/monaco-editor
  

• 修正tsconfig配置，删除重复的files配置，只保留include的路径即可，同时建议在typeRoots中加入monaco的目录，示例配置如下：

  {
    "compilerOptions": {
      // 保留你原有的其他配置不变
      "typeRoots": [
        "./node_modules/@types",
        "./node_modules/monaco-editor"
      ]
    },
    "include": [
      "src/**/*",
      "./node_modules/monaco-editor/monaco.d.ts"
    ],
    "exclude": [
      "node_modules",
      "dist"
    ]
  }
  

• 如果你使用了monaco-editor-webpack-plugin、vite-plugin-monaco-editor这类打包插件，可以在compilerOptions中额外补充types配置：

  "compilerOptions": {
    "types": ["monaco-editor"]
  }
  

• 配置完成后无需重启整个VSCode，打开命令面板（Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P），运行「TypeScript: Restart TS Server」即可刷新类型识别。

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