Published at
Updated at
Reading time
2min

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!

The challenge of function parameters

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!

Let tooling make code easier to understand

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

Source code with annotations: function doSomething(isGreat, doLater, cleanUpAfterwards) {   // ... }  doSomething(isGreat: true, doLater: true, cleanUpAfterwards: true);

The extension inlines parameter names such as isGreat and doLater.

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

Source code with annotate function arguments: window.addEventListener(type: "click", listener: () => {   // ... });

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

If you enjoyed this article...

Join 5.2k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles