DEV Community

Nicole Zonnenberg
Nicole Zonnenberg

Posted on • Updated on

My Must Have VSCode Plugins

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

  1. Auto Close Tag: Automatically generate and close HTML or XML tags as you type, reducing syntax errors and improving coding efficiency.

  2. Auto Rename Tag: Automatically renames paired HTML/XML tags, ensuring consistency.

  3. 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

  1. 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

  1. DotENV: Makes reading and writing .env files easier through syntax highlighting, auto-completion, and error detection.

  2. HTML End Tag Labels: Enhances readability and code accessibility by visually labeling closing tags, aiding in quick identification and preventing syntax errors.

  3. 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

  1. Material Icon Theme: This is a personal preference but I find these icons much easier to recognize.

  2. 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)

Collapse
 
ben profile image
Ben Halpern

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

Collapse
 
best_codes profile image
Best Codes

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

Collapse
 
nikacodes profile image
Nicole Zonnenberg

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

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

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

Collapse
 
sebastianccc profile image
Sebastian Christopher

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

Collapse
 
nikacodes profile image
Nicole Zonnenberg

That's awesome! Thanks for the update!

Collapse
 
best_codes profile image
Best Codes • 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.

My codeium
codeium.com/profile/best_codes

Here's a screenshot:

Codeium features

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!!

Collapse
 
grantdotdev profile image
Grant Riordan

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

  1. 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.

  2. Abracadabra refactor. - great tool for refactoring code, especially global rename functionality.

Collapse
 
m0n0x41d profile image
Ivan Zakutnii

Where the heck is vim motions plugin?

Collapse
 
f1lt3r profile image
F1LT3R

Great list ๐Ÿ‘

I'd add:

  1. File Utils
    ext install sleistner.vscode-fileutils

  2. Path Intellisense
    ext install christian-kohler.path-intellisense

Collapse
 
giorgos profile image
GeorgeNeilyo

You could also add Git Graph

Collapse
 
best_codes profile image
Best Codes

I love code spellcheckers! I wish there were more.

Collapse
 
f1lt3r profile image
F1LT3R

Your link to Auto Rename Tag goes to Auto Close Tag.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

Ah, thanks!

Collapse
 
jalpeshvadgama profile image
jalpesh Vadgama

You don't need rainbow brackets now. It is built with the latest release of Visual Studio code. You need to enable it.

Collapse
 
rahulkag profile image
rahulkag • Edited

Along with these I also use 'import sorter' which will automatically sort the import stmt and remove the unused import from file.