Rob O'Leary

Eleventy - Get autocompletion and doc info in your eleventy config in VS Code

1 min read
A faint autocompletion scenario is show. The text 'config.' is accompanied with a suggestion list with completions beginning with 'DateTime' highlighted. This is cast againt a soft purple background with the eleventy possum floating beside it on a balloon.

In VS Code, you don’t get autocompletion in your eleventy config. You don’t get doc info about functions when you hover over them.

default autocompletion in eleventy config file
No autocompletion in eleventy config file in VS Code by default :-(

Let’s change this!

Add autocompletion and hover information

We need to add a JSDoc annotation to tell VS Code where the definition of the config parameter is. It is defined in UserConfig.js. If you add the following, it will import whatever JSDoc info is available in UserConfig.js from the @11ty/eleventy package.

Javascript
/** @param {import("@11ty/eleventy").UserConfig} config */
module.exports = function (config) {

}

Now, you get autocompletion!

default autocompletion in eleventy config file
Autocompletion (autocompletion) for config object in eleventy config file in VS Code :-)

And doc info when you hover over functions!

Hover information on config functions in eleventy config file in VS Code
Hover information on config functions in eleventy config file in VS Code :-)

Some functions in UserConfig.js are missing JSDoc info, therefore you will not see info for all functions. I looked at the issues on the eleventy repo and saw that were some efforts to add more JSDoc annotations to the codebase in the past, but it has fallen by the wayside. That’s the hustle of a big project I guess!

Anyway, this should save you some round trips to the https://www.11ty.dev/docs!

Tagged