The 3 Best ESLint No-Unused-Vars Option Settings (Make it Less Strict?)

The no-unused-vars rule is one of the most important ESLint rules for keeping code clean. However, there are a few cases where we want exceptions to the rule. Also, we may want to change the default “eslint: recommended” values.

My three favorite options are below:

  • Allowing unused sibling values when using the Rest property
  • Allowing unused values when destructuring arrays
  • Requiring caught errors to be used

All three of these options change the default behavior. The first two are more permissive, while the third rule is more strict than the recommended practice.

Here’s the code from my .eslintrc.json configuration:

"no-unused-vars": [
    "error",
    {
        "ignoreRestSiblings": true,
        "destructuredArrayIgnorePattern": "[A-Z]",
        "caughtErrors": "none"
    }
]

I will describe each rule in detail below. The Resources sections has useful to additional useful information.

No-Unused-Vars ignoreRestSiblings: Allow Unused Values When Using the Rest Property

Occasionally you might use the Rest property to assign some, but not all, properties from one object to another value.

Take a look at the code below:

const data = { firstName: 'foo', lastName: 'bar', address: '123' };
const { firstName, ...personalData } = data;

In this example, I want to assign the lastName and address values to personalData. I want to keep personalData clean and do not want to assign firstName to it. I also don’t plan to use the firstName value I created.

If I set option ignoreRestSiblings: true, then the linter will only check if personalData is used and will allow firstName to go unused.

ESLint no-unused-vars ignoreRestSiblings
ESLint no-unused-vars ignoreRestSiblings

No-Unused-Vars destructuredArrayIgnorePattern: Allow Unused Elements in Destructured Array

This great option allows an array to be destructured and assigned to values without all of the values being used. It is similar to ignoreRestSiblings.

An example use case is needing the first and third values of an array, but not the second.

const [firstName, MIDDLE, lastName] = ['Jimmy', 'John', 'Jones'];
const myName = `${firstName} ${lastName}`

With "destructuredArrayIgnorePattern": "[A-Z]", the linter will allow the MIDDLE value to be created but go unused because it matches the regex.

At the time of writing this post, destructuredArrayIgnorePattern will not work if @typescript-eslint/eslint-plugin is active. Remember that when the plugin is active you can still usually configure rules for ESLint instead of TypeScript-ESLint.

Also, "@typescript-eslint/no-unused-vars" is the TypeScript-Eslint equivalent of this rule, but it does not allow configurable options.

No-Unused-Vars caughtErrors: Require Catch to Use All Named Vars

Have you ever seen a JavaScript catch statement where the error was not actually used or logged? Here’s an example:

try {
  throw Error();
} catch (err) {
  console.log('Threw an Error');
}

This is permitted according to the default ESLint configuration.

What if your team requires all errors to be logged? That can be indirectly enforced by setting "caughtErrors": "all". This option will require the error value to be used in some way.

ESLint no-unused-vars caughtErrors
ESLint no-unused-vars caughtErrors

Disable ESLint No-Unused-Vars Rule

Here are three ways to disable the no-unused-vars rule:

  • Set "no-unused-vars": "off" in .eslintrc.json
  • Wrap a code block in /* eslint-disable  no-unused-vars */ (enable the rule again with /* eslint-enable no-unused-vars */
  • Add // eslint-disable-next-line  no-unused-vars to exclude a single line

Use these rarely. It is better to set an option on the rule than to be regularly disabling the rule in your code.

Resources and Related Links

Here’s everything you need to know about ignoring and disabling rules.

Here’s how to configure the ban-types rule.

ESLint no-unused-vars documentation.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.