14 Must-Have VSCode Extensions I’m in Love With!

Hello! Below is a list of useful Visual Studio Code extensions that I use every day. I would appreciate it if you could share any extensions you use to make this list more comprehensive for other readers. Thanks for contributing!

1. Code Spell Checker

I can’t even imagine how many social points I’ve lost due to spelling mistakes in my PRs. Recently, I found Code Spell Checker. Everything it does is simply underline spelling mistakes.

It has a large library of words. Additionally, you can easily add your own words to the library with just two clicks:

Hover on word > Quick fix > Add to user settings

2. Error Lens

Do you struggle to read errors? Error Lens simplifies the process by showing error messages right at the end of the line, helping you quickly spot and fix issues:

3. Code Snap

Want to showcase your cool code snippets even if you don’t have a Mac? CodeSnap can help you with that.

Simply select the code you want to highlight and enter the command CodeSnap📸to create snaps like this:

You can even customize various aspects such as background color, title, line numbers, Mac window buttons, and more by going to: settings > extensions > CodeSnap

4. Better Comments

Better Comments is actually my favorite one from this list. With this extension, you can:

To edit default or add custom comment types, go to:

settings > extensions > Better Comments > Tags

5. Peacock

Tired of trying to find right vscode window when inspirating your (or not) code form another project? With Peacock you can set window (or its parts as in my example) colour to easest navigation.

Tired of trying to find the right VS Code window when drawing inspiration from another project? With Peacock, you can set the window color or its parts, as in my example, for easier navigation.

It works really well and has saved me a lot of time and nerve cells.

6. Snippet Creator

Snippet Creator allows you to create custom snippets without the pain of configuration.

To create a new one, you need:

1. select the code
2. cmd: create snippet
3. select language
4. enter name
5. enter prefix

7. Material Icon Theme

Material Icon Theme will add cool icons to your files:

To use them, you need:

1. Download extension.
2. Set it up: settings > extensions > Workbench: Icon Theme

You can check all icons in extension repo.

8. Rainbow CSV

Rainbow CSV will make your CSVs more readable by adding some colours:

9. Git Graph

Git Graph can add development tree to your vscode:

Type command View Git Graph to open current project tree.

10. Tabnine: AI Autocomplete

If you’re broke and can’t use GitHub Copilot, Tabnine is the best option.

Tabnine is a free alternative to Copilot, although it won’t do your job for you. However, it can certainly speed up the process of writing similar code pieces.

11. Tailwind Fold

With Tailwind Fold, you can bid farewell to messy and hard-to-read HTML code. This extension will help you enhance the readability of your code by automatically “folding” long class attributes.

I really like and use this one every day. You can set your key bindings by editing:

settings > keyboard shortcuts > Toggles automatic class attribute folding

12. Svg Preview

I don’t know why this feature isn’t built into VSCode…

SVG Preview allows you to see SVG images instead of code.

13. Image Preview

This is a pretty cool one. Image Preview will show a little image preview for every line of HTML code where you have an image path. Also, hovering over the image path will display a card with the image, metadata, and a link to open it in folders.

By the way, this silly black gato is named Jinx. Here’s her Instagram. 🐈‍⬛

14. Toggle Quotes

Extension Toggle Quotes allows you quickly switch between quotes:

" > ' > `

Thanks for reading! Questions or need more info? Just ask. Your suggestions to improve the article are welcome in the comments. Thanks for your input!

Links section:

☕️ By me a coffee.