My Must Have VSCode Plugins

#webdev #productivity #vscode

I was helping someone set up their computer for some L33T CODING 😎🤘 and after I left them to noodle around, I made a list of some of my preferred VSCode plugins that make my life easier.

Code Editing and Productivity

Auto Close Tag: Automatically generate and close HTML or XML tags as you type, reducing syntax errors and improving coding efficiency.
Auto Rename Tag: Automatically renames paired HTML/XML tags, ensuring consistency.
Code Spell Checker: Identifies and corrects spelling mistakes within code and comments, contributing to code quality, readability, and error prevention.

Version Control and Code History

GitBlame (part of GitLens): Provides detailed information about each line of code, including author, commit details and time stamp. (Usually you figure out the person who made the mistake was you all along.)

HTML and Markup Language Support

DotENV: Makes reading and writing .env files easier through syntax highlighting, auto-completion, and error detection.
HTML End Tag Labels: Enhances readability and code accessibility by visually labeling closing tags, aiding in quick identification and preventing syntax errors.
Indent Rainbows: Improves code indentation visibility by adding colorful highlighting to different levels of indentation, aiding in code readability, navigation, and error prevention.

Visual Enhancements and User Interface

Material Icon Theme: This is a personal preference but I find these icons much easier to recognize.
Rainbow Brackets: Improves the visibility of nested structures, aiding in quick identification, and helps prevent bracket-related errors.

What are some of your favorite plugins?

Top comments (16)

Ben Halpern • Dec 14 '23

Are there any plugins you've uninstalled because they got in your way more than helped?

Best Codes • Dec 15 '23

Yes, I uninstalled prettier, a code formatter, because VS Code already formats your code pretty well for you (Press CTRL + SHIFT + I).

Nicole Zonnenberg • Dec 14 '23

Such a good question! I wish I kept track of which ones I uninstalled.

Ivan Jeremic • Dec 15 '23

Rainbow indent is one of those plugins for me. It is just not good for reading.

Sebastian Christopher • Dec 15 '23

A really nice article with a lot of good choices, BUT. Just a heads up, there are a few already supported in vscode by default, keeping your extension list short 😜

1) Auto Close Tag can be replaced with Auto Closing Tags ticked on in settings.
2) Auto Rename Tag with Editor: Linked Editing ticked on in settings.
3) Indent Rainbows with Guides: Bracket Pairs ticked on in settings.
And last but not least
4) Rainbow Brackets with Editor › Bracket Pair Colorization ticked on in settings.

And regarding DotENV. I suggest using direnv that looks inside a .envrc file.
Then when using .envrc it should have syntax highlighting out of the box.

And direnv is always a neat tool to load and unload environment variables anyway.
I hope it helps

Nicole Zonnenberg • Dec 15 '23

That's awesome! Thanks for the update!

Best Codes • Dec 15 '23 • Edited

For me, the most useful extension I have ever used is Codeium. It's a 100% free AI autocomplete extension that has an in IDE chat, function refactoring, an in code editor chat, JS DOC generator, and so much more! Plus, you can track your progress with your codeium profile page.

codeium.com/profile/best_codes

Here's a screenshot:

You can even do an AI search of your codebase, plus the AI knows your project layout and can read context from any file in your project. Overall, it's AWESOME!!

Grant Riordan • Dec 15 '23

Great list as someone who uses vs code, couple more suggestions are

Turbo logger - makes console logging a lot simpler and quicker with customisable shortcuts, emojis and automatically includes the variable you’ve selected to log within the output.
Abracadabra refactor. - great tool for refactoring code, especially global rename functionality.