« Previous Tutorial Next Tutorial »

Welcome back! In our last tutorial we talked about installing and setting up Sublime Text. Now we’re going to get it ready for Node and React development. We’re going to do that by adding packages, which are independent plugins that can enhance Sublime’s functionality, and we’re going to do that by using Sublime’s built-in package control system, which is pretty great.

We’re going to need a few specific things to get started. The first is syntax highlighting for JSX, which is the language we’ll be using for React development. It’s a combination of JavaScript and HTML, and the first time you see it you will probably recoil in horror, but give it a chance; it’s clear and concise and it makes for incredibly readable code. We’ll be getting to JSX in later tutorials, though. Right now we’re just installing the syntax highlighting package.

So first we hit cmd-shift-p in Sublime Text to bring up the command palette (in Windows it’s ctrl-shift-p), and quickly search for “install package” … which will be the first choice by about the time you’ve typed “inst.” By the way, the command palette is awesome and incredibly functional. You could write an entire tutorial on using it, and in fact, Wes Bos did just that in his excellent Sublime Text Power User tutorial set, which includes a book and about two dozen videos. Anyway, click on “install package”—there’s a few second wait as it loads all of the possible packages—and then type “babel” to bring up a list of matching packages. The one we want is Babel - Syntax definitions for ES6 JavaScript with React JSX Extensions. Just click to install. No need to restart Sublime or anything, although you might have to re-open any JSX files you already have open (which is probably none), or manually switch them to “Babel – JavaScript” using the syntax switcher at the bottom right.

We’re going to need a bit more syntax highlighting. We’ll be using Sass in this tutorial to establish a basic CSS skeleton. Sublime doesn’t support it natively, so back we go with cmd-shift-p, install, and then type “sass”. You want the one named, well, Sass There are also full build systems for Sass that incorporate with Sublime, but we’re going to eschew those in favor of bundling everything with Webpack. More on that in a later tutorial.

All right, we’re done with syntax. Now we want to lint! There is an absolutely awesome ESLint package for Sublime Text that will give you real-time linting, showing you any errors you might be making as you’re making them and helping you save time versus running linting scripts manually (though doing that is always a good idea too – don’t worry, we’ll cover it). Linting helps keep your code consistently formatted across dozens of files and who knows how many potential authors. The best thing about this plugin is it will use whatever ESLint settings you configure for your project, so you don’t even have to do things twice!

First you'll need SublimeLinter itself, so ht cmd-shift-p, choose install packages, and type "SublimeLinter". Click to install, and let's add a specific plugin for ESlint. Back to the command palette once more with cmd-shift-p, then choose install packages, then type “eslint” and find SublimeLinter-eslint. Click it, let it install, and you’re good to go.

As you can see, this brings up a package control message which gives you installation instructions for this particular packge. We're not going to cover that in this tutorial, because we're not writing any JavaScript today, but we'll cover it when we get closer to actually doing React development.

Before we wrap things up, let’s talk about snippets for a second. There are some really excellent packages for Sublime that allow you to type a few characters, hit tab, and get a whole ton of code autogenerated for you. It’s incredibly handy once you’ve got the basics of React down, and I will very likely do a tutorial on it in the future, but for now we’re going to start off hand-coding everything so that you really get a feel for what you’re doing and why you’re doing it.

So that’s about it. You’re set up for development. Let’s get Node installed. See you in the next tutorial!

« Previous Tutorial Next Tutorial »