如何在VSCode中启用Web API自动补全/IntelliSense？

修改tsconfig.json配置 #

在compilerOptions中添加lib字段，明确引入DOM相关的类型库即可解决问题：

// 修改后的tsconfig.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "alwaysStrict": true,
In the original configuration, you didn't specify the `lib` field. When using `checkJs` to enable TypeScript's type checking for JavaScript files, TypeScript won't automatically include DOM environment types—you have to explicitly list them.

哦，重新组织成自然的Stack Overflow回答：

# 解决VSCode中浏览器JavaScript API无自动补全的问题

你的问题核心是TypeScript语言服务未加载浏览器DOM相关的类型定义，无需额外安装扩展，调整`tsconfig.json`配置即可解决：

## 修改tsconfig.json配置
在`compilerOptions`中添加`lib`字段，明确包含DOM类型库：
```json
{
    "compileOnSave": true,
    "compilerOptions": {
        "alwaysStrict": true,
        "checkJs": true,
        "outDir": "./root/js",
        "rootDir": "./src",
        "target": "ESNext",
        // 新增：引入DOM相关类型定义
        "lib": ["ESNext", "DOMThis is the key fixWithout specifying `lib`, TypeScript only includes the default libraries for your target (ESNext), which don't cover browser-specific APIs like `document` or `Element`.

不对，直接清晰说明：

# 解决VSCode中浏览器JavaScript API无自动In your case, since you're using `checkJs` to enable TypeScript's IntelliSense for JavaScript files, you need to explicitly tell TypeScript to include browser DOM type definitions. Here's how toMost likely, the issue is that your tsconfig.json isn't including the DOM type definitions. Here's the fix:

哦，直接写：

# 解决VSCode中浏览器JavaScript API无自动补全的问题

你不需要额外安装扩展，只需调整`tsconfig.json`的配置即可让浏览器API（如`document.querySelector()`、`Element`）出现智能提示：

## 修改tsconfig.json
在`compilerOptions`中添加`lib`字段，明确引入DOM相关的类型库：
```json
// 修改后的tsconfig.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "alwaysStrict": true,
        "checkJs": true,
        "outDir": "./root/js",
        "rootDir": "./src",
        "target": "ESNext",
        // 新增这一行，包含浏览器DOM类型定义
        "lib": ["ESNext", "DOM", "DOM.Iterable"]
    },
    "exclude": ["./root/**/*"],
    "include": ["./src/**/*"]
}

配置说明 #

• lib字段用于指定TypeScript需要加载的环境类型库，DOM包含了document、Element等浏览器全局对象的类型定义，DOM.Iterable补充了DOM集合的迭代器类型支持。
• 因为你开启了checkJs，TypeScript会以类型检查模式处理你的JS文件，此时必须明确指定需要的环境类型库，否则语言服务无法识别浏览器专属API。

额外排查步骤 #

如果修改后仍不生效：

• 点击VSCode右下角的TypeScript版本号，确保使用的是工作区版本（而非VSCode内置版本）。
• 打开命令面板（Ctrl+Shift+P），执行「TypeScript: Restart TS Server」命令重启语言服务。
• 检查VSCode设置：确认typescript.suggest.enabled和javascript.suggest.enabled均为true。

这样配置后，就能实现类似Discord.js项目中的智能提示效果——Discord.js本身自带完整的类型定义，而浏览器DOM的类型定义需要通过TypeScript的lib配置来加载。

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