This content originally appeared on DEV Community and was authored by Jenesh Napit
Adding Linting rules to a React project is must when it comes to improving code quality, making code more consistent and avoiding bugs.
There is a popular open-source JavaScript linting tool called ESLint, which is used for automatically detecting incorrect patterns found in JavaScript code.
Here’s a step-by-step method to add linting rules to React projects:
🚨 For more tutorials visit MyDevPage
Installing ESLint
First, we need to install ESLint in our React project as a devDependencies because we don’t need them in production.
To Install, we will use the command below.
npm i -D eslint
Initialize ESLint
Next, we will have to initialize ESLint configuration, by adding a configuration file .eslintrc.json in our project’s root folder.
Here is a sample example configuration.
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": ["react", "import", "jsx-a11y"],
"rules": {
// Here we can add our custom rules.
},
"parserOptions": {
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Inside our .eslintrc.json add extends and plugin property.
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": ["react", "import", "jsx-a11y"]
}
As we have added various plugins we need to first install them as devDependencies by running the given command below.
npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
Adding Rules
Rules are used for configuration purposes. We can set the error level of rules in three different ways.
- off or 0: This will turn off the rule.
- warn or 1: This will turn the rule on as a warning.
- error or 2: This will turn the rule on as an error.
Let’s add some rules to our configuration file, we can add any other rules as per our choice from the list of all rules mentioned above.
"rules": {
"react/prop-types": 0,
"indent": ["error", 2],
"linebreak-style": 1,
"quotes": ["error", "double"]
}
Adding Scripts for Linting
Last but not least, let’s add some commands in our package.json “scripts” property to run ESLint.
"scripts": {
"lint": "eslint \"src/**/*.{js,jsx}\"",
"lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}
Congrats, now if you try to run either of these commands it should do the trick!
After this you can continue to customize the linting rules to your liking to ensure code consistency and quality.
If you're a Junior Software Engineer make sure you check out this article Junior to Senior Software Engineer: Helpful Tips
This content originally appeared on DEV Community and was authored by Jenesh Napit
Jenesh Napit | Sciencx (2024-07-29T17:15:08+00:00) Add ESLint To A React Project. Retrieved from https://www.scien.cx/2024/07/29/add-eslint-to-a-react-project/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.