Development

React with Standard JS and Snazzy: 2017 Edition

Michael Crismali — Tandem Alum

last updated April 27, 2017

It was only a few months ago I wrote a blog post on how to set up Create React App with Standard JS, but in that short amount of time things have changed. The process is a little different now and, more importantly, the last time around I forgot to mention that this set up will probably work for any React project, not just those that have been generated with Create React App. Before we dive in (again) let’s make sure we understand what all of the pieces are.

Standard JS is a JavaScript style “to rule them all” or put another way, it’s an opinionated linter that can fix up your code up for you.
Snazzy is formatter for the output produced by Standard JS that makes it look, well, snazzier as well as much easier to read.
Create React App is a great tool that allows you to “Create React apps with no build configuration.” Pretty straightforward (Again, your project doesn’t need to have been created with Create React App, but it’s what I used to make the example).

First, you’ll want to head to the root directory of your project and add Standard and Snazzy as devDepenencies.

yarn add --dev standard snazzy
# or if you're not using Yarn
npm install --save-dev standard snazzy

Then you’ll want to add the lint command (standard --fix | snazzy) to the scripts section in your package.json.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "standard --fix | snazzy"
  }
}

This runs the standard command and pipes the output to Snazzy to get prettied up. I’ve also included the --fix argument for Standard so it automatically corrects our code for us. If this is too forward for you, you can always leave it off so the command ends up looking like standard | snazzy.

Now you can run yarn lint or npm run lint to see what style changes need to be made to your app.

If you run the command with the --fix option, you’ll only have one error: 5:1 error 'it' is not defined. By default, Standard doesn’t expect there to be globals like it from Jest in the test file. We could add it to a whitelist of globals so that Standard ignores it, but it’s better to simply tell Standard about Jest globals by adding /* eslint-env jest */ to the top of our test files. Now when we lint there are no errors!

This is great, but we’re not quite done yet. Standard doesn’t assume we’ll be using lots of cool ES6 and ES7 features like the class properties syntax (which is, uh, standard for Create React App), so let’s make sure Standard doesn’t freak out once we start using these features. For example, if you made use of the class properties syntax, you’d get an error that looks like Parsing error: Unexpected token =.

To get past this issue we just need to add babel-eslint to the project and make sure Standard uses it. First add it as a dependency.

yarn add --dev babel-eslint
# or if you're not using Yarn
npm install --save-dev babel-eslint

Then we just configure Standard to use babel-eslint in our package.json.

{
  "standard": {
    "parser": "babel-eslint"
  }
}

Now when we lint while using the fancy, new JavaScript syntaxes we won’t get any parsing errors and we’ll have a great looking, consistent codebase. I’d also recommend that you add some kind of Standard JS integration to your text editor and add our lint command to your continuous integration process (If you use Codeship, check out Harbor!). A pre-commit hook for Git isn’t a bad idea either ?.

All of the code (with step-by-step commits) for this post can be found here on Github.

Thanks for reading and happy linting!

Photo credit: Petras Gagilas. License. Original uncropped.

Tandem is custom software development company with practice areas in digital strategy, human-centered design, UI/UX, and web application and custom mobile development.

Michael Crismali