VS Code Extensions for React Native Developers
Get productive with these VS Code Extensions for React and React Native.
Visual Studio Code is a Free. Built on open source. Runs everywhere IDE. Visit code.visualstudio.com to download.
ES7 React/Redux/GraphQL/React-Native snippets
About
Simple extensions for React, Redux, and Graphql in JS/TS with ES7 syntax
How to Install
Visual Studio Marketplace
Launch Quick Open:
- Linux: Ctrl+P
- macOS: ⌘P
- Windows: Ctrl+P
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 rnstyle and press 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
About
This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native 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.
React Refactor
About
ESlint
About
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 Instal
Usage
Prettier
About
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 formatted
Visual Studio Code Market Place: Prettier — Code formatted 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.
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 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 colours. The user can define which characters to match, and which colours to use.
Color Highlight
This extension styles css/web colors found in your document.
Install: In VSC press Ctrl+Shift+P (Cmd+Shift+P on Mac) then type “>ext install”, hit enter, search “Color Highlight”.