Updated March 17, 2021

Visual Studio Code Setup for React Native Development [2021]

I spend a lot of time working with React Native. My primary interface with my code is Visual Studio Code. The most common question(s) I get on my YouTube videos 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 - 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 - Snippets to make writings tests a little bit easier. I think I remember all of 1 from this list... but it's useful.
  • 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 as I write the code.
  • Prettier - Code formatter - 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 - Snippets that make React Native development easier. I remember about 5 of them... but I use those all the time.
  • 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 - I come from an Atom editor background so I'm familiar with those shortcuts. This just carried them over.
  • Color Highlight - This package will style any colors I have in my code.

1

  • 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 - Autocomplete NPM imports.
  • Path Intellisense - Autocomplete filenames in imports.
  • Rainbow Brackets - Colorizes brackets. It makes finding the related bracket easier in JSON.
  • 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 - Adds different icons for files and folders based on their name. Makes skimming a directory easier.

2

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!

React Native School Logo

React Native School

Want to further level up as a React Native developer? Join React Native School! You'll get access to all of our courses and our private Slack community.

Learn More