Search code examples
typescriptvisual-studio-codeeslint

Both ESLint and TypeScript report duplicate warnings in VSCode

I setup a new React TypeScript project, and then installed ESLint using the config prompt. I specified that my project uses React and TypeScript.

For some style warnings, I get duplicate warnings from both TypeScript and ESLint. How can I make it so that TypeScript and ESLint warnings don't overlap? Do I have to manually remove some rules from ESLint or is there a pre-made .eslintrc config file to solve this?

enter image description here

Solution

  • You could silence the ESLint warning by disabling the rule in your .eslintrc.js (or .eslintrc.json, etc.) like this:

    ..
rules: {
  'no-unused-vars': 'off',
  '@typescript-eslint/no-unused-vars': 'off',
  ..
}
..

    However, I personally prefer to disable the TypeScript warning, since the ESLint rule is a bit more configurable. To disable it in TypeScript, set these compiler options in your tsconfig.json:

    ..
"compilerOptions": {
  "noUnusedLocals": false,
  "noUnusedParameters": false,
  ..
}
..

    Now you can for example tweak the ESLint rule to not trigger on identifiers that start with a _, by including this in your .eslintrc.js:

    ..
rules: {
  'no-unused-vars': 'off',
  '@typescript-eslint/no-unused-vars':
    ['warn', {argsIgnorePattern: '^_', varsIgnorePattern: '^_'}],
  ..
}

    Note that the base rule no-unused-vars is recommended to always be disabled by the @typescript-eslint/no-unused-vars docs. For an overview of all the options of @typescript-eslint/no-unused-vars, check the no-unused-vars docs, since the options are the same.