DEV Community

Cover image for Visual Studio Code Setup for React Native Development [2021]
Spencer Carli
Spencer Carli

Posted on • Originally published at reactnativeschool.com

3

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.

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

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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay