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.
- Easy Snippet - Lets me define and manage my own snippets easily. If you've ever seen me type
lg
which then expands toconsole.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!