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

p8ekf7hl 于 2023-05-08 发布在 TypeScript

关注(0)|答案(4)|浏览(643)

我正在尝试删除未使用的导入和声明，如this SO thread for Angular中所回答的。我试图使用eslint-plugin-react来实现这个目标，但是没有找到任何选项来使用一个命令从整个项目中删除未使用的导入和daclarations。
这里是我的.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扩展来做同样的事情？

typescript

来源：https://stackoverflow.com/questions/64365300/how-can-i-remove-unused-imports-declarations-from-the-entire-project-of-react-ty

4条答案

按热度按时间

2w2cym1i1#

使用unused-imports插件和unused-imports/no-unused-imports-ts规则，eslint --fix将删除import。
下面是一个例子，--fix删除了未使用的import s。
https://github.com/moshfeu/eslint-ts-unused-imports

旧答案

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

eslint ... --fix

如果rules包含no-unused-vars，eslint将通过删除它们（沿着其他auto fixes）来“修复”未使用的导入。

赞(0）回复(0）举报 2023-05-08

2ul0zpep2#

如果需要快速完成，您也可以在VSCode中使用快捷方式，而无需额外的努力：
Option + Shift + O for Mac
Alt + Shift + O for Windows

赞(0）回复(0）举报 2023-05-08

cyvaqqii3#

TL;DR

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

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

参考作者的GitHub了解详细用法。
对我来说，no-unused-var没有自动修复程序（它只会提到错误/警告的数量，但当我切换到unused-imports/no-unused-imports时，所有的问题都被自动修复了。

赞(0）回复(0）举报 2023-05-08

oiopk7p54#

将此添加到VS Code settings.json：

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

每次你保存一个文件，它会自动删除未使用的导入。这是一个很好的方法，为未来的编辑，但不会帮助现有的未使用的进口，除非你去这些文件直接。
解决方案最初由Damir Drempetić发布在这里：https://dev.to/bornfightcompany/easily-sort-imports-and-remove-unused-declarations-on-each-save-in-vs-code-35k1

赞(0）回复(0）举报 2023-05-08

我来回答

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

4条答案

旧答案

TL;DR

相关问题

热门标签

最新问答