DEV Community

Cover image for Suppress the warning no-unused-vars
Malek abbes
Malek abbes

Posted on

4

Suppress the warning no-unused-vars

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
  }
};

Enter fullscreen mode Exit fullscreen mode

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);
      }
    }
  };
}

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay