An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
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.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 }}
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.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_modulesdistcoverage
Finally, you can also add linting toscripts
inpackage.json
as 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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To