VSCode Intellisense Autocomplete for Webpack Config Files

  • report
    Click for Disclaimer
    This Post is over a year old (first published about 3 years ago). As such, please keep in mind that some of the information may no longer be accurate, best practice, or a reflection of how I would approach the same thing today.
  • infoFull Post Details
    info_outlineClick for Full Post Details
    Date Posted:
    May. 14, 2020
    Last Updated:
    May. 27, 2020
  • classTags
    classClick for Tags

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.


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.


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 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:

VSCode Intellisense in webpack.config.js – powered by TypeScript and JSDoc comment

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.


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

More About Me:

3 thoughts on “VSCode Intellisense Autocomplete for Webpack Config Files”

  1. It didn’t work for me unless I used “@types/webpack” instead of “webpack” in the JSDoc comment.

    This worked for me:
    /** @type {import(‘@types/webpack’).Configuration} */
    module.exports = {
    entry: “./app/assets/scripts/App.js”,

    To get just “webpack” to work, I had to add a jsconfig.json file to the root directory of my project that looked like the following:
    “typeAcquisition”: {
    “include”: [“webpack”]
    “compilerOptions”: {
    // This must be specified if “paths” is set
    “baseUrl”: “.”,
    // Relative to “baseUrl”
    “paths”: {
    “*”: [“*”, “src/*”, “assets/*”]

    In neither case did I need to install @types/webpack as a dev dependency.

    Thanks for the helpful guide! Cheers!

    1. joshuatz says:

      Thanks for sharing your fix! At the time that I wrote this, I probably had a `jsconfig.json` or `tsconfig.json` in the project I was working on, as I tend to prefer those over the `// @ts-check` trick for enabling JS type-checking (although any of the three approaches should work).

      Manually configuring typeAcquisition should generally not be required, but I also haven’t used this trick in a long time, so your approach might be necessary for everyone. I have a feeling that if it is, it would be related to PR #10599 (types are now bundled directly with Webpack 5, and no longer required through `@types/webpack`).

      Thanks again for sharing!

  2. Codi Aji says:

    Your 1st solution work for me, but only after I type, for example, mode.

Leave a Reply

Your email address will not be published.