Development

Create React App and Standard JS

Michael Crismali — Tandem Alum

(Note: An new post about setting up linting with Standard JS in your projects can be found here.)

Here I’m going to show you how to set up Standard JS in your Create React App. In case you don’t know, Create React App is a fantastic way to get a React web application up and running with no build configuration while Standard JS is JavaScript linter and style guide enforcer that doesn’t require you to make any decisions (beyond whether or not to use Standard JS of course).

If you don’t have an existing Create React App, this will show you how to create one and this will show you how to install it if you don’t already have it installed.

First off, we need to add Standard JS to our project. We’ll go into the root directory of our project and run:

npm install --save-dev standard

Once that’s done, we’ll add lint and lint-fix commands to the list of scripts in the project’s package.json.

{
  //...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    // Our additions
    "lint": "./node_modules/.bin/standard",
    "lint-fix": "./node_modules/.bin/standard --fix"
   }
}

Now if we run npm run lint (assuming we’re in a fresh Create React App app), we’ll see a bunch of lint errors. To automatically clean them up, we can just run npm run lint-fix. Standard fixes our code up for us, but we still get an error that 'it' is not defined. in App.test.js. Create React App has helpfully generated some tests for us using the Jest framework but Standard doesn’t know that Jest is setting up some globals to make testing more convenient. To tell Standard about Jest and these globals, we just need to add to our /* eslint-env jest */ to the top of our App.test.js file and any other test files we end up adding.

Now we can run npm run lint without getting any errors and Standard won’t give us grief as we take advantage of our test framework’s features down the road.

Although we don’t have any lint errors, we’re not necessarily done. Create React App automatically allows us to use incredibly handy ES7 class properties syntax, but Standard doesn’t know anything about that. Whenever we use that syntax Standard will see it as a parse error. To fix this, we need to tell Standard to use a different parser which in this case is the babel-eslint parser. We can install it with:

npm install --save-dev babel-eslint

Then we just need to add Standard configuration to our package.json to specify the new parser.

{
  // ...
  "standard": {
    "parser": "babel-eslint",
  }
}

And just like that you have sparklingly clean and well formatted code in your project. Standard has a ton of different text editor integrations so you can make sure your code stays that way. Plus, you can add npm run lint to your continuous integration build as a last line of defense.

Happy linting!

Tandem is custom software development company in Chicago and San Francisco with practice areas in digital strategy, UI/UX, and custom mobile and web application development.

Michael Crismali