DEV Community

Cover image for Integrate ESLint with your React project step by step (javascript)
Brayan Arrieta
Brayan Arrieta

Posted on • Updated on

Integrate ESLint with your React project step by step (javascript)

#javascript #react #eslint

First of all we need to install ESLint

npm i eslint --save-dev
Enter fullscreen mode Exit fullscreen mode

Install ESLint plugins

npx install-peerdeps --dev eslint-config-airbnb
Enter fullscreen mode Exit fullscreen mode

Note: with a single command will install 6 plugins: eslint-config-airbnb, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. You can also install these plugins individually.

Install babel eslint

npm i --save-dev babel-eslint
Enter fullscreen mode Exit fullscreen mode

Your "devDependencies" should look something similar to this

"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.0.0"
}
Enter fullscreen mode Exit fullscreen mode

Now, create file .eslintrc.json at the root of the project. Paste below config:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended",
        "airbnb",
        "airbnb/hooks",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "react/display-name": 1
    }
}
Enter fullscreen mode Exit fullscreen mode

Also, install ESLint extension for VSCode, After that need to reload VSCode window once to get proper linting.*

ESLint will automatically start detecting errors/warnings in .js and .jsx files. If that's not the case then either your project has no linting errors or ESLint is not properly setup. To test if linting works run eslint command in the terminal with folder path i.e. eslint src/** and notice output.

To disable the linting of some files/folders you can create a .eslintignore at the root of the project.

.eslintignore

node_modules
dist
coverage
Enter fullscreen mode Exit fullscreen mode

Finally, you can also add linting to scripts in package.json as a part of your pipeline process

"scripts": {
    "lint": "eslint . --ext js,jsx",
    "lint:fix": "eslint . --ext js,jsx --fix"
}
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
dahyor profile image
Dayo Adebanjo •

babel-eslint is deprecated use @babel/eslint-parser instead

Collapse
 
brayanarrieta profile image
Brayan Arrieta •

Thx probably the blog is not update, I will review and update in the correct version and practices

Collapse
 
danyglez94 profile image
Daniel Gonzalez •

Thanks for the post! I hope you can update it soon! It's really interesting.

Read next

ashsajal profile image

use() hook in React 19

Ashfiquzzaman Sajal -

jacklehamster profile image

Using generative AI for NPC dialogs

Jack Le Hamster -

anmolbaranwal profile image

30+ app ideas with complete source code

Anmol Baranwal -

harshalranjhani profile image

Implementing Infinite scroll in React apps

Harshal Ranjhani -