If you dive into the documentation, you'll discover a valuable approach to leveraging both ESLint's recommended rules, such as no-unused-vars, and making them compatible with Typescript. Simply add the following to the 'extends' property:

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

The inclusion of @typescript-eslint/recommended seems to be the key in enabling eslint:recommended to effectively handle Typescript syntax. However, the impact on other extensions is uncertain.

Encountering numerous false errors with the latest versions of TypeScript/ESLint, I discovered an experimental rule that addresses the issue of no-unused-vars. This rule,

@typescript-eslint/no-unused-vars-experimental

, finally resolves the errors as expected.

Prior to implementing this change, I faced misleading errors related to unused interfaces/types, which are not technically variables. These errors were misleading since these interfaces/types inherently remain unused. For those interested, the PR introducing this experimental rule helped me identify the solution.

Below is an excerpt from my revised .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"
  }
}

With this adjustment, everything is now functioning normally again :)

UPDATE (January 2021)

An update shared by Brad, a project maintainer, in the comment section below has clarified that the temporary solution involving

@typescript-eslint/no-unused-vars-experimental

is deprecated. Users should now directly utilize

@typescript-eslint/no-unused-vars

for the intended behavior. This information was greatly appreciated, and I have successfully transitioned back to

@typescript-eslint/no-unused-vars

in my codebase.

It is advisable to avoid using

@typescript-eslint/no-unused-vars-experimental

as it is now deprecated and will be phased out in the next major update. To ensure compatibility, upgrade to the latest tooling version and make use of

@typescript-eslint/no-unused-vars

. Source: Brad, the project maintainer.

UPDATED RESPONSE as of January 2021

Here is the up-to-date version of my .eslintrc file that is currently working as intended :)

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

When working with decorators, I ran into an issue where I wanted to use a variable name that made the code clearer, like this:

@OneToMany((type) => Employee)

instead of @OneToMany(() => Employee)

To solve this in TypeScript, the common practice is to prefix with an underscore:

@OneToMany((_type) => Employee)

There is a way to configure ESLint to allow this as well:

.eslintrc.js

module.exports = {
  ...
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }]
    ....
  },
};

If you're trying to configure no-unused-vars in TypeScript with a YAML file, such as .eslintrc.yaml, the setup should be like this:

rules:

  "@typescript-eslint/no-unused-vars":
  - warn
  - argsIgnorePattern: "^_"                # Remind: this line!
    varsIgnorePattern: "^_"
    caughtErrorsIgnorePattern: "^_"

  no-unused-vars: # disabled but see typescript-eslint/no-unused-vars
  - off
  ...

The parser element is currently nested within the parserOptions element. It should be a sibling element, presented like this:

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

Concerning the no-unused-vars issue, unfortunately, it seems to be a persistent bug related to @typescript-eslint: https://github.com/typescript-eslint/typescript-eslint/issues/363

By updating `@typescript-eslint/eslint-plugin` and `@typescript-eslint/parser` from version 3.x to the most recent 4.x, I was able to successfully resolve the problem.

In my view, disabling the rule can be risky when working on projects that involve both typescript and javascript.

A practical solution would be to set "overrides" at the root level in the .eslintrc.json file:

  "overrides": [
    {
      "files": ["*.ts"],
      "rules": {
        "no-unused-vars": "off"
      }
    }
  ],

Another rule that has worked well for me is /eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }]/
You can easily add this rule to your .eslintrc.json file. For example, this particular rule ignores all Strings that start with a Capital letter.

    "rules": {
        "no-unused-vars": [
          "error",
          {
            "varsIgnorePattern": "^[A-Z]"
          }
        ],
    }

For further details and additional properties, you may refer to this link.

For years, I struggled with the same error, endlessly trying to figure out why it wasn't working. After experimenting with various configurations, I finally found a solution that worked for me. Hopefully, this helps someone else facing similar difficulties!

eslintrc.js

module.exports = {
    env: {
        browser: true,
        node: true,
    },
    parser: "@typescript-eslint/parser",
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "prettier",
        "plugin:prettier/recommended",
        "plugin:@typescript-eslint/recommended",
    ],
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        project: "tsconfig.eslint.json",
        tsconfigRootDir: __dirname,
        sourceType: "module", // Allows for the use of imports
    },
    plugins: ["@typescript-eslint", "@typescript-eslint/tslint", "import", "unused-imports"],

    rules: {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars-experimental": "error",
        "no-unused-vars": "off",
        "import/order": "error",
        "no-console": ["warn", { allow: ["warn", "error"] }],
        eqeqeq: ["error", "always"],
        "no-else-return": "error",
    },
    settings: {
        "import/resolver": {
            node: {
                extensions: [".js", ".jsx", ".ts", ".tsx"],
                moduleDirectory: ["node_modules", "src/"],
            },
        },
    },
};

I have implemented this specific configuration and it is functioning as expected.

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "jest"],
  "rules": {
    "import/extensions": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

After encountering an issue in my code where I inadvertently used the same name for an exported class function component and a type within the same file, I realized that eslint did not flag this as an error. Instead, it kept complaining about the fact that the exported component was not being used. I hope my experience can help someone else facing a similar issue. Below is the snippet of code that caused the problem:

type Component = {
  readonly prop1: string;
  readonly prop2: string;

 export const Component = (
  props: Component
): ReactElement => {
  return (<p>Component</p>)
}

This led to a warning for the exported Component function. To resolve this issue, I simply renamed the Component type to something unique, like ComponentProps:

type ComponentProps = {
  readonly prop1: string;
  readonly prop2: string;

 export const Component = (
  props: ComponentProps
): ReactElement => {
  return (<p>Component</p>)
}

If your setup works perfectly in Project A but not in Project B despite identical configurations, here are a couple of potential fixes you can try out:

• Close and reopen your Integrated Development Environment
• Try disabling and re-enabling the ESLint extension

This has always been a reliable solution for me.

For individuals finding it difficult with function parameters, here is a suggestion to resolve the issue.

If the error persists despite having your .eslintrc set to:

'@typescript-eslint/no-unused-vars': 'off'

ensure that you also include:

"noUnusedParameters": false

in your tsconfig.json.