Add Standard JS to create-react-app project

standardJS-in-CRA.md

Standard JS in create-react-app

I've been using create-react-app lately as I find it very useful to kick things off while starting a project. I almost always follow JavaScript Standard Style and I found myself googling it so I figured out I should write it down.

Get Standard JS

I really like keeping dependencies as local as possible but if you prefer you can install it globally.

yarn add standard --dev

or

npm install standard --save-dev

Add linting scripts

If you don't install the package globally you won't be able to use it in the CLI, it's really handy to have a command to lint and/or lint --fix your project though. All you have to do is add these two scripts to your package.json.

{
  "scripts": {
    "lint": "./node_modules/.bin/standard",
    "lint-fix": "./node_modules/.bin/standard --fix"
   }
}

Excluding build directory

Even though standard automatically excludes certain files it doesn't exclude CRA's build directory out of the box. To tell it to not lint this directory just add this to your package.json.

"standard": {
  "ignore": [
    "build/*"
  ]
}

Linting Jest test files

CRA uses Jest as test runner and if you try to lint your project you'll get a linting error on your *.test.js files:

standard: Use JavaScript Standard Style (http://standardjs.com)
  ~/project/src/tests/App.test.js:5:1: 'it' is not defined.
error Command failed with exit code 1.

That error shows up because Jest is using some global variables, luckily enough all we have to do is remember to add /* eslint-env jest */ at the top of our *.test.js files.