CODEWITHSUNDEEP
javascriptreactjstypescripteslinttypescript-eslint
Aleksandr Solovey
Aleksandr Solovey

Reputation: 763

@typescript-eslint/no-unused-vars false positive in type declarations

I am having a problem with @typescript-eslint/no-unused-vars. I have:

type SomeType = (name: string) => void;

but I get a @typescript-eslint/no-unused-vars error in the string with type declaration:

'name' is defined but never used

Example of type usage:

export const LogSomeInfo: SomeType = (name: string) => {
    const a = name;
    console.log(a);
};

or:

interface CheckboxPropsType {
    value: string,
    onClick(value: string): void
}

and eslint breaks at onClick... string, saying:

value is defined but never used.

This occurs even if the type is assigned correctly and the actual onClick handler uses the value.

What's wrong with this rule and why is it triggered in this case? Why does eslint recognize type declaration for functions in types/interfaces as regular functions? Is it a problem with my eslint config?

"eslint": "^7.7.0", "@typescript-eslint/eslint-plugin": "^3.6.1", "@typescript-eslint/parser": "^4.0.1", "eslint-config-airbnb-typescript": "^9.0.0",

{
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["@typescript-eslint", "react-hooks", "react"],
  "env": {
    "browser": true
  },
  "rules": {
    "object-curly-newline": 0,
    "import/named": ["error"],
    "indent": ["error", 4],
    "react/jsx-indent": ["error", 4],
    "comma-dangle": ["error", "never"],
    "import/prefer-default-export": "off",
    "react/jsx-fragments": "off",
    "arrow-body-style": "off",
    "object-curly-spacing": "off",
    "@typescript-eslint/indent": ["error", 4, {"SwitchCase": 1}],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "no-undef": "error",
    "react/jsx-indent-props": ["error", 4],
    "max-len": ["error", { "code": 120 }],
    "react/prop-types": "off"
  }
}

Upvotes: 74

Views: 47673

Answers (4)

Brad Zacher
Brad Zacher

Reputation: 3243

Source: I am the maintainer of the typescript-eslint project.

If you update your versions of @typescript-eslint/parser and @typescript-eslint/eslint-plugin to v4.1.0, you will be able to use the latest changes which make @typescript-eslint/no-unused-vars work properly for all cases.

Here's a typescript-eslint playground which shows the config and the examples working as intended.

As an aside - using v3.x of the plugin but v4.x of the parser will put you into a really weird state with undefined and unsupported behaviour.

You should make sure you are always using the same version of both packages, as each version is released together.

Upvotes: 42

Cathal Mac Donnacha
Cathal Mac Donnacha

Reputation: 1530

Another option to fix this is to add typescript-eslint to your extends and remove it from plugins:

extends: [
  `plugin:@typescript-eslint/recommended',
]

You can then also remove parser: @typescript-eslint/parser since by extending it, the plugin will handle all of this for you under the hood. You can still override some rules if needed:

  rules: {
    '@typescript-eslint/no-unused-vars': ['off'],
  },

Upvotes: 5

basel juma
basel juma

Reputation: 2117

Just make sure you have the latest version of the following:

  • typescript-eslint
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

in your .eslintrc.js make sure you have the following lines added to rules section:

  "no-unused-vars": "off",
  "@typescript-eslint/no-unused-vars": ["error"]

Upvotes: 8

Dolly
Dolly

Reputation: 2582

Similar question asked earlier check: Why ESLint throws 'no-unused-vars' for TypeScript interface?

Disable '@typescript-eslint/no-unused-vars': 0 rule and instead use "strict": true, "noUnusedLocals": true, and "noUnusedParameters": true, in tsconfig.json

Upvotes: 43

Related Questions