ESLint - Configuring "no-unused-vars" for TypeScript

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

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "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

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 :)

EDIT (Jan. 2021)

As mentioned by Brad (a maintainer of the project) in the comment below, this is (was) a temporary solution and is now deprecated. From his comment (below), we can now use directly @typescript-eslint/no-unused-vars for the same intended behavior. Thanks to Brad for the info. I can also confirm that switching back to @typescript-eslint/no-unused-vars now works for me (I updated my code and it's all good now).

This is not the way to go, and you should avoid it. @typescript-eslint/no-unused-vars-experimental is deprecated, and will be removed in the next major. Update to the latest version of the tooling and just use @typescript-eslint/no-unused-vars. Source: I am the maintainer of the project.

UPDATED ANSWER since Jan. 2021

So here's the latest update of my .eslintrc file which works for me :)

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

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.