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.

You can also add jest in the env parameters in package.json to fix the errors in the tests:

"standard": {
  "env": [
     "jest",
     "es6",
     "browser"
  ]
}

Great! It helps me a lot thx!

Thanks! Easy setup

Future travellers, if you're getting an error like Parsing error: Unexpected token after using type add this to your package.json

"scripts": {
    "lint": "standard && eslint ./src/**",
    "lint-fix": "standard --fix && eslint ./src/** --fix"
},
"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^6.6.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.4",
    "eslint-plugin-standard": "^4.0.1",
    "husky": "^4.3.0",
    "standard": "^14.3.4"
  },
  "standard": {
    "ignore": [
      "build/*"
    ],
    "env": [
      "jest",
      "es6",
      "browser"
    ],
    "parser": "babel-eslint",
    "plugins": [
      "flowtype"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended"
    ],
    "plugins": ["jsx-a11y"],
    "ignorePatterns": ["*.css", "*.svg"]
  },

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 of standard

If you're seeing 'func' is not defined. just change func to Function, the system does not check the property types so you can write any old nonsense there.