Over the years we have used a number of different text editors. From BBedit back in the day to more recent Sublime Text, there haven’t been too many editors that we haven’t worked with. One of our current favorite text editors is Visual Studio Code, an open-source editor with a ton of extensions that help make you more efficient in writing clean, beautiful, and error free code.
To save you time, we have compiled a list of some of our favorite extensions for you to try out and see how they can help you.
Editor Ease of Use and Code Legibility
A dark color scheme for code editing, reduces eye fatigue while maintaining good color contrast between dark background and code.
Clearly shows the indent level of the code, saving time and making code easier to read.
Bracket Pair Colorizer
Along with Indenticator, this extension helps code legibility by providing color matching to code brackets. So if you are tired of trying to line up mustaches within your code, install this extension and enjoy.
Helps you find trailing spaces at the end of lines or in line breaks. You can do the same thing through commands, but sometimes seeing the trailing space and removing it by hand is just easier.
This makes working with files a bit cleaner and prettier. There are a few icon extensions out there, but this particular one works very well.
Auto Close Tag
Saves you time while writing by automatically creating a closing tag while you code. It works well out of the box but if you write a lot of XML structure that doesn’t have a closing tag, it also has configuration options to customize it to your needs.
Auto Rename Tag
This extension works well with the Auto Close Tag extension in that it allows you to change both the open and closing tag of an element. So, if you need to change an h3 element to an h4, you just have to edit the opening h3 and this extension will take care of the closing tag.
Basically a code coloring extension for comments, this extension lets you clearly differentiate TODO comments from @params.
This extension reduces the time needed to insert links and path resources by providing path hinting while you type.
I like to think of this as the code hint tool for CSS. It lets you see the style markup for classes and IDs while working on your template code.
Intellisense for CSS class names in HTML
Intellisense is one of the best ever tools to come out of an IDE, and we are glad to see it on CSS. Simply start typing a class and this extension will show you all the variants that you could choose from. This helps remove guessing and back-and-forth checks with your CSS.
Tired of tracking down CSS errors? Install and configure this extension to show you errors in your styles while you create it.
This extension can save you time by providing written shortcuts to common ES6 code snippets.
React-Native/React/Redux snippets for es6/es7
This extension builds on the ES6 code snippets mentioned above, providing snippets for React-Native, React, and Redux.
Debugger for Chrome
A tool to help you debug your code in any browser that supports Chrome DevTools protocol.
Do you really need to import that? This extension shows the file size cost of importing packages into your code, letting you make better decisions on what packages you really need and which ones can be removed due to weight or limited use.
This extension can save a TON of time when working on RESTful application development by letting you run HTTP requests and CURL commands from within your editor.
Whether you’re a Git pro or novice, this extension makes working with Git much easier and friendlier.
A nice tool for searching through your git commit history for changes and comments. So if you are not writing good commit comments, tools like this will give you a bit of incentive to do so.
Not seeing one of your favorite extensions? Let us know what your favorite extensions are @fuzzyduckdesign #VSCodeExtensions.