VSCode for React Native

An opinionated list of extensions to get the most out of it

Had to do this (again)

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.

We are going to need extensions, lots of extensions

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?

that’s the spirit!

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:

  1. React Native Tools
  2. Flow Language Support (which requires Flow) (why you need it? Read here)
  3. ESLint (which requires ESLint)
  4. Prettier — JavaScript formatter (an in-depth)

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

Like a button for rocket speed

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.

  1. Atom Keymap
    Having used Atom a lot before, this was the easiest way for me to keep keybindings I already learned.
  2. Auto Close Tag
  3. Auto Complete Tag
  4. Auto Rename Tag
    3 extensions to simplify tags management
  5. 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.
  6. Document This
    I’m a huge fan of proper documentation, and this helps having a standard format everywhere.
  7. 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 ;)
  8. Path Intellisense
    Writing paths when importing components/containers/image always used to led to many mistakes… but then I found this small gem.
  9. Rainbow Brackets
    In RN, you usually end up having lots of brackets everywhere: this provides a small visual help to know which contains what.
  10. React-Native/React/Redux snippets for es6/es7
  11. SVG Viewer
  12. 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.

There are like a billion different themes out there, but I’m currently using the mirage version of Ayu; other two good themes I feel I can suggest are Darktooth and One Dark (Sublime Babel).

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 ;)

Let’s just all be friends!

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! 🤖

Bonus extension: as suggested by Gant Laborde, I installed Settings Sync in order to backup my settings and be able to share them with you all easily!

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

Bonus extension#2: as suggested by noitidart, I installed Copy Relative Path — a cool little extension that helps out when handling complex paths.

Consider this article as an appetiser: I’m writing a series called “React Native Nuggets” with tips and tricks I wish I knew when I started — you can find the first one here, but you should consider following me here or on the twitter-sphere to know when new episodes are out.