React-Native/React - VsCode Extensions for effective development
Tags: reactnative, vscode, javascript, react
Published: 2021-12-24 09:21:57

---
title: React-Native/React - VsCode Extensions for effective development
published: true
description: "Photo by [altumcode](https://unsplash.com/@altumcode)"
tags: reactnative,vscode,javascript,react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2xxeavv500sukebvrj0.jpg
---


When it comes to react-native development, VsCode is my go-to IDE. I'd want to share my VsCode experience over the last year. So, let's have a look at some of these React/React-Native extensions that will help you out.

**React-Native-Tools** [Install](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)
Using this extension, you can debug your code and quickly run react-native commands from the command palette.


![React-Native tools gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n19epzdkxs9pw3iv9pe.gif)
**VSCode React Refactor** [Install](https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor)
This extension will help you refactor JSX code. It will help you to extract methods from long component and make your code more readable.

![Image for Vscode refactor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5zoc4bhb9kyvuyb8smh.gif)

**Eslint** [Install](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
Linting allows you to check your code for potential errors. This process helps you improve the quality of your code, and helps enforce coding standards especially when you’re working in a team.

![From Giphy.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvrs40f3ze8l1wdx6x81.gif)

**Prettier - Code formatter** [Install](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
Prettier is a JavaScript code formatting tool. It is particularly useful to ensure that all developers working on a project are formatting code the same way.


**Code Spell Checker** [Install]((https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker))
This isn't anything special; it's simply a spell checker for your code. You'll wish you had this after spending 30 minutes debugging only to discover you misspelt a word. Code Spell Checker highlights misspelt terms, saving you time and trouble in the long run.
</pre>
```json
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,
"editor.formatOnSave": true,
```
</pre>


**GitLens** [Install](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
GitLens is a popular extension that enhances VS Code's built-in Git capabilities. It allows you to see who, why, and when a line or code block was changed, as well as hop back in time to learn more about the code's progress.


**Color Highlight** [Install](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
Whenever I have a hex colour in my files, the colour will be set as background of the string.

![Color Highlight ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb6k37zdp9q25ss006g6.png)


**Highlight Matching Tag** [Install](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)
This extension highlights the matching tag when your cursor is placed on one.
**Auto rename tag** [Install](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
If you rename one HTML/XML tag, the corresponding HTML/XML tag is also renamed.

![Auto rename tag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d98egzzmeembk504v4h2.gif)

**Todo Tree** [Install](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
This plugin scans your workspace for TODO and FIXME comment tags and presents them in a tree view in the explorer window. When you click a TODO in the tree, the file will open and the cursor will be placed on the line containing the TODO.

![Todo tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4862k1y4gs9byapgmkkc.png)


**ES7 REACT/REDUX/GRAPHQL/REACT-NATIVE SNIPPETS** [Install](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
For your VS Code, this extension provides JavaScript and React/Redux related snippets in ES7 with Babel plugin options.

**Image preview** [Install](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)
The Image Preview extension provides inline previews for images included HTML file types. The extension shows a pop-up window in the editor surface, and an optional image preview in the gutter, which can be toggled on or off in User Settings.

**Thanks for reading**
Hope this article helps you in some form or the other. Feel free to add your favourite VsCode Extension.


Follow me on [Twitter](https://twitter.com/yrajshekhar231)

**Happy Coding !!!**