Our top 10 VSCode plugins for development

Nowadays VSCode is by far one of the most (if not the most) used code editor in the game when it comes to writing code for websites and applications. As a matter of fact, if you’re reading this chances are you’re already a VSCode user yourself.

At Yummygum we almost solely use VSCode. This is because of its extensiveness yet simplicity, intuitiveness and (sometimes) speed. Also if you’re using TypeScript, it could be that VSCode is probably your best bet, since it’s equipped with a powerful autocompletion and other useful features like debugging. Oh and fun fact: it’s build by Microsoft and it’s also mostly open-source. This doesn’t only means it’s free, but also that you could contribute by yourself!

What also comes with the pack are (community driven) extensions. Not only do extensions let you write better code. They also give you you the power to be more efficient and collaborate between colleagues or teammates.

Besides its simplicity and minimalist design you’re also able to edit the looks of it by using customized syntax themes which can be installed via extensions.

Building optimized, secure, accessible and performant products is what we focus on everyday. This also comes with the eagerness to seek out for the most handy and enhancing extensions out there and results in optimizing our workflow daily.

About further ado, let’s dive right into the (we think) most useful and handy plugins that are out there;

1. GitHub Copilot

Imagine writing code and suddenly your editor goes; “is this what you mean?”, you press tab and the code you were trying to write is already done. Sounds like magic huh? Well, this is exactly what GitHub Copilot does. It’s an AI powered extension that suggests lines of code as you type. You’ll be a lot faster with this plugin.

2. Live Share

We really love pair programming as resolving complex logic with multiple sets of eyes is a lot easier and more efficient. Live Share enables you to share your code and lets you collaboratively edit and debug. And all of this remote in real time while retaining your own preferences and configs (e.g. keybindings and theme)! It even enables you to receive all of each other’s context from the environment allowing you to collaborate immediately without needing to install dependencies and run the project locally. A must have if you ask us.

3. Inline Parameters for VSCode

Sometimes when reading code from a function, or when you want to use the function, the parameters aren’t always clear. With this extension it makes it a lot easier to understand what different function parameters are available while showing the name inline. No more confusion about finding the needle in the haystack.

Also, this feature is made popular by JetBrains’ IDEs, like WebStorm, PHPStorm and IntelliJ.

4. Import Cost

If you find bundle-size is important (no pun intended) to you, which in most cases you always should, this plugin is a must-have. With Import Cost you are able to view the package’s size in bytes that will hurt or please your users. To lean how and why you should care, check out this blog post.

5. Git Blame

Sometimes the code you’re reading is questionable and should be rethought. In fact, if you are using Git, you could see who wrote this line of code. With GitBlame you’re able to see who wrote the code at a quick glance, right within the bottom bar of your editor.

6. Code Spell Checker

Giving proper naming to your code with the correct spelling is quite hard. Code Spell Checker gives your code a red underline when the spelling is incorrect. It even works with camelCasing. Writing code is hard enough ;).

7. Better Comments

The name kinda gives away what this plugin does. It lets you write better comments since you are able to categorize and apply some extra highlighting, like alerts, questions, TODO’s, etc. It’s possible to edit the config and apply your own colors. Handy and more readable if you ask us.

8. Auto Rename tags

When writing HTML, JSX or other XML format there’s nothing more frustrating than having to edit a tag twice. With this extension you just rename the tag and it automatically renames the paired tag.

9. Version Lens

Keeping your project’s dependencies up-to-date can be quite a hassle at times. But with Version Lens you can easily check which dependency versions within your package.json are behind. Quite handy when you want to use the latest versions.

10. Snyk Vulnerability Scanner

This extension provided by Snyk.io will help you find and fix security vulnerabilities within your code and dependencies. It detects and seeks for security weaknesses, code quality issues and open-source vulnerabilities, just like dog. This way you’ll keep your code secure and clear from any possible risk.

11. Bonus: CityLights

And last but not least: CityLights. Coincidentally, at Yummygum we made a syntax theme for VSCode called CityLights; a gorgeous dark syntax theme designed with focus in mind. Check it out!

Tip: creating .vscode/extensions.json file to recommend others to install extensions.

Do you like VSCode plugins to make your dev-life a little better just like I do? Chances are you might be a good fit for our team. And it just so happened to be we have a Front-end Developer job opening! Do you feel fulfillment from coding products up and adding a dash of ‘ohyeah’ to it and can spot an off-grid pixel from a mile away? We might seeking for a developer like you. Don’t hesitate to slide into our inbox!