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!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more