我之前也踩过一模一样的坑！自己搭的Ace编辑器项目里，写document的时候完全出不来querySelector这类浏览器API的自动补全，可官方Demo却丝滑得很，折腾了好一阵才摸清楚问题出在哪，给你分享几个关键的解决步骤：

• 第一步：必须加载语言工具扩展并启用补全选项
  Ace的自动补全功能不是默认全开的，得手动引入ace/ext/language_tools这个扩展，然后在编辑器配置里开启相关选项。举个实际的代码例子：

// 先确保引入了语言工具模块（如果是用script标签引入Ace，要把ext-language_tools.js放在核心ace.js之后）
ace.require("ace/ext/language_tools");

// 初始化编辑器
const editor = ace.edit("你的编辑器容器ID");
editor.setTheme("ace/theme/monokai"); // 选你喜欢的主题就行
editor.getSession().setMode("ace/mode/javascript");

// 开启自动补全相关配置
editor.setOptions({
    enableBasicAutocompletion: true, // 启用基础补全
    enableLiveAutocompletion: true, // 实时输入时显示补全提示
    enableSnippets: true // 如果需要代码片段补全也开上
});

• 第二步：确保JavaScript Worker正确加载
  Ace里很多复杂的语法分析和补全提示是通过Web Worker来处理的，默认的JS模式如果没加载对应的worker，就只能提供基础语法补全，拿不到document这类浏览器全局API的提示。你需要确保worker文件能被正确加载，比如在初始化时指定worker的路径（如果你的项目有静态资源路径配置的话）：

// 这里的路径要对应你项目中javascript worker文件的实际位置
editor.getSession().setWorkerUrl("path/to/ace/worker/javascript.js");

如果是用CDN引入Ace的话，一般CDN会自带对应的worker文件，只要你引入了ace/worker/javascript模块就会自动加载，但如果是本地部署，一定要确认worker文件的路径没写错，不然打开开发者工具会看到404报错。

• 第三步：检查补全提供者是否正确添加
  有时候虽然开了语言工具，但默认的JS补全器没被正确加入到补全列表里，这时候可以手动添加：

const langTools = ace.require("ace/ext/language_tools");
// 手动添加JS补全器，确保它在补全提供者列表中
langTools.addCompleter(langTools.javascriptCompleter);

为什么官方Demo能正常显示这些补全呢？因为官方的Playground默认就把所有必要的扩展、worker和补全配置都拉满了，而我们自己搭项目的时候，很容易只引入了Ace的核心编辑器部分，漏掉了这些关键的补全支持模块。

另外可以排查一下：打开浏览器开发者工具的Console面板，看看有没有Ace相关的警告，比如提示某个模块未加载，或者worker加载失败，这些都是常见的问题点。

按照这几步配置完，你应该就能看到document.querySelector、addEventListener这些浏览器API的自动补全提示了，我当时就是这么解决的～

内容来源于stack exchange