VSCode for React Native
An opinionated list of extensions to get the most out of it
A few weeks back one of the most experienced React Native developers I follow, Jani Eväkallio, published a great article about all the different tools Formidable started using this March for a new React Native app.
That gave me the inspiration to dive head first into an issue I faced a lot since I started developing React Native: pick an IDE and correctly set it up — without ending up changing it every other month. As I mentioned in my previous article for React Native starters, finding the proper equipment is a fundamental part of starting on the right foot: so I decided to start fresh, follow my own suggestion and install Visual Studio Code.
It is in fact an excellent editor, with some amazing features; but to have it exactly as I want it for my daily keyboard-smashing life naturally I needed to customise it. A lot.
What will follow is in fact the whole list of extensions and settings I did to transform it from “cool” to “Ok I’m never going to change it” IDE: hopefully you will find it useful, or at least learn about a new extension or two to add to your setup — ready?
Section 1: Fundamentals
Using the previously mentioned article as a guide to navigating the huge sea of the VSCode marketplace, the first few extensions I decided to install were all related to helping me write good&readable code:
- React Native Tools
- Flow Language Support (which requires Flow)
- ESLint (which requires ESLint)
These extensions are pretty self-explanatory, but highly recommend to read carefully the READMEs in order to properly set them up. If you are having an hard time setting them to work properly together, you can have a look at the config files in this repo.
And, of course, I added VSCode to the command line.
Section 2: All the extras
Once I got the primary tools up and running, I needed to go back on the marketplace and add all those extensions that can be categorised, IMHO, as utilities: they all provide small extra features which I find useful.
- Atom Keymap
Having used Atom a lot before, this was the easiest way for me to keep keybindings I already learned.
- Auto Close Tag
- Auto Complete Tag
- Auto Rename Tag
3 extensions to simplify tags management
- Color Highlight
When writing colours in HEX, it may be hard to remember exactly what they look like — this small tool previews it where you write it.
- Document This
I’m a huge fan of proper documentation, and this helps having a standard format everywhere.
- Git Blame
When working on projects with many people, you need to know who did what, but be careful: it’s a double-edge sword ;)
- Path Intellisense
Writing paths when importing components/containers/image always used to led to many mistakes… but then I found this small gem.
- Rainbow Brackets
In RN, you usually end up having lots of brackets everywhere: this provides a small visual help to know which contains what.
- React-Native/React/Redux snippets for es6/es7
- SVG Viewer
- TODO Highlight
Yeah I’m one of those people which constantly bounce between files, projects and such — so I end up writing a lot of TODO/FIX THIS in code comments. This helps me out to see (and not forget) them.
Once all of these add-ons were installed, I really felt that I was good to go; but, naturally, there was one more thing I had to do…
Section 3: Theming
Every developer has his own way of flavouring how his IDE looks: some people like the theme to be bright, others instead wants a more terminal-like UI experience.
I tend to prefer darker colours, like my bud’ Batman.
That aside, I did two other modifications to the IDE appearance: modified the small icons in the project visualisation using vscode-icons and added these three lines to my User settings:
It’s been a couple of weeks since I installed & customised VSCode, and I have to admit I seriously think I won’t change back again to Atom nor Sublime. My coding experience is consistently better now — but hey, I still think those two IDEs are solid options, so don’t feel put aside if you use them ;)
Speaking of comments, do you think I missed some incredibly useful extension? Feel free to share your own list! I am genuinely interested in hearing your feedback & suggestions :)
And, as always,
Happy coding! 🤖
To have the same configuration (more or less) I just listed above in your VSCode, simply install the extension and use this Gist ID: a370736cec25840541f8091270c399be