Is assigned a value but never used no unused vars ошибка

I’ve setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React component.

I’m assuming it’s not recognizing that I’m using JSX or React syntax. Any ideas?

Example:

app.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

Linter Errors:

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

Here is my .eslintrc.json file:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Доброго дня. Использую webpack + babel + eslint
Есть файл Helpers.js
В нем такого рода функции(украдены из jQuery):

export const type = (obj) => {}
export const isArrayLike = (obj) => {}
export const each = (obj, callback) => {};

В конечном модуле я их подключаю так
import {type, isArrayLike, each} from './Helpers';
Далее в коде я их использую, все три. Но если с isArrayLike и type все в порядке — они сами по себе используются в each, то на первую выходит ошибка:

modulesHelpers.js
67:5  error  'each' is assigned a value but never used  no-unused-vars

Но я ее 100% использую.
Боролся до этого с этим явлением так:

/*eslint-disable no-unused-vars*/
export const extend = function (first) {}
/*eslint-enable no-unused-vars*/

Но это очень неудобно. Подскажите пожалуйста, что я делаю не так?

Disallow unused variables

Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers.

Rule Details

This rule is aimed at eliminating unused variables, functions, and function parameters.

A variable foo is considered to be used if any of the following are true:

• It is called (foo()) or constructed (new foo())
• It is read (var bar = foo)
• It is passed into a function as an argument (doSomething(foo))
• It is read inside of a function that is passed to another function (doSomething(function() { foo(); }))

A variable is not considered to be used if it is only ever declared (var foo = 5) or assigned to (foo = 7).

Examples of incorrect code for this rule:

/*eslint no-unused-vars: "error"*/
/*global some_unused_var*/

// It checks variables you have defined as global
some_unused_var = 42;

var x;

// Write-only variables are not considered as used.
var y = 10;
y = 5;

// A read for a modification of itself is not considered as used.
var z = 0;
z = z + 1;

// By default, unused arguments cause warnings.
(function(foo) {
    return 5;
})();

// Unused recursive functions also cause warnings.
function fact(n) {
    if (n < 2) return 1;
    return n * fact(n - 1);
}

// When a function definition destructures an array, unused entries from the array also cause warnings.
function getY([x, y]) {
    return y;
}

Examples of correct code for this rule:

/*eslint no-unused-vars: "error"*/

var x = 10;
alert(x);

// foo is considered used here
myFunc(function foo() {
    // ...
}.bind(this));

(function(foo) {
    return foo;
})();

var myFunc;
myFunc = setTimeout(function() {
    // myFunc is considered used
    myFunc();
}, 50);

// Only the second argument from the destructured array is used.
function getY([, y]) {
    return y;
}

exported

In environments outside of CommonJS or ECMAScript modules, you may use var to create a global variable that may be used by other scripts. You can use the /* exported variableName */ comment block to indicate that this variable is being exported and therefore should not be considered unused.

Note that /* exported */ has no effect for any of the following:

• when the environment is node or commonjs
• when parserOptions.sourceType is module
• when ecmaFeatures.globalReturn is true

The line comment // exported variableName will not work as exported is not line-specific.

Examples of correct code for /* exported variableName */ operation:

/* exported global_var */

var global_var = 42;

Options

This rule takes one argument which can be a string or an object. The string settings are the same as those of the vars property (explained below).

By default this rule is enabled with all option for variables and after-used for arguments.

{
    "rules": {
        "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
    }
}

vars

The vars option has two settings:

• all checks all variables for usage, including those in the global scope. This is the default setting.
• local checks only that locally-declared variables are used but will allow global variables to be unused.

vars: local

Examples of correct code for the { "vars": "local" } option:

/*eslint no-unused-vars: ["error", { "vars": "local" }]*/
/*global some_unused_var */

some_unused_var = 42;

varsIgnorePattern

The varsIgnorePattern option specifies exceptions not to check for usage: variables whose names match a regexp pattern. For example, variables whose names contain ignored or Ignored.

Examples of correct code for the { "varsIgnorePattern": "[iI]gnored" } option:

/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }]*/

var firstVarIgnored = 1;
var secondVar = 2;
console.log(secondVar);

args

The args option has three settings:

• after-used — unused positional arguments that occur before the last used argument will not be checked, but all named arguments and all positional arguments after the last used argument will be checked.
• all — all named arguments must be used.
• none — do not check arguments.

args: after-used

Examples of incorrect code for the default { "args": "after-used" } option:

/*eslint no-unused-vars: ["error", { "args": "after-used" }]*/

// 2 errors, for the parameters after the last used parameter (bar)
// "baz" is defined but never used
// "qux" is defined but never used
(function(foo, bar, baz, qux) {
    return bar;
})();

Examples of correct code for the default { "args": "after-used" } option:

/*eslint no-unused-vars: ["error", {"args": "after-used"}]*/

(function(foo, bar, baz, qux) {
    return qux;
})();

args: all

Examples of incorrect code for the { "args": "all" } option:

/*eslint no-unused-vars: ["error", { "args": "all" }]*/

// 2 errors
// "foo" is defined but never used
// "baz" is defined but never used
(function(foo, bar, baz) {
    return bar;
})();

args: none

Examples of correct code for the { "args": "none" } option:

/*eslint no-unused-vars: ["error", { "args": "none" }]*/

(function(foo, bar, baz) {
    return bar;
})();

argsIgnorePattern

The argsIgnorePattern option specifies exceptions not to check for usage: arguments whose names match a regexp pattern. For example, variables whose names begin with an underscore.

Examples of correct code for the { "argsIgnorePattern": "^_" } option:

/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/

function foo(x, _y) {
    return x + 1;
}
foo();

caughtErrors

The caughtErrors option is used for catch block arguments validation.

It has two settings:

• none — do not check error objects. This is the default setting.
• all — all named arguments must be used.

caughtErrors: none

Not specifying this rule is equivalent of assigning it to none.

Examples of correct code for the { "caughtErrors": "none" } option:

/*eslint no-unused-vars: ["error", { "caughtErrors": "none" }]*/

try {
    //...
} catch (err) {
    console.error("errors");
}

caughtErrors: all

Examples of incorrect code for the { "caughtErrors": "all" } option:

/*eslint no-unused-vars: ["error", { "caughtErrors": "all" }]*/

// 1 error
// "err" is defined but never used
try {
    //...
} catch (err) {
    console.error("errors");
}

caughtErrorsIgnorePattern

The caughtErrorsIgnorePattern option specifies exceptions not to check for usage: catch arguments whose names match a regexp pattern. For example, variables whose names begin with a string ‘ignore’.

Examples of correct code for the { "caughtErrorsIgnorePattern": "^ignore" } option:

/*eslint no-unused-vars: ["error", { "caughtErrorsIgnorePattern": "^ignore" }]*/

try {
    //...
} catch (ignoreErr) {
    console.error("errors");
}

destructuredArrayIgnorePattern

The destructuredArrayIgnorePattern option specifies exceptions not to check for usage: elements of array destructuring patterns whose names match a regexp pattern. For example, variables whose names begin with an underscore.

Examples of correct code for the { "destructuredArrayIgnorePattern": "^_" } option:

/*eslint no-unused-vars: ["error", { "destructuredArrayIgnorePattern": "^_" }]*/

const [a, _b, c] = ["a", "b", "c"];
console.log(a+c);

const { x: [_a, foo] } = bar;
console.log(foo);

function baz([_c, x]) {
    x;
}
baz();

function test({p: [_q, r]}) {
    r;
}
test();

let _m, n;
foo.forEach(item => {
    [_m, n] = item;
    console.log(n);
});

let _o, p;
_o = 1;
[_o, p] = foo;
p;

ignoreRestSiblings

The ignoreRestSiblings option is a boolean (default: false). Using a Rest Property it is possible to “omit” properties from an object, but by default the sibling properties are marked as “unused”. With this option enabled the rest property’s siblings are ignored.

Examples of correct code for the { "ignoreRestSiblings": true } option:

/*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
// 'foo' and 'bar' were ignored because they have a rest property sibling.
var { foo, ...coords } = data;

var bar;
({ bar, ...coords } = data);

When Not To Use It

If you don’t want to be notified about unused variables or function arguments, you can safely turn this rule off.

Version

This rule was introduced in ESLint v0.0.9.

Resources

• Rule source
• Tests source

Node version: v13.11.0
npm version: v6.13.7
Local ESLint version: v6.8.0 (Currently used)
Global ESLint version: Not found
Typescript Version: 3.8.3
VueJS Version: 2.6.11

What parser (default, Babel-ESLint, etc.) are you using?
Babel-ESLint

Please show your full configuration:

Configuration

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    "indent": ["error", 2],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
  },
  settings: {
    polyfills: [
      "promises",
    ]
  }
};

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

    let myArray = [1,2,3,4].filter((x) => x == 0);
    myArray = myArray.filter((x) => x == 1);

What did you expect to happen?
It should be an error.

What actually happened? Please include the actual, raw output from ESLint.
error ‘myArray’ is assigned a value but never used no-unused-vars
error ‘myArray’ is assigned a value but never used @typescript-eslint/no-unused-vars

Are you willing to submit a pull request to fix this bug?
No

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.