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.

• Settings Sync - Let's me sync and share my exactly Visual Studio Code setup. You can sync my entire vscode setup through it.

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!