Hey fellas ,
When coding a react application , you may pass by some stuff like warnings which can be sometimes super annoying to see in your console.
Something like this :
Line 7:10: 'available' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars
Line 9:23: 'Setlistproducts' is assigned a value but never used. Allowed unused vars must match /^_/u no-unused-vars
So the solution for this is quite easy actually .
So here's the steps :
1- Open package.json file .
2- You scroll down until you hit eslintConfig
And here we can add our desired rule !
In our case we want to avoid that warning "no-unused-vars" from appearing again.
so in order to do that we add these lines :
"rules":{
"no-unused-vars" : [
"warn",{
"argsIgnorePattern": "^_",
"varsIgnorePattern": "^_"
}
]
}
BONUS :
Customize rules: You can also customize the built-in rules or create your own rules to fit your project's specific needs. For example, you can create a custom rule to enforce a specific naming convention or to require specific dependencies.
To create your custom rule you need to follow these steps : **
Exemple : Creating a naming convention as mentioned above.
1- Install the eslint-plugin package :
npm install eslint-plugin --save-dev
2- Create a new directory called **eslint in the root of your project and create a new file called naming-convention.js inside the previously created directory.
3- In the naming-convention.js file, you define your custom rule :
module.exports = {
meta: {
type: "suggestion",
docs: {
description: "enforce specific naming convention",
category: "Best Practices",
recommended: true,
},
schema: [
// add any schema options here
],
},
create: function(context) {
// your implementation of the rule goes here
}
};
4- Inside the create method, you can define the implementation of your custom rule. For example, to enforce that all React components have a specific naming convention (e.g. PascalCase), you can use the following code:
create: function(context) {
function checkName(node) {
const name = node.name;
if (!/^[A-Z][a-z0-9]*$/.test(name)) {
context.report({
node,
message: "React component name should be in PascalCase"
});
}
}
return {
JSXOpeningElement: function(node) {
if (node.name.type === "JSXIdentifier" && node.name.name.endsWith('Component')) {
checkName(node.name);
}
}
};
}
5- So in the last step , save the file and add the new rule to your project's eslintConfig object in the package.json file, like so:
"eslintConfig": {
"extends": "react-app",
"plugins": ["eslint-plugin"],
"rules": {
"eslint-plugin/naming-convention": "error"
}
}
With these steps, you have created a custom ESLint rule that enforces a specific naming convention for React components in your project. You can use a similar approach to create other custom rules that fit your project's specific needs.
Top comments (0)