Sublime Text Setup

NOTE: Your mileage may vary, depending on project, and/or perhaps you prefer a different IDE altogether.

The principles here are what we're shooting for, not necessarily that everything be used verbatim.

In the interest of automating code quality, and cutting down on the necessity for manual code reviews, we strongly urge each front-end developer to install these Sublime Text packages.

Babel
SublimeLinter
SublimeLinter-contrib-eslint
SublimeLinter-contrib-eslint_d
Syntax Highlighting for Sass

STEP 1: Install Package Control

Go here, and install Package Control…

https://packagecontrol.io/installation

After installation is complete, restart Sublime Text and go to:

Preferences → Package Control

You should see a menu pop up that looks similar to this:

STEP 2: Open "Install Packages" Window

Next, bring up the "install packages" window. Type the word "install" in the Package Control window's text field, and you should see a few choices. Choose the first one: "Install Package."

^ Depending on network latency, this window may take a bit of time to appear, but you should see a (textual) progress bar of sorts, animated in the bottom left of the Sublime Text window.

If you accidentally install an incorrect package, you can always remove it by bringing up the Package Control window and typing "remove package."

STEP 3: Install Each Package

Type in the name of each package you wish to install, and choose it from the list. Repeat this step until you've installed all the packages you need.

^ In this screenshot, packages are being displayed that have a fuzzy match to letters in the word "babel."

STEP 4: Verify Install

Once you're confident you've installed all the requisite packages, restart Sublime Text. To verify that they were installed, bring up the Package Control window again via Preferences → Package Control and type "list packages."

You should see a listing that looks similar to this screenshot:

STEP 5: Configure ESLint

We use the "JavaScript Standard Style" for our JS code conventions. However, we do so via ESLint, as the tooling around ESLint seems to be far more robust than the tooling that exists specifically for Standard.

http://standardjs.com

Here is an example package.json file from our "React starter" project…

https://github.com/t7/react-starter/blob/master/package.json

Plus, we go even more strict! We disallow use of the var keyword, thereby enforcing the use of const (most of the time) or let (in block scope). Essentially, there's really no reason to use var anymore, so we just don't.

We also flag any console.log as an error, so we remember not to leave them in our code when committing back to source control.

The following is the contents of our .eslintrc.json file, which enables these rules…

{
  "extends": [
    "standard",
    "standard-react"
  ],
  "rules": {
    "no-console": [
      "error",
      {
        "allow": [
          "warn",
          "error"
        ]
      }
    ],
    "no-var": "error"
  }
}

STEP 7: Code with Confidence

Now, as you go about your coding, you should see incremental errors being flagged for review.

For instance, in this screenshot, foo is being flagged because it is instantiated, but is never actually used. This is the no-unused-var rule in ESLint (used by Standard).

nathansmith/sublime_text_instructions.md

Sublime Text Setup