DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

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

Posted on

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

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 the 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 the 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 set up. 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

Let me know in the comments recommendations or something else that can be added, I will update the post based on that thanks! πŸ‘

Top comments (3)

Collapse
lyrod profile image
Lyrod • Edited on

babel-eslint is now deprecated in favor of "@babel /eslint-parser"

Collapse
brayanarrieta profile image
Brayan Arrieta Author

I see thx @lyrod I will update the post based on that really usefull

Collapse
lyrod profile image
Lyrod

Why using globals Atomics and SharedArrayBuffer?

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.