8-ish Web Development plugins you need in VSCode

mbvissers.eth
Quick Programming
Published in
5 min readJan 21, 2024

--

Extensibility rules 😎

Photo by Antonio Janeski on Unsplash

We all have some sort of development workflow. We would never want anything to disrupt this flow. But what about tools that help with it? Let’s talk about some of my favorites.

Codeium

Codeium is “just another” LLM like GitHub CoPilot that will help you with programming. Except that it’s free. And while it seems to good to be true, they only capitalize on enterprises. And so far they’re doing a good job on that.

Codeium, like CoPilot and CodeWhisperer, simply tries to autocomplete code for you. And a lot of the times it does make a lot of sense. Especially in web development, which is likely the bulk of the training data.

The best thing (and why I started using it) is that they have plugins for most IDEs, including Eclipse, Neovim, Vim, and Emacs. And that’s pretty wild.

Just check with your company if you’re allowed to use it, because some enterprises are very strict. But either way, it’s amazing for solo projects.

Better Comments

Comments are such a great tool. But it’s a shame that your TODO comments are still in production since you’ve missed them during code reviews.

Thankfully, the Better Comments plugin will make sure you won’t ever miss another TODO comment. But besides that, it will also highlight a bunch of other types of comments. Anything that you don’t want to miss.

Image from VSC marketplace

Our company has this as a preferred extension in most repositories, and I totally agree. It is worth it, just for the TODO comment highlighting.

GitLens

Honestly, if you don’t already have this installed, I’m shocked. With over 28 million downloads, this has to be on top of my list as well. It’s basically git blame on steroids.

It makes sure you can easily check when, and by who, a line of code was committed. It allows the devops to ask the appropriate colleagues about the faulty code in production, and also lets you know that the faulty code was committed by you, 6 years ago. Isn’t that great?

Image from VSC marketplace

And since the git blame functionality is in gray, it doesn’t interfere with your usual flow.

VSCode Vim

Yes, I am one of those people. Learning Vim (or Neovim), can be a great productivity booster. But it can also be fun to try. I used Vim for the first time a year ago because I was intrigued by the quick editing one can do with it and tried it.

It was a steep difficulty curve, but I’ve had a lot of fun trying it out. Even trying to configure my own Vim environment is a lot of fun. But for work, I stick to VSCode.

Just make sure to create a keybind to shut it off if any co-workers want to help you out.

Material Theme Icons

Just a quick plugin to show great icons for each file type. It doesn’t do much else. But it can be good to quickly glance through your file tree.

A Proper Theme

Don’t use VSC’s default theme. Use anything else, and show a little personality!

I’ve used Catppuccin, and I am currently using Gruvbox. It’s fun to switch things up occasionally. And if you can do so with the click of a button, why won’t you try anything else?

I can also recommend Nord and Dracula themes.

From https://draculatheme.com/visual-studio-code

Most big themes also have repositories for anything else you want to style. For example your Kitty terminal, your Tmux, your Neovim, or your Chrome.

From https://github.com/catppuccin/nvim

Appropriate Language Formatters and Linters

Of course, this one speaks for itself.

Basic VSC is good already, but for every language there’s probably a plugin that can enhance your development process.

Think about ESLint and Prettier for web development in JavaScript, TypeScript. Or think about Hardhat’s Solidity plugin for smart contracts. Or even the Lua plugin.

There’s a ton to choose from, but it’s important to have some good tools for your job.

Dev Containers

Development containers are a fairly new but great addition to some company’s development process. Of course, we’re familiar with Docker containers for pushing our computer to production. But how about shipping your computer to the whole development team?

No more problems with nvm , or mismatching TypeScript versions, or database configurations. They’re all taken care of if you create a good dev container file.

We have some projects that use them, and they work really well. Try to look into them, maybe ask if you can use them in your company. It’s pretty dope.

Conclusion

Visual Studio Code is a great IDE for most development tasks. And its extensibility is amazing. So we should probably use some plugins to make it better.

And again. Use a nice theme. It looks lovely.

Thank you so much for reading and have an excellent day.

I am not a part of the Medium partner program anymore so I don’t earn anything from this. Give me a follow and help me spread knowledge for free.

Follow me on Twitter (X) and here on Medium to keep up with me and my projects.

--

--

mbvissers.eth
Quick Programming

I occasionally write about programming. Follow me on Twitter @0xmbvissers