Suppress the warning no-unused-vars

Malek abbes — Wed, 22 Feb 2023 12:52:06 +0000

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.

DEV Community: Malek abbes

Suppress the warning no-unused-vars

BONUS :