A VSCode extension to understand function parameters

I'm super happy with my VSCode setup, and that's why I rarely install new extensions these days (find a list of my installed extension in my dotfiles). I found out about the Inline Parameters VSCode extension today, and it was worth an install!

I'm always in favor of avoiding more than three function parameters or single boolean function parameters. If you're not following such rules, code becomes hard to follow and function calls hard to understand.

Consider the following example:

function doSomething(isGreat, doLater, cleanUpAfterwards) {
  console.log(isGreat, doLater, cleanUpAfterwards);
}

// uff, that's hard to understand ...
doSomething(true, false, true);

At first sight, the doSomething function definition might not look too bad, but when you discover a doSomething call there is no way to understand what this function is doing and what these arguments mean. You have to navigate to the function definition to find out what's going on. That's not great!

That's why I'm always favoring an options object when a function needs various parameters. It's more characters to type, but improves readability tremendously.

function doSomething(options) {
  const {isGreat, doLater, cleanUpAfterwards} = options;
  console.log(isGreat, doLater, cleanUpAfterwards);
}

// Ahh, that's way better!
doSomething({
  isGreat: true,
  doLater: true,
  cleanUpAfterwards: true
});

Unfortunately, you'll discover messy function definitions all the time, but you can't refactor and change function definitions all the time. This situation is when VSCode tooling can help!

The Inline parameters VSCode extension annotates the function arguments with their parameters names.

The extension inlines parameter names such as isGreat and doLater.

It inlines parameter names for native DOM methods, too. 😲

Great stuff! I can't wait to write some code with this new extension!