reactjs - Hur kan jag ta bort oanvända importer/deklarationer från hela projektet i React Typescript?

Jag försöker ta bort oanvända imports och deklarationer som besvaras i denna SO-tråd för Angular. Jag försöker uppnå målet med eslint-plugin-react, men har inte hittat något alternativ för att ta bort de oanvända imports och deklarationer från hela projektet med ett enda kommando.

Här är min .eslintrc.json:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "unused-imports"
    ],
    "rules": {
        "indent": [
            "warn",
            "tab"
        ],
        "linebreak-style": [
            "warn",
            "windows"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "warn",
            "always"
        ],
        "@typescript-eslint/no-unused-vars": "on",
        "unused-imports/no-unused-imports-ts": "on"
    }
}

Eller finns det ett sätt att göra samma sak med ESLint- eller Typescript Hero-tillägg i VS Code?

Svar #1

Genom att använda unused-imports plugin och unused-imports/no-unused-imports-ts regel, kommer eslint --fix att ta bort imports.

Här är ett exempel på ett repo där --fix tar bort de oanvända import:erna.

https://github.com/moshfeu/eslint-ts-unused-imports

Installation

yarn add -D eslint-plugin-unused-imports

// eslint.config.js

import tseslint from "typescript-eslint";
import unusedImports from "eslint-plugin-unused-imports";

export default tseslint.config(
  {
    plugins: {
      "unused-imports": unusedImports,
    },
    rules: {
      "unused-imports/no-unused-imports": "warn",
    },
  }
);

Gammalt svar

eslint har ett inbyggt alternativ för att fixa.

eslint ... --fix

Om rules innehåller no-unused-vars, kommer eslint att "fixa" den oanvända importen genom att ta bort den (tillsammans med andra automatiska korrigeringar).

Svar #2

Du kan också använda genvägar i VSCode, om det behöver göras snabbt och utan extra ansträngning:

  • Option + Shift + O för Mac
  • Alt + Shift + O för Windows

Svar #3

Lägg till detta i din VS Code settings.json:

"editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
   "source.fixAll": "always",
   "source.organizeImports": "always",
   "source.sortMembers": "always"
 }

Varje gång du sparar en fil kommer den automatiskt att ta bort oanvända importeringar. Det är en bra metod för underhåll inför framtida redigeringar, men det kommer inte att hjälpa befintliga oanvända importeringar, om du inte går direkt till de filerna.

Lösning som ursprungligen publicerades av Damir Drempetić här: https://dev.to/bornfightcompany/easily-sort-imports-and-remove-unused-declarations-on-each-save-in-vs-code-35k1

Svar #4

Sammanfattning

Använd unused-imports/no-unused-imports istället för no-unused-vars, som regelnamn.

Om du använder ESLint-versionen, eslint-plugin-unused-imports, kanske du vill ändra regelnamnet till unused-imports/no-unused-imports istället för den generella no-unused-vars.

{
    "rules": {
        "unused-imports/no-unused-imports": "error"
    }
}

Se författarens GitHub för detaljerad användning.

För mig kommer no-unused-var inte med en automatisk fixare (det kommer bara att nämna antalet fel/varningar men när jag byter till unused-imports/no-unused-imports, fixas alla problem automagiskt.

Relaterade artiklar