ESlint Angular - no-unused-vars hits type definition

Question

I'm upgrading/refactoring an Angular project (to Angular 8, Electron 6, Ionic 4) and we decided to switch from TSLint to ESLint.

I setup some rules and they are running but I can't get a rid off the no-unused-vars warning for type definition. When I run linting I'll get this warning for OperatorFunction and Observable which is obviously not an issue.

import { OperatorFunction, Observable, timer } from 'rxjs';
import { tap } from 'rxjs/operators';

export function executeDelayed<T>(fn: () => void, delayTime: number): OperatorFunction<T, T> {
  return function executeDelayedOperation(source: Observable<T>): Observable<T> {
   //...
  }
}

.eslintrc.js file uses this configuration

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:prettier/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
      "no-unused-vars": [
        "warn",
        {
          "vars": "local",
          "ignoreSiblings": true,
          "args": "after-used",
          "argsIgnorePattern": "res|next|^err"
        }
      ],
      "no-use-before-define": [
        "error", 
        { 
          "functions": true, 
          "classes": true 
        }
      ]
    }
};

I went trough multiple similar questions here but wasn't able to find the solution. Any idea? Switching back to TSLint is NOT an option.

Kailey

Answer 1

I ran into a similar issue but was able to resolve it by following the recommendations from the @typescript-eslint/eslint-plugin README. Essentially, I just changed my extends section to look like the following:

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

After that change, all the no-unused-vars errors and warnings went away.

From what I could tell, the "plugin:@typescript-eslint/recommended" line overrides the eslint:recommended rules that won't work with TypeScript, especially the no-unused-vars one.

Hopefully that helps!

Oxendine

Answer 2

I had similar issue in my angular project with no-use-before-define, so I figured out that I had to use @typescript-eslint prefix, it worked. It looks like this now:

'@typescript-eslint/no-use-before-define': 'warn'

my parsing options are a little different too:

 parserOptions: {
    ecmaVersion: 6,
    project: 'tsconfig.json',
    sourceType: 'module',
    ecmaFeatures: {
        modules: true
    }
}

Wells

Answer 3

You need to overwrite the 'old' eslint config with the new plugin config

old:

"no-unused-vars": ["warn", { "argsIgnorePattern": "^delta$" }], //only update 'deltaTime' variable allowed

new:

"@typescript-eslint/no-unused-vars":  ["warn", { "argsIgnorePattern": "^delta$" }], //only update 'deltaTime' variable allowed

Hijacker