Introduction

VS Code (Visual Studio Code) is a free and open-source Code editor developed by Microsoft. It is widely used by developers for editing and debugging code across a variety of programming languages.

VS Code is an excellent choice for developing React applications, as it provides several useful tools and extensions that can help you be more productive and efficient.

Some of the benefits of using VS Code for React are:-

• Install the necessary extensions: VS Code has several extensions that can enhance your React development experience. Some of the most popular ones include the Reactjs code snippets, ES7 React/Redux/GraphQL/React-Native snippets, and Prettier - Code formatter. These extensions provide code snippets, syntax highlighting, and formatting features that can help you write cleaner and more efficient code.

• Use the integrated terminal: The integrated terminal in VS Code allows you to run your React application without having to switch between your code editor and command line interface. You can open the terminal by pressing "Ctrl + ` " (backtick) or clicking on "View" in the menu bar and selecting "Terminal".

• Debugging: VS Code's debugging tools can be used to debug your React application, allowing you to set breakpoints and inspect variables. You can use the "Launch Chrome" configuration to debug your application in Google Chrome or another browser.

• IntelliSense: VS Code's IntelliSense feature can help you write code more quickly and accurately. It provides suggestions for completing code as you type, including component names, props, and methods.

• Use the React Developer Tools: The React Developer Tools extension for Chrome and Firefox can be used to inspect React components and their state in real-time. This can be especially useful for debugging and troubleshooting your React application.

In this article we will see 5 useful VS Code extension to make our life easier for developing React Projects

Some useful Extensions

1. ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native snippets is certainly the most used extension for React projects. This extension provide some very useful code snippets which makes writing code very fast.

Some examples of this extension are -

• rcc

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>App</div>
    )
  }
}

• rfc

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

From above snippets we can see that how easy it is to write the template code for our component with just some letters.

More snippet shortcut of this extension can be found here-

ES7+ React/Redux/React-Native snippets.

---

2. Glean

This extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, wrapping with Hooks and more!

Highlights

• Allows extracting JSX into new component

• Allows converting Class Components to Functional Components and vice-verse

• Allows wrapping JSX with conditional

• Allows renaming state variables and their setters simultaneously.

• Allows wrapping code with useMemo, useCallback or useEffect

• Moving code between files

• Typescript support

• ES2015 modules support

• CommonJS modules support

The link for this extension can be found here :-

--> Glean

---

3. 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.

This extension is widely used by developers to write consistently styled code. So if you work on some group project where everyone has their own style of writing code then this extension can help to make everyone's code consistent.

Check more about this extension on VS code marketplace -

--> Prettier

---

4. ESLint

This extension is provided by Microsoft. 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.

On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.

Check more about this extension on VS code marketplace -

--> ESLint

---

5. Auto Rename Tag

This extension is very useful when we change the name of any tag in HTML or JSX. This extension auto-renames the corresponding tag thus making it faster to write code.

Check more about this extension on VS code marketplace -

--> Auto Rename Tag

---

Conclusion

If you are coding in React for a long time then you might be knowing about these extensions and may be using them but if you are new to React then these extensions can be very useful for coding projects in React quickly and efficiently. I hope my suggestion will help you to improve your developer experience. Thanks for reading 😀.