Featured image of post VS Code extensions worth trying out

VS Code extensions worth trying out

11 extensions to help on your daily work

Follow me

Introduction Link to this section

Visual Studio Code is the most used IDE according to the Stack Overflow 2022’s Developer Survey and it has lots of extensions to help us be more productive. Even developers who use another main IDE probably use VS Code for some part of their jobs.

In this post I’ll show some of the extensions that I use to work, study and write this blog.

1 - Project Manager Link to this section

Project Manager creates an icon in the side bar and lets you save opened folders for quick access. This way you don’t have to look for the project folder every time you open it; just open VS Code and select it from the menu.

I use it in combination with the Git Worktree extension that I talked about in my other post. I save my long lived branches (for example, the main branch) as a project and then I can switch to other worktrees from there.

It also allows you to tag the projects for better organization, so I tag the different components of a solution with the project name.

Project Manager

Download

2 - Compare Folders Link to this section

Compare Folders shows the difference between two folders’ content and displays an editable comparison of the files side by side. It also allows you to copy the files present on only one side to the other.

I use it mostly to compare two branches or two versions of a repository.

Compare Folders

Download

3 - Path Intellisense Link to this section

Path Intellisense shows an intellisense menu for choosing a file name. It works with HTML, CSS, Typescript, Javascript and other types of files.

Path Intellisense

Download

4 - Draw.io Integration Link to this section

Draw.io is a free and open source drawing software that can be used to create diagrams, wireframes, etc.

This extension allows you to open and edit your .drawio files inside VS Code.

Draw.io Integration

Download

5 - Excalidraw Link to this section

Excalidraw is a whiteboard tool that lets you sketch diagrams that have a hand-drawn feel to them. Just like the Draw.io Integration, this extension allows you to open and edit .excalidraw files inside VS Code.

Excalidraw

Download

6 - Docker for Visual Studio Code Link to this section

This extension by Microsoft lets you manage docker images, containers, networks and volumes. It is a great alternative for the Docker Desktop Dashboard, that is now paid for commercial use.

It is really useful for attaching to a running container’s shell or looking into its logs with just one click. It also lets you open and edit files inside the container.

Docker for Visual Studio Code

Download

7 - vs-openapi-designer Link to this section

This extension renders the OpenAPI YAML/JSON document in a side panel for preview. It helps a lot in validating the complex API contracts that have lots of files.

vs-openapi-designer

Download

8 - Terraform Link to this section

Terraform extension adds syntax support for .tf file, with snippets and intellisense.

Terraform

Download

9 - VSCode Great Icons Link to this section

A really well done pack of icons for VS Code. I like it because it has just two variations for the folders, keeping it cleaner than other icons packs, who end up leaving the files explorer confusing.

VSCode Great Icons

Download

10 - Color Highlight Link to this section

Color Highlight shows the preview for colors in your CSS and HTML files.

Color Highlight

Download

11 - Import Cost Link to this section

This extension displays inline information of the size of the imported package. It uses webpack to detect the package size and works with import and require().

Import Cost

Download

Feedly
RSS
LinkedIn
Mastodon
Ko-fi
GitHub Sponsor
Licensed under CC BY-NC-SA 4.0
Built with Hugo
Theme Stack designed by Jimmy