Suppress the warning no-unused-vars
Tags: react, webdev, javascript, eslintconfig
Published: 2023-02-22 12:52:06

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": "^_"
        }
       ]
    }`
<u>

## BONUS : 
</u>
**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.