How can I get Web API autocomplete/IntelliSense in VSCode?

Question

I'm using VSCode for web development and I noticed that there is no JavaScript autocomplete/IntelliSense for browser-related types such as Element nor functions such as document.querySelector(). Is there an extension for this that anyone has found?

// tsconfig.json
{
    "compileOnSave": true,
    "compilerOptions": {
        "alwaysStrict": true,
        "checkJs": true,
        "outDir": "./root/js",
        "rootDir": "./src",
        "target": "ESNext"
    },
    "exclude": ["./root/**/*"],
    "include": ["./src/**/*"]
}

I was starting to type out document.querySelector() and noticed halfway through that autocomplete wasn't triggering. I triggered it manually (Ctrl-I) and got no suggestions.

For clarification, I'm looking for something that will do this, but with frontend code:

Tried searching for extensions in marketplace, on Google, in VSCode itself - to no avail.

akpi · Answer 1 · 2023-01-29T19:48:22.207

0

Turns out @user was right — I needed to add this to my tsconfig.json:

{
  "lib": [
    "DOM"
  ]
}

edited Jan 29 '23 at 19:48

answered Jan 29 '23 at 19:36

akpi

187
7

It's better if you explain why this solves the problem like I did in my answer post. Include links to documentation where appropriate. – starball Jan 29 '23 at 19:37
Why do you need `"ESNext"`? How is that necessary to solve the problem presented in your question post? Or is that something that you already had before? Please clarify. It might feel like I'm picking on you, but I'm not. This is just the level of quality that is expected here on Stack Overflow. (see [answer]). – starball Jan 29 '23 at 19:44

starball · Accepted Answer · 2023-01-29T19:52:34.573

The issue is that the lib field (tsconfig.json or jsconfig.json) hasn't been set to include "dom", which tells the TypeScript compiler (and VS Code's TypeScript support) to include types for web APIs like the DOM.

Fun fact: If you leave the lib field empty, TypeScript will assume certain things to be in it "by default". For more info on that, see this answer I wrote to "How can I make vscode assume a node.js context, so that it doesn't assume fetch exists?"

How can I get Web API autocomplete/IntelliSense in VSCode?

2 Answers2