如何在VSCode中为Firefox扩展API启用自动补全/智能提示？

I've run into this exact issue before—smart completions for browser.tabs, browser.extension, etc. are total lifesavers for cutting down typos and skipping constant trips to the docs. The typeAcquisition trick sometimes falls short, so let's walk through more reliable fixes:

Step 1: Manually Install Firefox WebExtension Type Definitions #

Automatic type acquisition doesn't always pull in the right definitions consistently. Instead, install the official type package directly:

npm install --save-dev @types/firefox-webext-types
# Or if you use yarn:
yarn add -D @types/firefox-webext-types

Step 2: Update Your jsconfig.json #

Make sure your jsconfig.json explicitly references the installed types and targets your extension's source files. Replace your existing config with something like this:

{
  "compilerOptions": {
    "types": ["firefox-webext-types"],
    "module": "ESNext",
    "target": "ES6"
  },
  "include": ["src/**/*"], // Adjust this to match your extension's file structure
  "exclude": ["node_modules"]
}

Step 3: Enable JS Type Checking in VS Code #

VS Code might not enable type-aware completions for plain JS files by default. Fix this:

1. Open VS Code Settings (Ctrl/Cmd + ,)
2. Search for javascript.implicitProjectConfig.checkJs
3. Toggle it to true

Alternatively, add this directly to your .vscode/settings.json:

{
  "javascript.implicitProjectConfig.checkJs": true
}

Step 4: Reload VS Code #

After making these changes, reload your VS Code window (Ctrl/Cmd + Shift + P → "Reload Window") to ensure the new type definitions are picked up.

Why the Original typeAcquisition Trick Might Have Failed #

Automatic type acquisition relies on VS Code's registry to find and fetch types, which can sometimes miss or fail to update the Firefox webext definitions. Installing the types manually guarantees they're present and correctly linked to your project.

Once you've done this, you should start seeing full IntelliSense for all Firefox WebExtensions API methods—including parameter hints, return types, and documentation snippets right in your editor.

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