如何在Monaco Editor的JavaScript代码补全中禁用TypeScript提示？

嘿，这个问题我之前折腾过好一阵子！其实你别看指定了language: "javascript"，但Monaco的JavaScript智能提示底层是依赖TypeScript语言服务实现的，所以默认会带上TS特有的类型提示。下面给你几个实用的解决办法：

方法一：调整JavaScript编译器选项，限制仅加载ES6标准库 #

通过配置JS的默认编译器参数，让TypeScript服务只提供ES6相关的提示，从根源上过滤掉TS专属的类型：

// 务必在创建编辑器前先配置
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES6, // 指定代码目标版本为ES6
  lib: ["ES6"], // 仅加载ES6标准库，避免引入TS特有的类型定义
  strict: false, // 关闭严格类型检查规则
  typeChecking: false, // 禁用类型检查，减少TS相关提示输出
  noImplicitAny: false
});

// 再创建编辑器实例
monaco.editor.create(document.getElementById("monaco"), { 
  language: "javascript"
});

方法二：自定义提示过滤器，手动移除不需要的项 #

如果上面的配置还不够彻底，你可以注册一个自定义的完成项提供者，精确过滤掉boolean、void这类你不想看到的提示：

// 注册自定义CompletionItemProvider
const customProvider = monaco.languages.registerCompletionItemProvider('javascript', {
  provideCompletionItems: async (model, position) => {
    // 获取原TS服务提供的提示列表
    const originalResult = await monaco.languages.typescript.javascriptDefaults.getCompletionItemProvider().provideCompletionItems(model, position);
    
    if (originalResult && originalResult.suggestions) {
      // 定义需要排除的提示标签，可根据需求扩展
      const excludeLabels = ['boolean', 'void', 'any', 'null', 'undefined'];
      originalResult.suggestions = originalResult.suggestions.filter(item => {
        return !excludeLabels.includes(item.label);
      });
    }
    
    return originalResult;
  }
});

// 注意：在编辑器销毁时记得调用 customProvider.dispose() 清理资源

补充说明 #

为什么指定language: "javascript"还是会出现TS提示？因为Monaco团队为了复用代码，JavaScript的智能提示、语法检查等核心功能都是基于TypeScript语言服务实现的——相当于把JS当成无类型注解的TS来处理，所以默认会带上TS的部分特性提示。

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