Visual Studio Code Setup for React Native Development [2021]
Tags: reactnative
Published: 2021-04-07 12:32:58

---
title: Visual Studio Code Setup for React Native Development [2021]
published: true
description: A walk-through (with links) of how I have Visual Studio Code optimized for React Native development.
tags: reactnative
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50ckbbo7eeaihjqq0uov.jpg
canonical_url: https://www.reactnativeschool.com/visual-studio-code-setup-for-react-native-development
---


I spend a lot of time working with React Native. My primary interface with my code is [Visual Studio Code](https://code.visualstudio.com/). The most common question(s) I get on my [YouTube videos](https://www.youtube.com/channel/UCEv1DI7Iftd2sWE8gcGG9rg) are always related to my editor...

"What theme is that?"

"How did you get it to autocomplete like that?"

Here are your answers...

## Theme

- [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) - Absolutely fantastic theme available just about everywhere (I also use it in iTerm) and with a light and dark mode. As someone who creates a lot of content where I share my screen I really like that it was built to be accessibly to people with colorblindness.

## React Native Packages

Packages that are directly related to React Native development

- [Jest Snippets](https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets) - Snippets to make writings tests a little bit easier. I think I remember all of 1 from this list... but it's useful.
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Absolute must have for me. It runs eslint inside of visual studio code so I can see if I'm following my [preferred style guide](https://github.com/HandlebarLabs/eslint-config-handlebarlabs) as I write the code.
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Right there with ESLint this is a must have. This package will format my code on save. Consistent clean code makes debugging easier.
- [React-Native/React/Redux snippets for es6/es7](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux) - Snippets that make React Native development easier. I remember about 5 of them... but I use those all the time.
- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) - This package will automatically run my tests in visual studio code and show me which ones are failing right in my editor. I don't have this one configured a lot (I find it to be a bit heavy) but it is useful for quick iteration.

## Other (Relevant) Packages

Packages that support all development I do.

- [Atom Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings) - I come from an Atom editor background so I'm familiar with those shortcuts. This just carried them over.
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) - This package will style any colors I have in my code.

![](1.png)

- [Easy Snippet](https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet) - Lets me define and manage my own snippets easily. If you've ever seen me type `lg` which then expands to `console.log()` you've seen it in action.
- [Npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - Autocomplete NPM imports.
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) - Autocomplete filenames in imports.
- [Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets) - Colorizes brackets. It makes finding the related bracket easier in JSON.
- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) - I like to use `TODO:` in my code to remind me to do something. This just adds a splash of color on that.
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) - Adds different icons for files and folders based on their name. Makes skimming a directory easier.

![](2.png)

- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) - Let's me sync and share my exactly Visual Studio Code setup. You can [sync my entire vscode setup through it](https://gist.github.com/spencercarli/7ef0262c5f294db8a530a991c3e46859).

And that's all, folks! I like to keep my setup relatively lightweight, easy to use, and minimize eye fatigue. I don't use/know a ton of keybindings but the ones I do know save me a lot of time.

Have a package you think I should check out? [Let me know](https://twitter.com/learn_rn)!