Setting Up Sublime Text 3 for ReactJS

Adrian Li
Adrian Li
Dec 7, 2015 · 2 min read

Note (2017–02–13): I wrote this more than a year ago, so things may be a little out of date. That being said, take a look at the comments as some kind readers have offered some updates. As for me, I use Nuclide now (Facebook’s flavour of Atom) and I think it’s a superior experience.


I recently upgraded to Sublime Text 3 and rather than copy over my old packages, I decided to start fresh. I’m assuming that you already have the Package Control Package Manager installed and you know how to use it. If not, go here: https://packagecontrol.io

JSX/Babel Syntax Highlighting

First thing I did was install the Babel package. This is pretty straight forward, just look for Babel in the list of available packages and install it.

AutoComplete ReactJS: Babel Snippets

Then install the Babel Snippets package. This makes it easy for you to write common React functions. Again, this is straight forward: just look for the Babel Snippets package and install it.

AutoComplete JSX/HTML: Emmet

Another frustrating part of writing code in React is the use of JSX or HTML-like tags. I find it annoying that I always have to type the closing tag manually. Thankfully, we have Emmet to save the day.

In order to get Emmet to work in JSX files, you’ll need to add the following to your Key Bindings — User file (you can access it under Preferences):

A Linter: SublimeLinter

A linter is helpful for many reasons, but mostly it’s good for reducing bugs and maintaining good practices in your code. SublimeLinter allows you to add linter plugins.

The plugin you want is: SublimeLinter-contrib-eslint

Before you install the plugin, you’ll have to install the SublimeLinter package, but it’s pretty straight forward to do so. Just look for the SublimeLinter package.

Note that you’ll also need to have the ESLint binary installed as well. The official guide here will tell you how to do all that: https://github.com/roadhump/SublimeLinter-eslint

As for configuration, you’ll add a .eslintrc file to your project folders. In order to enable ES6, JSX, and modules, you’ll need to have the following rules in the config file:

That’s It!

There’s probably a lot more that you can do. But these few simple packages have made my coding 100x more enjoyable. I trust that it will help you do the same!

Adrian Li

Written by

Adrian Li

Developer at Truffle/Consensys