esLint - Configuring “no-unused-vars” for Typescript

Question

I use esLint in all of my Typescript projects with the following settings:

  \"extends\": [\"airbnb\", \"prettier\", \'plugin:vue/recommended\'],
  \"plugins         


        

Answer 1

You have parser nested inside of parserOptions. It should be a sibling, like this:

"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
},

As for no-unused-vars, I'm afraid this is an ongoing bug with @typescript-eslint: https://github.com/typescript-eslint/typescript-eslint/issues/363

Answer 2

I got lot of false errors with latest TypeScript/ES-Lint versions and I found that they came up with an experimental rule to fix the no-unused-vars which is broken and with the experimental rule @typescript-eslint/no-unused-vars-experimental it finally works as I expect it to.

Prior to the change on my side, I had multiple false errors when using interfaces/types saying that these vars were unused (which of course they'll never be used since they're not variables but rather interfaces/types)... and in case you're curious about the code itself, here is the PR adding this experimental rule which is how I found the rule.

Here's a subset of my updated .eslintrc file

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars-experimental": "error",
    "no-unused-vars": "off"
  }
}

and I'm now finally back to normal :)

Answer 3

It's a bit buried in the documentation, but if you add some things to the 'extends' property, you can use both the rules recommended by ESLint like no-unused-vars, and have it actually work in Typescript. Like so:

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

@typescript-eslint/recommended seems to be the thing that allows eslint:recommended to deal with Typescript constructs effectively. Not sure how it would affect your other extensions though.

Answer 4

I think the use of "plugin:@typescript-eslint/recommended" introduces bunch of unwanted rules. One is probably better off using "@typescript-eslint/no-unused-vars" ESLint rule instead.

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

Reference - https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md