VSCode Intellisense Autocomplete for Webpack Config Files

Click here to jump right to the recommended solution.

Warning: I will use the terms “intellisense”, “autocomplete”, and “hints”, somewhat interchangeably throughout this post. They are not technically equivalent, but you should be able to get the gist of what I mean.

Introduction

One of my favorite parts of how the developer experience has improved is how much better IDEs have gotten at providing “hints”, or warnings about “silly” mistakes. Intellisense for config files is something I deeply appreciate, as I don’t care to memorize hundreds of different schemas in my head, especially when the IDE can do it for me, as well as validate my input.

There are many config files that have intellisense support built-in when edited in VSCode, such as .babelrc, package.json, and jsconfig.json, plus hundreds more are contributed by extensions and modules.

Problem:

You might have noticed that, by default when you are building a webpack.config.js file, VSCode does not provide intellisense / hints as you type. Given the somewhat notorious complexity of webpack, this is something I was somewhat surprised to find, and doubly surprised to find very little information out there on how to enable. Thus, the reason for making this post.

Solution(s):

Solution A: Use TypeScript Definition

Using TypeScript definitions for webpack config intellisense was actually previously suggested on multiple related Webpack issues (VSCode #24270, VSCode #24657, and TS #13333), but for a while, was not working. Now, thanks to improvements in VSCode’s handling of TS-Powered JSDoc comments (very impressive), it works just fine.

To use, simply prefix where you are declaring the config object with a JSDoc type annotation, like so:

/** @type {import('webpack').Configuration} */
module.exports = {
    mode: 'development',
    // ...
}

Here it is in action:

The interface declaration comes from @types/webpack.

If you run into issues, make sure you have already added Webpack as a dependency, and as a last resort, you can add @types/webpack as a devDependency.

Solution B: Use JSON Config and Published Schema File

According to this issue, Webpack already supports passing in a .json config file instead of JS. However, creating a webpack.config.json still won’t get Intellisense to kick in automatically, so you have to go one more step – tell VSCode what schema to use.

I don’t want to go into too much detail on this, but JSON Schema is a very powerful mechanism, and is well-supported in VSCode. I have a cheatsheet section devoted to it, here.

After adding webpack as a dependency, in webpack.config.json:

{
    "$schema": "./node_modules/webpack/schemas/WebpackOptions.json",
    "mode": "development", // ...
}

This method is not recommended in comparison to method A, because you lose the ability to do anything outside of the JSON spec – e.g., you can’t use comments, you can’t use variables and globals (no __dirname!), and many other restrictions. Plus, now that method A works, there is no real benefit to this approach, and I’m mainly including it as a demonstration of how VSCode supports and resolves JSON Schema.

Wrap-Up

Hope this helps someone! Feel free to let me know in the comments if I missed anything!

More About Me:

• 🔗joshuatz.com
• 👨‍💻dev.to/joshuatz
• 💬@1joshuatz
• 💾github.com/joshuatz