React is very popular these days. It’s the number one choice when it comes to building frontend web applications. You can create many awesome things with this amazing library as a web developer. React is a very popular library these days. You can create a lot of awesome things with this amazing library as a web developer.
There are many extensions for Visual Studio Code that can increase your productivity as a React.js developer, especially those who use Visual Studio Code as their primary tool to write frontend applications or write backend applications that communicate with the web.
Most React developers use VSCode as a text editor or an IDE to develop React applications. That’s why there are many useful VSCode extensions that they can use in order to be more productive and speed up their development process.
In the following article, you’ll find a list of the top extensions for writing React.js code with VSCode.
ESLint
This is a life-saving extension for producing greater quality code. It basically integrates ESLint into VS Code. If you are new to ESLint check the documentation.
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.
ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline. — eslint.org
How to Install
Usage
Code name: dbaeumer.vscode-eslint
Downloads: 7,515,220
Open native terminal
Traveling through different directories using the cd command is too much. This little extension helps you to open your native terminal right from vs code current workspace directory. You can open the native terminal with any path, just click the right button on your mouse, then select the option called Open in native terminal (current folder) or Open in native terminal (root folder)
Code name: alexeyvax.vscode-open-native-terminal
Downloads: 3,386
React PropTypes Generate
Adding proptypes manually takes so much time. This extension will automate the generating propTypes and you just need to click on the component and then click ctrl + shift + alt + p. This is the VS Code’s extension that automatically generates PropTypes code for React components, like ReactPropTypes in the Jetbrains’s Platform.
Code name: suming.react-proptypes-generate
Downloads: 3,512
Reactjs code snippets
Whenever we created a new file we manually add the component skeleton and our component can be a class, functional, hooks based, redux based, and many more. This extension can create all those snippets with just a few keys. It contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. This extension has around 50 different snippets.
Supported languages (file extensions)
JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Code name: xabikos.reactsnippets
Downloads: 475,575
VSCode React Refactor
This simple extension provides refactor code actions for React developers.
Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.
Features
Extract JSX element to file or function
Supports TypeScript and TSX
Works with classes, functions, and arrow functions
Handles key attribute and function bindings
Works well with new Hooks API
Code name: plane coding. vscode-react-refactor
Downloads: 12,978
Bonus
Turbo Console Log
Adding a console in multiple areas is time-consuming. To solve this problem I use Turbo console log which basically creates a console with shortcuts and plus point here is that this extension also adds useful info like functions name and variable name in the console.
Code name: chakrounanas.turbo-console-log
Downloads: 91,835
VS Code Extensions for React Native Developers
Visual Studio Code is a Free. Built on open source. Runs everywhere IDE. Visit https://code.visualstudio.com/ to download.
ES7 React/Redux/GraphQL/React-Native snippets
Simple extensions for React, Redux, and Graphql in JS/TS with ES7 syntax
How to Install
Visual Studio Marketplace
Launch Quick Open:
Paste the following command and press Enter
:
ext install dsznajder.es7-react-js-snippets
Usage
This extension cuts down the time you spent writing repetitive boilerplate and gives you a handy shortcut to generate these snippets. For example, typing and pressing the tab on the keyboard will create a React Native Style boilerplate. const styles = StyleSheet.create({})
rfc
import React from 'react'
export default function $1() {
return <div>$0</div>
}
React Native Tools
This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run commands from the command palette. — Extension
How to Install
Before going any further make sure that you:
- have a working React Native environment.
- are using VS Code and have installed this extension from the Marketplace.
- have your React Native project root folder open in VS Code.
Usage
I recommend reading the getting started page of the extension as it provides a detailed guide.
Profile Switcher
Profile Switcher enables you to switch between and set up multiple profiles in your VS Code with various configurations and settings.
This extension is especially useful for content creators such as technical bloggers, YouTubers, etc. Instead of changing your settings/configurations every time you need to show your VS Code screen, you can set up a profile required settings.
Here’s how to switch between two profiles: Default
and Content Creation
.
React Refactor
How to Install
Prettier
Prettier is an opinionated code formatter. It enforces a consistent 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. — prettier
How to Install
Install through VS Code extensions. Search for Prettier - Code formatter
Visual Studio Code Market Place: Prettier — Code formatter
Can also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install esbenp.prettier-vscode
Code Spell Checker
A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Install: https://marketpace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Snippets
Snippets are the best way to save time and increase your productivity. This is not a single extension but a collection of extensions with various snippets for different programming languages.
Below are some popular code snippets extensions:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- ES7 React/Redux/GraphQL/React-Native snippets
- Vue 3 Snippets
For example, it can be quite tedious to repeat the syntax for functional components in React every time you create a new component. Using the ES7 React/Redux/GraphQL/React-Native snippets extension, you can use the shorthand for functional components and hit enter.
Gitlens
Supercharge the Git capabilities built into Visual Studio Code — 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. — gitlens
Highlight Matching Tag
This extension highlights matching opening and/or closing tags. Optionally it also shows the path to tag in the status bar. Even though VSCode has some basic tag matching, it’s just that — basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted. — Extension Page
Auto Rename Tag
Auto rename paired HTML/XML tag
Bracket Pairs
This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
Better Comments
Better Comments is designed to help you write more human-friendly comments in your code.
Clear, digestible comments are beneficial not only for someone going through your code but also for you. It’s quite common for developers to get lost in their own code when visiting it after some time. Having descriptive comments can save a lot of time for you and your team.
With the Better Comments VS Code extension, you can categorize your annotations into alerts, queries, to-dos, highlights, etc.
You can use either of the following characters after double forward-slash (//
):
*
for highlighted text!
for errors and warnings?
for queries and questions//
for strikethroughTODO
for to-dos
Markdown All in One
Markdown All in One is a single extension that takes care of all your markdown needs, such as auto-preview, shortcuts, autocomplete, etc.
Since its release in 2004, Markdown has become one of the most popular and preferred markup languages. Technical writers worldwide widely use Markdown for articles, blogs, documentation, etc., because of its lightweight simplicity and cross-platform usage. Its popularity has given rise to other variants of Markdown, such as GitHub Flavored Markdown, MDX, etc.
For example, to bold some text in Markdown, you can select that text and use the shortcut Ctrl + B
to increase your productivity.
Conclusion
In this article, I decided to give you a list of some extremely useful VSCode extensions that you can use as a React Developer. These extensions are very useful if you want to speed up your development process in VSCode and develop React apps more efficiently.
This is about the best React VS Code extensions available today. Useful if you are using React Native or just need some help when using VS Code to create your React app.