Lint React Apps in Atom Editor with ESLint

In this tutorial I will explain how to setup your Atom editor to lint React code. I keep all of my development files in the Code folder. First ensure that you have Node.js setup. Also in the main directory (Code in my case) make sure that you have package.json. If not run npm init

Now let’s Install eslint and eslint-plugin-react locally

npm install --save-dev eslint eslint-plugin-react

Install the following Atom plugins Linter, Linter-ESLint, and React plugins

Add the following to eslintConfig settings to package.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "test.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"eslintConfig": {
"plugins": [
"react"
],
"globals": {
"React": true,
"ReactDOM": true
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
}
},
"devDependencies": {
"eslint": "^2.13.1",
"eslint-plugin-react": "^5.2.2"
}
}

I got tripped with multiple package.json files. The code above resides in package.json in my Code folder. I decided to try this React Tutorial so I cloned the repo into Code folder. Now because the tutorial repo came with its own package.json file, the Atom editor wouldn’t lint react files. I ended up deleting tutorial package.json and the react files would now lint.

References

Error: Cannot find module ‘eslint-plugin-react’

Like what you read? Give Dmitry Mardukhayev a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.