c-espinoza

[c-espinoza]

When it comes to coding, VS Code is without a doubt the most popular choice for a code editor today. Not only does it come with built in support for multiple languages and dozens of useful features such as auto-indentation and bracket-matching, it also has a rich ecosystem of extensions which is what I want to focus on in this blog. I’m going to be covering 5 extensions that you need as a JavaScript developer to make your job easier. 

Babel JavaScript

Babel JavaScript is a syntax highlighting extension that was created by Michael McDermott and currently has over 1 million installs.  This extension provides syntax highlighting for React (including JSX), ES201x JavaScript, FlowType and GraphQL code. Now you might be thinking “doesn’t VS Code already support better syntax colorization?”, and you would be correct. However, Babel JavaScript can be quite useful when it comes to certain types of projects and file extensions.

Side note: It is recommended to use this syntax highlighting with a theme that supports it such as the Oceanic Next Theme shown in the screenshot below. 

Bracket Pair Colorizer 2

If you’re anything like me then you’ve definitely had one of those moments where you either had a missing or extra bracket somewhere in your code and couldn’t figure out what you were missing. That’s where this next extension comes in handy! Bracket Pair Colorizer 2 allows matching brackets to be identified with colors and even lets the user define which tokens to match and which colors to use. See the screenshot below for an example of this extension.

Prettier - Code Formatter

Prettier is by far the most popular code formatting extension with over 16 million installs. According to its Visual Studio marketplace page it “enforces a specific style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary”. It also lets the user customize the formatting settings to their liking. Below is a video by “James Q Quick” that shows exactly how Prettier operates and how to configure the extension. 

Live Server

Live server allows you to launch a local development server with a live reload feature for static and dynamic pages. This is an extremely useful extension due to the fact that having the page reload automatically after changes to files can help to accelerate development.

Simple React Snippets

If you love saving time then you’ll love the Simple React Snippets extension. This extension allows you to save time writing certain lines of code by using a collection of function components and reusable hooks for React known as snippets. Snippets are usually just abbreviated versions of what you’re trying to render. Take a look at the gif below to see an example of how this works. 

Conclusion

Thank you for taking the time to read through and I hope that some of these extensions will be able to help you in the future. I think we can all agree that while extensions may not be necessary, they can definitely be helpful.