VSCode Extensions That Makes My Work Easier: A Review

14 Jan 2023 | 7 mins read

vscode extensions

🔊 PLAY THIS ARTICLE

If you’re a developer, you probably use VSCode. It’s one of the best code editors out there. It’s fast, lightweight, and has a lot of great features.

In this blog post, I’ll share some of the VSCode extensions that I use on a daily basis. These extensions make my work easier and help me write better code.

I bet you’ll find some of these extensions useful too.

📍 No theme or color scheme is included in this list. Only extensions that make my work easier.

📍 I didn’t include formatting and linting extensions because there are a lot of them and you can choose the one that suits you best.

📍 This list is not ordered by importance.

📍 This list is my personal opinion. I’ve tried to include the best extensions for developers. If you think I’ve missed something, please let me know in the comments 👇

Enjoy! 💖

1. Version Lens

Version Lens This extension shows version information when opening a package or project for one of the following:

dotnet https://www.dotnetfoundation.org/
dub https://code.dlang.org/
jspm https://jspm.io/
maven https://maven.apache.org/
npm https://www.npmjs.com/
pub https://pub.dev/
composer https://getcomposer.org/

2. Tailwind CSS Highlight

Tailwind CSS Highlight This extension highlights the utilities of TailwindCSS.

This extension is useful for developers who use TailwindCSS. It helps you see the utilities you are using in your code.

3. SonarLint

SonarLint This extension helps you detect and fix quality issues as you write code. It supports C, C++, HTML, Java, JavaScript, PHP, Python and TypeScript, and more.

This extension lets you fix coding issues before they exist! Like a spell checker. It’s a great extension for developers who want to write better code.

4. Snyk Security Extension

Snyk Security Extension This extension helps you find and fix vulnerabilities in your code.

It scans and provides analysis of your code including open source dependencies and infrastructure as code configurations

5. Snippet Creator

Snippet Creator This extension helps to automate snippet creation. Select the code you want to create snippet from and use command Create Snippet from the command palette or your custom keybind. Very useful for developers who want to create snippets at a faster pace.

6. Import Cost

Import Cost This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

This extension is useful for developers who want to know the size of the imported package. It helps you keep your codebase small.

7. Console Ninja

Console Ninja Console Ninja is a VS Code extension that displays console.log output and runtime errors directly in your editor from your running browser or node application. It’s like your browser dev tools console tab or terminal output from your node app, but instead of having to context switch, values are connected to your code and displayed ergonomically in your editor.

No more digging through your browser console or terminal output to find the right value. No more context switching between your editor and browser console.

8. Turbo Console Log

Turbo Console Log This extension helps you log variables and objects in the console with a single button press. This extension make debugging much easier by automating the operation of writing meaningful log message.

9. Transformer

Transformer My favorite extension 💖. It helps you transform text in various ways. It’s a great extension for developers who want to transform text in various ways.

Align CSV - Align To Cursor - Compact CSV - Copy To New Document - Count Duplicate Lines As New Document
Encode / Decode - Filter Lines As New Document
Filter Lines - Join Lines - JSON String As Text - Lines As JSON String Array
Normalize Diacritical Marks - Randomize Lines - Randomize Selections - Reverse Lines
Reverse Selections - Rotate Backward Selections - Rotate Forward Selections - Select Highlights
Select Lines - Selection As JSON String - Sort Lines By Length - Sort Lines
Sort Selections - Split Lines After - Split Lines Before - Split Lines
Trim Lines - Trim Selections - Unique Lines As New Document - Unique Lines

10. Inline Fold

Inline Fold mimics VS Code’s folding experience for inline code. This is especially useful when working with frameworks like Tailwind CSS which use lots of utility classes that often disfigure code visual structure. You can expand the folds by clicking on them. You can also configure the extension to target specific attributes in your markup. The characters used as a mask can be configured in the settings and you can update the regex expression to match any code pattern you want. The extension also enables folding of attribute values within HTML/JSX tags. It makes your code tidy and easier to navigate.

11. i18n Ally

i18n Ally One of the best extension for developers who work with internationalization. It helps you manage your translations in a better way. It supports JSON, YAML, PO, XLIFF, CSV, and more.

12. GitHub Copilot Labs

GitHub Copilot Labs It’s not the Copliot extension you know. It’s a companion extension to GitHub Copilot that houses experimental and up-and-coming features in a sidebar.

📍 You must have the main extension of GitHub Copilot installed alongside Labs.

13. Git Tree Compare

Git Tree Compare This Visual Studio Code extension helps you compare your working tree against a branch, tag, or commit in a natural folder tree structure or a flat list.

It is perfect for keeping an eye on what your pull request will look like, a pull request preview one could say. You don’t have to leave your editor at all anymore!

14. FigStack

FigStack helps you read, write, and understand code. Currently, Figstack can answer questions, explain code, generate documentation, and calculate the time complexity of functions.

Similar to Copilot, Figstack can help you write code faster. You can:

ask Figstack to explain code
generate documentation
calculate the time complexity of functions.
and more.

15. Error Lens

Error Lens This extension helps you see errors in your code without leaving the editor.

It will improve highlighting of errors, warnings and other language diagnostics.

16. arrr

If you’re an Angular developer, you should try arrr extension.

It is a first extension that provides Rapid Refactoring for your Angular codebase.

Features:

Allows extracting HTML into new component
Automatic Modules Updates
Generates HTML, CSS, TS and spec files

17. vscode-pets

vscode-pets is a fun extension that adds pets to your VS Code. You can feed them, play with them, and even take them for a walk.

It’s a great extension for developers who want to have fun while coding.

I know it’s not a serious extension… but it’s fun 😄. You can try it.

Final Words

I hope you enjoyed this list of the best VS Code extensions for developers. If you have any questions, feel free to ask in the comments section below.