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
.envfiles 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)
Are there any plugins you've uninstalled because they got in your way more than helped?
Yes, I uninstalled prettier, a code formatter, because VS Code already formats your code pretty well for you (Press
CTRL + SHIFT + I).Such a good question! I wish I kept track of which ones I uninstalled.
Rainbow indent is one of those plugins for me. It is just not good for reading.
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
That's awesome! Thanks for the update!
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.
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!!
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.
Where the heck is vim motions plugin?
Great list 👍
I'd add:
File Utils
ext install sleistner.vscode-fileutilsPath Intellisense
ext install christian-kohler.path-intellisenseYou could also add Git Graph
I love code spellcheckers! I wish there were more.
Your link to Auto Rename Tag goes to Auto Close Tag.
Ah, thanks!
You don't need rainbow brackets now. It is built with the latest release of Visual Studio code. You need to enable it.