有没有办法从 Angular 2+ 中删除未使用的导入和声明？ [关闭]

Posted 2023-02-22

【中文标题】有没有办法从 Angular 2+ 中删除未使用的导入和声明？ [关闭]

【英文标题】：Is there a way to remove unused imports and declarations from Angular 2+? [closed]

【发布时间】：2018-03-25 03:56:23

【问题描述】：

我被指派从最近离开公司的其他开发人员那里拿一些乱七八糟的代码。

请问有没有Visual Studio Code的插件或者其他方式可以帮助我们快速有效的整理和组织导入和引用？

例如，可能有数百个这样的导入

import  AutoCompleteModule,InputSwitchModule  from 'primeng/primeng';
import  ListboxModule  from 'primeng/primeng';

可以转换成类似的

import  AutoCompleteModule,
         InputSwitchModule,
         ListboxModule   from 'primeng/primeng';

或其他功能，如 自动从 app.module 或整个项目的所有组件中删除那些未使用的导入和声明？

感谢您的任何反馈！

【问题讨论】：

我也想知道对组件的无关导入是否会拖累性能。

***.com/a/49697144/3914072 vscode 1.22 Shift+Alt+O - 适合我！

也可以从命令行（或 git hook）完成：npmjs.com/package/organize-imports-cli

在为它创建扩展名 (marketplace.visualstudio.com/…) 并在发布后发现它可以通过代码操作 (Ctrl/Cmd + .) 在未使用的导入上完成之前，我也有这个问题删除它或所有未使用的导入而不对其进行排序。

版主：我们可以更改审核标准吗？我不认为它目前代表了大多数人想要的。

【参考方案1】：

编辑（如 cmets 和其他人所建议的那样），Visual Studio Code 已经发展并以“组织导入”命令的形式内置提供此功能，并带有以下 default keyboard shortcuts：

选项+Shift+O for Mac

Alt + Shift + O 对于 Windows

---

原答案：

我希望这个 Visual Studio 代码扩展能够满足您的需求：https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

它提供以下功能：

将项目或库的导入添加到当前文件中 为光标下的当前名称添加导入 使用一个命令添加所有缺少的文件导入 建议符号并自动添加所需导入的智能感知 修复您编写的代码的“灯泡功能” 排序和组织您的导入（排序和

删除未使用的

） 打开的 TS / TSX 文档的代码大纲视图 还有 javascript 的所有很酷的东西！ （虽然是实验阶段，下面有更好的描述。）

对于 Mac：控制+选项+o

赢：Ctrl+Alt+o

【讨论】：

感谢您让我使用这个插件，它太棒了！在我刚刚安装它之前，我曾经安装过 Auto-Import 扩展来处理那个小功能（自动导入）。但是在安装 TypeScript Hero 之后......哇，它完成了我需要它做的所有事情，包括在导入语句本身中按字母顺序对依赖项进行排序，摆脱组件类中未使用的导入等等！

2018 年 TS Hero 的项目维护者 has said 他将停止扩展，因为在 VS Code 中直接实现主要功能后它已经过时（参见其他评论）。

有什么方法可以在不重新排序导入的情况下调用Alt+Shift+O？

Alt + Shift + O 也适用于 Linux

目前，TypeScript Hero 相对于 VS Code 的组织者的好处之一是能够分离/分组导入（例如，由换行分隔的全局和本地导入）。如果您想使用此插件在保存时组织导入，可以在 settings.json 中添加以下内容 "typescriptHero.imports.organizeOnSave": true

【参考方案2】：

从 Visual Studio Code Release 1.22 开始，它是免费的，无需扩展。

Shift+Alt+O 会照顾你的。

【讨论】：

不错！我一直在使用 ctrl+shift+-，现在我可以找到并更改快捷方式。

我必须安装它，但我安装的 1.37.1 中没有

【参考方案3】：

如果你是一个重度 Visual Studio 用户，你可以简单地打开你的偏好设置并将以下内容添加到你的 settings.json 中：

...
"editor.formatOnSave": true,
"editor.codeActionsOnSave": 
  "source.organizeImports": true

....

希望这会有所帮助！

【讨论】：

这似乎与 ESLint Prettier 插件冲突。它正在尝试进行单行导入，但 ESLint 正在尝试拆分为多行。

与@Richard 相同的问题。似乎是一个未解决的问题 - github.com/prettier/prettier-vscode/issues/716

有没有办法在保持导入排序的同时禁用删除未使用的导入？

很好的答案。找这个很久了

根据我的经验，自动组织导入和格式不应该在保存时完成，因为它可能导致 git 冲突噩梦。如果他们愿意，应该由开发人员在保存文件之前执行此操作。如果他们正在处理新文件，那没关系，但当您只是对现有代码应用热修复时，就不行了。当然，在 post-commit 阶段使用 Husky 或 Github 之类的操作来 lint 文件更容易，但旧项目通常不会有这个，您只想查看更改差异而不是格式化差异。

【参考方案4】：

为了能够检测未使用的导入、代码或变量，请确保您在 tsconfig.json 文件中具有此选项

"compilerOptions": 
    "noUnusedLocals": true,
    "noUnusedParameters": true

安装 typescript 编译器，如果没有安装它：

npm install -g typescript

以及安装在 Vcode 中的 tslint 扩展，这对我有用，但启用后我注意到 CPU 使用量有所增加，特别是在大型项目中。

我还建议使用 typescript hero 扩展来组织您的导入。

【讨论】：

为我工作，谢谢

【参考方案5】：

自 VSCode v.1.24 和 TypeScript v.2.9 起：

对于 Mac：选项+Shift+O

赢：Alt+Shift+O

【讨论】：

对某些比较重要的，命令是Organize Imports或editor.action.organizeImports

@pcnate 有没有办法在保持导入排序的同时禁用删除未使用的导入？

【参考方案6】：

这个帖子已经有很多好的答案了！我将发布此内容以帮助尝试自动执行此操作的任何人！要为整个项目自动删除未使用的导入，article 对我真的很有帮助。

在文章中作者是这样解释的：

制作一个独立的 tslint-imports.json 文件，其中包含以下内容：

  "extends": ["tslint-etc"],
  "rules": 
    "no-unused-declaration": true
  

然后运行以下命令来修复导入：

 tslint --config tslint-imports.json --fix --project .

考虑修复它引发的任何其他错误。 （我做到了）

然后通过构建来检查项目是否正常工作：

ng build

或

ng build name_of_project --configuration=production 

结束：如果构建正确，您已成功自动删除导入！

注意：这只会删除不必要的导入。在使用前面提到的命令之一时，它不提供 VS Code 提供的其他功能。

【讨论】：

我收到了Could not find implementations for the following rules specified in the configuration: no-unused-declaration ，所以我想这个解决方案不再起作用了。

我使用的是tslint版本5.20.1

这对我有帮助；谢谢。我为我的项目 (React) 添加的一件事是 "no-unused-declaration" 的忽略选项。有关忽略示例，请参阅 this tslint-imports.json。