DEV Community

Cover image for Enable linting in your React App
Mark Sta Ana
Mark Sta Ana

Posted on

Enable linting in your React App

#react #javascript #eslint #vscode

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 ;)

Top comments (4)

Collapse
 
danku profile image
Daniel McMahon •

+1 for using eslint on your JS projects. Have you checked out prettier for keeping your code in check as you go? You can configure it to auto format your code on save in certain editors (I use Atom). Definitely worth checking out! github.com/prettier/prettier

Collapse
 
booyaa profile image
Mark Sta Ana •

A friend just put me on to prettier, with its integration w/ eslint. It looks like a match made in heaven!

Collapse
 
danku profile image
Daniel McMahon •

Imagine now a world with eslint, prettier and a package like pre-commit where your linting runs automatically before being able to push your code to a branch! npmjs.com/package/pre-commit

Collapse
 
shhdharmen profile image
Dharmen Shah •

Thanks @booyaa . I would like to add one thing, if we add packages babel-eslint and eslint to their latest version, react-scripts build might give error due to version mismatch. Becuase, react-scripts:2.1.8 needs babel-eslint:9.0.0 and eslint:5.12.0, install those versions.