CODEWITHSUNDEEP
typescripteslint
CptDayDreamer
CptDayDreamer

Reputation: 1794

ESLint - "no-unused-vars" warning for every import

I'm using an Angular project and just wanted to use ESLint with Prettier again. Sadly there is an annoying problem that every import is shown with the warning 'XYZ' is defined but never used. eslint(@typescript-eslint/no-unused-vars)

enter image description here

enter image description here

I can only fix this if I completly disable this rule. But then I wouldn't get a hint for unused const variables like in line 22.

My eslintrc.json:

{
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "extends": [
    "plugin:angular/johnpapa", //ESLint rules for your angular project with checks for best-practices, conventions or potential errors.
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "prettier", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  "parserOptions": {
    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
    "sourceType": "module" // Allows for the use of imports
  },
  "settings": {
    "angular": {
      "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
    }
  },
  "root": true,
  "env": {
    "node": true,
    "jest": true
  },
  "rules": {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    "no-empty-function": "off",
    "@typescript-eslint/no-empty-function": ["off"],
  },
  "ignorePatterns": ["/*.*"]
}

Used dependencies:

"@typescript-eslint/eslint-plugin": "^4.28.4",
"eslint": "^7.31.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-angular": "^4.0.1",
"eslint-plugin-prettier": "^3.4.0",
"prettier": "^2.3.2",
"prettier-eslint": "^12.0.0",

Upvotes: 4

Views: 7577

Answers (2)

Almaju
Almaju

Reputation: 1383

You can use import type { TranslateService } from "..." to precise this only going to be used for typing and not an actual variable in your code.

Upvotes: 0

CptDayDreamer
CptDayDreamer

Reputation: 1794

It seems like there was a problem between some versions and also one package missing. The package "@typescript-eslint/parser": "^4.19.0".

It works now with the following packages in the devDependencies:

"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"eslint": "^7.23.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-angular": "^4.0.1",
"prettier": "^2.3.2",
"prettier-eslint": "^12.0.0"

Before this the versions were even newer for the eslint packages:

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-angular": "^4.0.1",
"eslint-plugin-prettier": "^3.4.0"

So I used the npm command npm update --save-dev to update all dev dependencies which downgraded the listed ones and made it work.

Upvotes: 3

Related Questions