main banner

Development

My Definitive VSCode Setup for JavaScript/React

Hello everyone, following my previous post “React + Node SSR Basics”, here is the continuation of the topic we reviewed a few days ago.

Today we will not be discussing any code. Instead, we will be talking about something that is fundamental when writing code and without it, there wouldn’t be anything. I am, of course, talking about our code editor, more specifically VSCode.

This is my definitive collection of VSCode extensions for JavaScript/React development.

All the extensions, completely free and compatible with both Windows and Mac, are available on the extension marketplace for VSCode. You can access them by clicking this icon on VSCode:  

Thumbnail

 

General


1. GitLens – Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Thumbnail

 

2. Better Comments

Better Comments, as its name suggests, is a simple yet very useful extension for categorizing comments in your code.

Thumbnail

 

3. Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Thumbnail

4. Polacode

Beautiful screenshots for your code.

Thumbnail

 

5. Material Icon Theme

The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.

Thumbnail

 

JavaScript/React

 

1. ES7 React/Redux/React-Native/JS snippets & JavaScript (ES6) snippets

Both plugins provide a ton of very useful snippets for faster writing. You can choose either one, but I recommend you use both since some have extension-specific snippets.

Click on the links below for the full list of available snippets:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

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


2. glean

The extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, and more! In addition, you can extract regular Javascript/Typescript code between files, while handling exporting the selected code from the old location and importing in the new one!

Thumbnail

 

3. Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Thumbnail

 

4. htmltagwrap

Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).

Thumbnail

 

5. Jest Snippets

Simple, snippets for Jest.

The full list for snippets: https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets

 

Themes

 

Do not forget to add a good-looking theme to your VSCode! There are plenty of them in the marketplace so go check them out!

https://marketplace.visualstudio.com/search?term=theme&target=VSCode&category=All%20categories&sortBy=Relevance

 

And there you have it! This is my definitive setup for JS/React development in VSCode. I hope you found it useful and more importantly, helps you get the most out of VSCode when it comes to JS development!

Joel G.

PC building enthusiast. Enjoys coding and learning new things about it. Favorite video games are: The Elder Scrolls V: Skyrim and Assassin's Creed Odyssey.

Articles