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