Super Useful VSCode Extensions

It’s no secret that VSCode is an awesome text editor, and has quickly become the go-to coding companion for developers in all fields of work.

As such, here’s a list of some of the most useful extensions I’ve come across over the last few years.

It's worth notihg that this list is a little Front End and JavaScript biased due to my interests and profession, but many developers should still find plenty of these extensions useful.

Live Server

Live Server really is a must-have tool. It does exactly what it says on the tin, enabling you to spin up a hot-reloading live server for your client-side projects.

This extension is particularly useful for Front End developers, but comes in handy for almost anyone prototyping applications.

Prettier

Whether you’re tired of formatting inconsistencies between team members or you’re working alone and want to standardise your project files, Prettier is a tried and tested solution.

Use their suggested rules or add your own customisations, and even configure formatting on save.

ESLint

With code formatting taken care of, what about code quality? ESLint will flag up potential issues in your codebase as well as suggest best practice alternatives for common issues.

Color Highlight

Color Highlight is one of those beautifully simple, magical plugins that just makes designing a whole lot easier and more enjoyable.

It analyses all of your Hex or RGB colours and provides a colour preview alongside for a quick visual reference.

Indent Rainbow

Similar to Color Highlight, Indent Rainbow is a simple plugin that can make a big difference. It colour codes the indentation in your code, making it easier to see where blocks start and end at a glance.

This extension is particularly useful for file types that are indentation dependent, such as Python and YAML files. If you're a Front End developer, however, you'll probably find it handy for JavaScript too!

It reminds me of Bracket Pair Colorizer, which turned out to be so integral it became natively supported in VSCode by default.

Polacode

I’m willing to bet you’ve had to take a screenshot or two in your time, especially if you’re creating documentation, working on a team, updating tickets…or all of the above!

Polacode allows you to generate beautiful screenshots of code snippets that will impress even Back End developers.

JavaScript (ES6) Code Snippets

Not much to add here! This ES6 Code Snippets extension comes with all of the latest snippets for ES6 features, with handy tab completion.

ES7+ React/Redux/React Native Snippets

Similarly, this ES7 snippets extension is incredibly useful if you’re using modern JavaScript in your projects.

It comes with shortcuts and tab completion for all of the latest snippets in React, Redux and React Native.

JSON Tools

Sometimes it’s the simple things in life that really make a difference. This minimal JSON Tools plugin does just two things: minifies JSON and prettifies JSON with shortcuts. That’s it, ‘nuff said.

Lorem Ipsum

Have you ever worked on a design prototype and had to manually search for lorem ipsum text to fill out your layouts? I know I have, so I searched for an alternative.

This Lorem Ipsum extension enables you to generate lines and paragraphs on the fly, saving a whole bunch of time.

Tailwind CSS IntelliSense

If you’re a Front End Developer you probably already know how much easier Tailwind CSS can make your design process.

However, referencing the API documentation and trying to remember all those class names can be a pain. Let this Tailwind CSS IntelliSense extension do the hard work for you.

Headwind

With all those Tailwind class names it can become difficult to keep track of what’s where and in what order.

The Headwind extension will magically reorder your class names consistently so you always know where to look.

Bonus: GitHub Copilot

GitHub Copilot is pretty crazy. Essentially, GitHub have analysed billions of lines of code, as well as coding solutions published online on sites like Stack Overflow, to provide you with AI suggestions as you type. It’s currently still in beta and you need to apply for access.

A word of warning, though: I don’t recommend using tools like this when you’re starting out, as there is a risk that they can become a crutch. For more experienced developers, however, this has the potential to really speed up your productivity.

Extensive tools

VSCode has a thriving marketplace of tools to help you and your code.

What extensions can you not live without? I’d love to hear about them - let me know on Twitter.