VSCode for React Native

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

Had to do this (again)

A while back, one of the most experienced React Native developers I know, Jani Eväkallio, published a great article about all the different tools Formidable started using this last 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 (almost) 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!

To make it easier for you folks to install this list of extensions, I’ve (finally!) created a VSCode Extension Pack, RN Full Pack. By installing this, you won’t need to install them all one by one ;)

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. Babel JavaScript
   Which is fundamental for proper styling, since we’ll use “future-JS” (ES6+).
3. Flow Language Support (which requires Flow)
   Why you need a static type-checker? Read here. And here’s an introduction to it.
4. ESLint (which requires ESLint, obviously)
   A Linter is conceptually a tool that runs through your code and tells you what you can do to write it “better”. (here’s a better explanation)
5. Prettier — JavaScript formatter
   Which is literally a game changer — and if you are not into it, try reading my 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, I’ve done most of the work for you in this repo over here, called react-native-starting-point. This will help you up get up & running quickly with these core features: check what I wrote in the various config files and replicate that in your setup.

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. 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 ;)
7. Path Intellisense
   Writing paths when importing components/containers/image always used to led to many mistakes… but then I found this small gem.
8. Rainbow Brackets
   In RN, you usually end up having lots of brackets everywhere: this provides a small visual help to know which contains what.
9. SVG Viewer
   From time to time I end up needing to add some SVGs to my code, and being able to see both the code and the image is 💯
10. 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.
11. change-case
    To, well, be able to quickly change how I wrote something.
12. Code Spell Checker
    Since I tend to do do typos and grammar errors, this is a blessing.
13. npm & npm intellisense
    Living in a node_modules world means that these two extensions are 👌

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, and when I first wrote this article I set up Code to use the mirage version of Ayu; other two good themes I felt I could suggest were Darktooth and One Dark (Sublime Babel).

But, since a month or so, I switched to what to me is the definitive theme: Bimbo. Dark but without being too “active”, and with an amazing color palette for which my eyes thank me constantly. (you can read about how it come to be here)

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 while 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 my exact configuration (which is mostly the one I just listed above) in your VSCode, simply install the extension and use this Gist ID: b2763bc4563bd4ddacefb4ed9e5a4f2d

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

Bonus extension#3: lately I’ve been writing a lot of Markdown (who doesn’t, anyway?) so I felt I need to add here two extensions that help me a lot to style everything properly: Markdown All in One & markdownlint.

Bonus extension#4: Wes Bos started using VSCode too, and you can find a mega thread about tips/packages/plugins here.

If you like writing React Native code, consider following me here or on twitter to stay updated with my unusual writing scheduling 🤓.