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.
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
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"
}
}
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/*"
]
}
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.
Future travellers, if you're getting an error like
Parsing error: Unexpected token
after usingtype
add this to yourpackage.json
Also ensure you are using the locally installed version of
standard
, not the global one. If you run> standard
from the command line, you will get an error like:Error: Failed to load plugin 'flowtype' declared in 'CLIOptions': Cannot find module 'eslint-plugin-flowtype'
Make sure to use
npm run lint
to run the local copy ofstandard
If you're seeing
'func' is not defined.
just changefunc
toFunction
, the system does not check the property types so you can write any old nonsense there.