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

Jeg bruker ESLint i alle mine TypeScript-prosjekter med følgende innstillinger:

  "extends": ["airbnb", "prettier", 'plugin:vue/recommended'],
  "plugins": ["prettier"],
  "parserOptions": {
  "parser": "@typescript-eslint/parser",
  "ecmaVersion": 2018,
  "sourceType": "module"
  },

en rekke tilpassede regler. Jeg har også installert følgende avhengigheter for TypeScript-støtte:
```
  "@typescript-eslint/eslint-plugin": "^1.7.0",
  "@typescript-eslint/parser": "^1.7.0",
```

Imidlertid ser en av ESLints mest nyttige regler, https://eslint.org/docs/rules/no-unused-vars, ut til å være veldig dårlig konfigurert for TypeScript-prosjekter. For eksempel, når jeg eksporterer en enum, advarer regelen meg om at enumen ikke er i bruk i filen der den er erklært:

export enum Foo {
   Bar,
}

På samme måte, når jeg importerer et grensesnitt eller en klasse for å brukes som en type, vil 'no-unused-vars' klage igjen på linjen med selve importen:

I Foo.ts

export interface Foo {
   bar: string;
}

I bar.ts

import { Foo } from './Foo'
const bar: Foo = { bar: 'Hello' };

Finnes det noen måte å konfigurere regelen no-unused-vars på for å ta disse to tilfellene i betraktning? Jeg er ikke så glad i å deaktivere regelen, da den er en av de mest nyttige reglene i hele regelsettet mitt utenom disse tilfellene.

Jeg har allerede nedgradert regelen til bare å gi en advarsel i stedet for en feil, men at alle dokumentene mine er fulle av advarsler, ødelegger fortsatt litt for poenget med å bruke esLint.

Å fylle alle dokumentene mine med //eslint-disable-line som foreslått her virker også som en dårlig løsning.

Svar #1

Jeg tror bruken av "plugin:@typescript-eslint/eslint-recommended" introduserer en rekke uønskede regler. Det er sannsynligvis bedre å bruke "@typescript-eslint/no-unused-vars" ESLint-regelen i stedet.

{
  "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"]
  }
}

Merk: sørg for å starte serveren på nytt etter å ha gjort endringen ovenfor.

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

Svar #2

Det er litt begravd i dokumentasjonen, men hvis du legger til noen ting i 'extends'-egenskapen, kan du bruke både reglene anbefalt av ESLint som no-unused-vars, og få det til å fungere faktisk i Typescript. Slik:

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

@typescript-eslint/recommended ser ut til å være det som gjør at eslint:recommended kan håndtere Typescript-konstruksjoner effektivt. Ikke sikker på hvordan det ville påvirke de andre utvidelsene dine, skjønt.

Svar #3

Jeg fikk mange falske feil med de nyeste versjonene av TypeScript/ES-Lint, og jeg fant ut at de kom opp med en eksperimentell regel for å fikse no-unused-vars som er ødelagt, og med den eksperimentelle regelen @typescript-eslint/no-unused-vars-experimental fungerer det endelig slik jeg forventer.

Før endringen på min side, hadde jeg flere falske feil når jeg brukte grensesnitt/typer som sa at disse variablene ikke ble brukt (som selvfølgelig aldri vil bli brukt siden de ikke er variabler, men snarere grensesnitt/typer)... og hvis du er nysgjerrig på selve koden, her er PR-en som legger til denne eksperimentelle regelen, som er hvordan jeg fant regelen.

Her er et delsett av min oppdaterte .eslintrc-fil

{
  "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"
  }
}

og jeg er nå endelig tilbake til normalen :)

REDIGER (jan. 2021)

Som nevnt av Brad (en vedlikeholder av prosjektet) i kommentaren nedenfor, er dette (var) en midlertidig løsning og er nå foreldet. Fra hans kommentar (nedenfor) kan vi nå bruke @typescript-eslint/no-unused-vars direkte for samme tiltenkte oppførsel. Takk til Brad for informasjonen. Jeg kan også bekrefte at det å bytte tilbake til @typescript-eslint/no-unused-vars nå fungerer for meg (jeg oppdaterte koden min og alt er bra nå).

Dette er ikke veien å gå, og du bør unngå det. @typescript-eslint/no-unused-vars-experimental er foreldet, og vil bli fjernet i neste store versjon. Oppdater til den nyeste versjonen av verktøyene og bruk bare @typescript-eslint/no-unused-vars. Kilde: Jeg er vedlikeholderen av prosjektet.

Så her er den nyeste oppdateringen av min .eslintrc-fil som fungerer for meg :)

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

Svar #4

Mitt problem var med å bruke dekoratører og å ønske å ha en variabel med et passende navn for tydelighet, for eksempel:

@OneToMany((type) => Employee) i stedet for @OneToMany(() => Employee)

Den vanlige løsningen for TypeScript er å prefikse med en understrek:

@OneToMany((_type) => Employee)

Og det er mulig å få ESLint til å godta det samme:

.eslintrc.js

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

Svar #5

For alle som ønsker å få no-unused-vars til å fungere ordentlig i TypeScript når de bruker YAML-konfigurasjon, f.eks. .eslintrc.yaml, ser det slik ut: