Enable linting in your React App

booyaa

Mark Sta Ana

Posted on December 5, 2018

Enable linting in your React App

Photo by rawpixel on Unsplash

Linters helps you write better code (along with tests).

When you remove the dependency on the built-in linting that comes with your IDE/Code editor you can wire up the checks to your continuous delivery pipeline. Now your build quality is improved!

In short: linting is good.

The choice of linter I've gone with is eslint, this is because it's extensible (plugins) and should continue to evolve when others won't (looking at you jshint).

Nearly all linters use some form of ruleset. These are available as plugins and I've opted for the one used bundled when you run create-react-app.

Install

yarn add --dev eslint@latest \
    babel-eslint@latest \
    eslint-config-react-app \
    eslint-plugin-flowtype@latest \
    eslint-plugin-import@latest \
    eslint-plugin-jsx-a11y@latest \
    eslint-plugin-react@latest
Enter fullscreen mode Exit fullscreen mode

Create the following file .eslintrc in your react project

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "extends": "react-app"
}

Enter fullscreen mode Exit fullscreen mode

Add to your package.json

  "scripts": {
    "lint": "eslint src"
  }

Enter fullscreen mode Exit fullscreen mode

Test

yarn run lint

Enter fullscreen mode Exit fullscreen mode

Bonus: enable in Visual Studio Code

Install this extension: ESLint.

This is mostly a post to let y'all know I'm still alive ;)

💖 💪 🙅 🚩
booyaa
Mark Sta Ana

Posted on December 5, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Enable linting in your React App
react Enable linting in your React App

December 5, 2018