My Favorite Visual Studio Code Extensions - Part I

From time to time, many dev bloggers seem to publish a "Best of VS Code Extensions". I am now one of them and don't want to make an exception here. In today's blog post I'll show you a few of my favorite VS Code Extensions. Since I have a lot of extensions installed, I decided to publish it in several parts. Today we will look at part one.

My Favorite Visual Studio Code Extensions

Bookmarks

Before I found Bookmarks, I had to keep important parts of the code in mind. This went well at first, but as the project grew in size, it became more and more difficult. Now I create bookmarks and jump back and forth so quickly.

-> https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

change-case

Do you often need to quickly change the case of your selection or current word? Then change-case is for you.

-> https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

Docker

Again and again, forget various Docker CLI commands. You might feel the same way. With this Docker extension for VS Code, you can perform various tasks in popular IDE. Build a Docker image, launch an image, view running containers, networks, and more. If you are struggling with CLI commands then this extension is very helpful.

-> https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

ESLint

I am a very big fan of Code Linting. With the help of ESLint, you not only ensure certain code quality but also make sure that a code style is maintained. Furthermore, it helps you to avoid common mistakes. This is a must-have extension for me.

-> https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

File Utils

It is important to have a standard for naming files and folder structure in a project. This makes it easier for newcomers to find their way around. If you accidentally renamed the new file, you can quickly fix the error with this extension.

-> https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

GitLense

GitLense is THE Git extension you want to have in my opinion. With GitLense you can quickly view the diffs of your current changes, see when the line was last edited (Line Blame), and more. Check out the marketplace page to see all the features.

-> https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Headwind

opinionated Tailwind CSS class sorter for Visual Studio Code

That is what Headwind is all about. Chris Bongers shared the extension with me and I love it. Thanks again. I was already looking for an extension like this in the past. Finally, my className values have all the same order.

-> https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

indent-rainbow

The name may make you smile at first sight, but I can tell you that the extension is very helpful. You see at first glance and without having to think much about how the indentations are related.

-> https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Indenticator

Similar to indent-rainbow this extension highlights the current indent depth too. Especially in larger files, this is very handy.

-> https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator

IntelliSense for CSS class names in HTML

IntelliSense makes your life easier. It provides code-completion, content assistance, and code hints for your codebase. Visual Studio Code comes with IntelliSense built-in, but you can install additional ones, like this one. It provides CSS class name completion in HTML.

-> https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

---

Share 💛

Do you like this article? Do you want to support me? Tell your friends on Twitter about it. Thank you!

Questions and Feedback

You got any questions or want to add your thoughts? Let me know in the comments below, please.

Let's connect