Why ESLint throws 'no-unused-vars' for TypeScript interface?

Question

So, I have this piece of code in .ts file:

import {MicroEventInterface} from '../Interfaces';

export default class MicroEvent implements MicroEventInterface {

// code

And ESLint throws this error:

I have this config for TypeScript in ESLint:

typescript: {
    extends: [
        'plugin:@private/private/react' // private rep with React config
    ],
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
        'import'
    ],
    settings: {
        'import/resolver': {
            'node': {
                'extensions': [
                    '.js',
                    '.jsx',
                    '.ts',
                    '.tsx'
                ],
                'moduleDirectory': [
                    'node_modules/',
                    'src/'
                ]
            }
        },
        react: {
            createClass: 'createClass',
            pragma: 'React',
            version: '0.14.9'
        }
    }
}

So, everything seems like fine, but I can't conquer this error.

Any suggestions?

Thanks!

UPD:

Looks like if I console.log( --- , MicroEventInterface); error disappears. I think, ESLint does not treat implements as actual usage.

Answer 1

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

The latest version of the @typescript-eslint tooling now has full support for scope analysis.

So the steps to fix this are now:

• update your versions to at least v4.9.1 of @typescript-eslint/parser and @typescript-eslint/eslint-plugin
• update your ESLint version to at least v6.0.0
• update your config to use @typescript-eslint/no-unused-vars
  • Do not use the base no-unused-vars rule - see this FAQ article in the project .

Restart your IDE and you should now see the correct lint errors.

Answer 2

Use @typescript-eslint/no-unused-vars-experimental and turn off @typescript-eslint/no-unused-vars .

The issue is resolved in the latter version (experimental).

Sample config:

// .eslintrc
{
  ...
  "rules": {
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars-experimental": "error"
  }
  ...
}

Answer 3

add this to Eslint rules

"rules": {
  "@typescript-eslint/no-unused-vars": [
    2,
    {
      "args": "none"
    }
  ]
}

Answer 4

Add the following rule to your .eslintrc.json file

{
  rules: {
    "@typescript-eslint/no-unused-vars": "warn",
  }
}

Answer 5

Using the varsIgnorePattern Rule

To solve this issue in a pure TypeScript project, I added the following rule to my eslint config file ( .eslintrc.json ). For this particular solution to work, you must follow the convention that interface names begin with an upper case "I".

Incidentally, other artifacts (namely classes) with the first letter of their name being an upper case "I" will also be ignored when considering whether they are used.

Eslint

...
    "rules": {
        ... other rules omitted ...,
        "no-unused-vars": [
            "warn",
            { 
                "vars": "all",
                "varsIgnorePattern": "[I]\\w+"
            }
        ]
    }
...

For more information on this rule, see the documentation .

Answer 6

So, I have this piece of code in .ts file:

import {MicroEventInterface} from '../Interfaces';

export default class MicroEvent implements MicroEventInterface {

// code

And ESLint throws this error:

I have this config for TypeScript in ESLint:

typescript: {
    extends: [
        'plugin:@private/private/react' // private rep with React config
    ],
    parser: '@typescript-eslint/parser',
    plugins: [
        '@typescript-eslint',
        'import'
    ],
    settings: {
        'import/resolver': {
            'node': {
                'extensions': [
                    '.js',
                    '.jsx',
                    '.ts',
                    '.tsx'
                ],
                'moduleDirectory': [
                    'node_modules/',
                    'src/'
                ]
            }
        },
        react: {
            createClass: 'createClass',
            pragma: 'React',
            version: '0.14.9'
        }
    }
}

So, everything seems like fine, but I can't conquer this error.

Any suggestions?

Thanks!

UPD:

Looks like if I console.log( --- , MicroEventInterface); error disappears. I think, ESLint does not treat implements as actual usage.