Preface: The ClamAV antivirus article is delayed until next week. In the meantime, enjoy a shorter yet useful article about some of the most useful and lesser-known Visual Studio Code extensions I get to use.

Color Info (bierner.color-info)

Color Info is a useful extension developed by Matt Bierner allowing you to preview colors in your code. It is particularly useful when you are working with CSS or SCSS files and need to quickly check the color of a specific element. It also works with other languages such as HTML, JavaScript, and TypeScript.

As a colorblind person, I find this extension particularly useful as it allows me to quickly check the color of an element without having to rely on my memory or the color picker tool.

Error lens (usernamehw.errorlens)

Error Lens is a great extension allowing you to see the error messages/warnings directly inline with your code. It is really convenient if you are seaching for a specific error with the line number and the error message is displayed directly in front of you.

GitLens (eamodio.gitlens)

GitLens (by Eric Amodio from GitKraken) is a powerful extension that allows you to see the history of a file, the author of a specific line, and the commit message directly in the editor. It is particularly useful when you are working on a project with multiple contributors and need to know who wrote a specific line of code.

This is also very useful when debugging as you can see if a specific line was added in a specific commit and check the commit message to understand why it was added in the first place.

Seeing the time since a line was modified can also help to spot legacy code that might need to be refactored.

Import Cost (wix.vscode-import-cost)

Import cost is a fairly simple plugin that allows you to see the size of a package you are importing in your code. It is particularly useful when you are working on a project with a size constraint and need to keep the size of your bundle as small as possible (for example, if you are working on speed optimization).

Playwright Test for VS Code (ms-playwright.playwright)

This extension allow you to get completion and validation for Playwright test files. It is particularly useful when you are working with Playwright and need to write tests for your application.

It also allows you to use codegen directly in VS Code to generate test cases by performing actions in a browser.

For more information about Codegen, you can read this article.

Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss)

Tailwind CSS IntelliSense is a great extension that allows you to get IntelliSense for Tailwind CSS classes in your HTML, JavaScript, and TypeScript files. It is particularly useful when you are working with Tailwind CSS and need to quickly add a class to an element.

I find the hover feature particularly useful as it allows me to quickly check the properties of a specific class without having to look at the documentation.

Turbo Console Log (ChakrounAnas.turbo-console-log)

Turbo console log is a simple, time-saving extension by Anas Chakroun that allows to quickly generate console.log statements in your code. It is particularly useful when you are debugging and need to quickly check the value of a variable.

The default format is:

console.log('🚀 ~ classWrappingVariable ~ functionWrappingVariable ~ variable', variable);

But you can customize it to fit your needs.