Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 18, 2021 03:00 pm GMT

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

First of all, we need to install ESLint

npm i eslint --save-dev

Install ESLint plugins

npx install-peerdeps --dev eslint-config-airbnb

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

Install babel eslint

npm i --save-dev babel-eslint

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"}

Now, create the file.eslintrc.jsonat 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    }}

Also, installESLint extensionfor VSCode, After that need to reload the VSCode window once to get proper linting.*

ESLint will automatically start detecting errors/warnings in.jsand.jsxfiles. 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.eslintignoreat the root of the project.

.eslintignore

node_modulesdistcoverage

Finally, you can also add linting toscriptsinpackage.jsonas a part of your pipeline process

"scripts": {    "lint": "eslint . --ext js,jsx",    "lint:fix": "eslint . --ext js,jsx --fix"}

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


Original Link: https://dev.to/brayanarrieta/integrate-eslint-with-your-react-project-step-by-step-javascript-50i7

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To