如何从 React Typescript 的整个项目中删除未使用的导入/声明？

Question

我正在尝试删除未使用的导入和声明，如在这个 SO 线程中回答的Angular。我正在尝试使用eslint-plugin-react实现目标，但没有找到任何选项来使用单个命令从整个项目中删除未使用的导入和声明。

这是我的 .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"
    }
}

或者有没有办法在 VS Code 中使用 ESLint 或 Typescript Hero 扩展来做同样的事情？

Answer 1

如果需要快速完成且无需额外工作，您还可以在 VSCode 中使用快捷方式：

• Option+ Shift+O适用于 Mac
• Alt+ Shift+O适用于 Windows

Answer 2

将其添加到您的 VS Code 中settings.json：

\n

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

\n

每次保存文件时，它都会自动删除未使用的导入。这是一种为将来的编辑保留内部空间的好方法，但不会帮助现有的未使用的导入，除非您直接转到这些文件。

\n

最初由Damir Drempeti\xc4\x87发布的解决方案：https ://dev.to/bornfightcompany/easily-sort-imports-and-remove-unused-declarations-on-each-save-in-vs-code-35k1

\n

Answer 3

长话短说

使用,unused-imports/no-unused-imports代替no-unused-vars, 作为规则名称。

如果您使用的是 ESLint 版本eslint-plugin-unused-imports，您可能需要将规则名称更改为 ，unused-imports/no-unused-imports而不是毯子no-unused-vars。

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

详细使用方法请参考作者的GitHub 。

对我来说，no-unused-var没有自动修复程序（它只会提到错误/警告的数量，但是当我切换到 时unused-imports/no-unused-imports，所有问题都会自动修复。

Answer 4

使用unused-imports插件和unused-imports/no-unused-imports-ts规则， eslint --fix将删除imports。

这是一个示例 repo，它--fix删除了未使用的imports。

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

旧答案

eslint有一个内置的修复选项。

eslint ... --fix

如果rulescontains no-unused-vars，eslint 将通过删除它们（以及其他自动修复）来“修复”未使用的导入。