Enable linting: eslint

Jul 3rd 2017

I implemented eslint to show linting errors in my editor while I worked on my blog.

In the previous post about automating deployments with Travis I noted that it’s a good idea to lint your code before deploying it. In past react projects I’ve started with the react-redux-starter-kit which comes preconfigured to use eslint with the Standard JS package. We need linting for this blog, so let’s copy what the starter-kit is doing.

Grab the files from the starter-kit

Probably the easiest way to grab our files is using wget. You might need to install wget on your system. You can always manually pull down these files.

From the root of the blog, run these commands:

wget https://raw.githubusercontent.com/davezuko/react-redux-starter-kit/master/.editorconfig
wget https://raw.githubusercontent.com/davezuko/react-redux-starter-kit/master/.eslintignore
wget https://raw.githubusercontent.com/davezuko/react-redux-starter-kit/master/.eslintrc

Customize the files for our needs

We need to make sure we ignore the public folder.

echo "public/**" >> .eslintignore

Install eslint

We need to install eslint for our project. We can also remove gh-pages from our project since we’re not hosting our blog on Github pages.

yarn add --dev babel-eslint \
  eslint \
  eslint-config-standard \
  eslint-config-standard-react \
  eslint-plugin-babel \
  eslint-plugin-import \
  eslint-plugin-node \
  eslint-plugin-promise \
  eslint-plugin-react \
  eslint-plugin-standard

yarn remove gh-pages

Add some linting scripts

Gatsby adds a lint script to your packages.json but it’s not exactly what we need. We’re going to rely instead on the .eslintrc that we downloaded from the starter-kit. This means that we can simplify the lint command. We’ll also add the lint:fix from the starter-kit.

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "yarn lint -- --fix",
    "test": "echo \"Warning: no test specified\" && exit 0"
  }
}

At this point we can run our linter. If you are using an editor like Atom you should install the eslint package to see linting errors in your editor. This is preferred to using an eslint watch option.

# this should show some errors
yarn lint

# this should fix most errors
yarn lint:fix

Require linting to deploy

We can require the project to pass our linter before we will deploy it. All we need to do is call lint from our script block in our .travis.yml file.

# make your .travis.yml script section look more like this
script:
  - "yarn lint"
  - "yarn test"
  - "yarn build:prod"

Fix all of the linting errors

If you have already run yarn lint:fix there should be very few errors.

These are the errors I had to fix:

/project/path/blog/components/Bio.js
  26:1  error  Line 26 exceeds the maximum line length of 120  max-len

/project/path/blog/html.js
  20:55  error  Unexpected '!' in '!raw!./public/styles.css'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

/project/path/blog/pages/_template.js
  71:10  error  'route' PropType is defined but prop is never used  react/no-unused-prop-types

/project/path/blog/pages/index.js
  18:38  error  Unexpected mix of '&&' and '||'  no-mixed-operators
  18:69  error  Unexpected mix of '&&' and '||'  no-mixed-operators

Try to deploy

Once you are able to run yarn lint on your local, try committing your files and seeing if Travis can build your project. From now on your project will need to pass the linter before it can be deployed.