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.

While it hasn’t fully replaced my favorite IDE (Integrated Development Environment) when writing PHP backends, I find myself using it more and more for frontend CSS and javascript development. Out of the box it has a great UI (User Interface) and feature set, but with a bit of time and effort you can enhance the core features by installing a few extensions.

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

Dracula Theme

https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

A dark color scheme for code editing, reduces eye fatigue while maintaining good color contrast between dark background and code.

Honorable Mention:

LevelUp Theme

https://marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup

Indenticator

https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator

Clearly shows the indent level of the code, saving time and making code easier to read.

Bracket Pair Colorizer

https://marketplace.visualstudio.com/items?itemName=CoenraadS.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.

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

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.

vscode-icons

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

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

https://marketplace.visualstudio.com/items?itemName=formulahendry.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

https://marketplace.visualstudio.com/items?itemName=formulahendry.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.

Better Comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Basically a code coloring extension for comments, this extension lets you clearly differentiate TODO comments from @params.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

This extension reduces the time needed to insert links and path resources by providing path hinting while you type.

CSS Extensions

CSS Peak

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

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

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

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.

StyleLint  

https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

Tired of tracking down CSS errors? Install and configure this extension to show you errors in your styles while you create it.

JavaScript & Development Helpers

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Save time by fixing errors in your javascript while you type it. We would recommend to globally install ESLint through npm, but beyond that the extension is easy to install and just works.

JavaScript (ES6) code snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

This extension can save you time by providing written shortcuts to common ES6 code snippets.

React-Native/React/Redux snippets for es6/es7

https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

This extension builds on the ES6 code snippets mentioned above, providing snippets for React-Native, React, and Redux.

Debugger for Chrome

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

A tool to help you debug your code in any browser that supports Chrome DevTools protocol.

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

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.

REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

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.

Git

GitLens

https://gitlens.amod.io/

Whether you’re a Git pro or novice, this extension makes working with Git much easier and friendlier.

GitHistory

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

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.