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

Question

我被指派从最近离开公司的其他开发人员处获取一些混乱的代码。

我很好奇地问是否有一些Visual Studio Code插件或其他方法可以帮助我们快速有效地整理和整理导入和引用？

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

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

可以转换为类似的

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

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

感谢您的反馈！

Answer 1

从Visual Studio代码发布 1.22 开始，无需扩展即可免费使用。

Shift+Alt+O会照顾你。

Answer 2

自VSCode v.1.24和TypeScript v.2.9：

对于Mac：选项 + Shift + O

对于Win： Alt + Shift + O

Answer 3

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

"compilerOptions": {
    "noUnusedLocals": true,
    "noUnusedParameters": true
}

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

npm install -g typescript

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

我还建议使用打字稿英雄扩展来组织你的导入。

Answer 4

编辑（正如评论和其他人所建议的），视觉工作室代码已经发展并通过简单的

内置提供此功能 适用于Mac的

选项 + Shift + O

Windows的

recent support library

原始答案：

我希望这个视觉工作室代码扩展能满足您的需求： Alt + Shift + O

它提供以下功能：

• 将项目或库的导入添加到当前文件
• 在光标
下添加当前名称的导入
• 使用一个命令添加所有缺少的文件导入
• Intellisense建议符号并自动添加所需的导入 修复您编写的代码的“灯泡功能”
• 对您的导入进行排序和整理（排序和删除未使用的）
• 您打开的TS / TSX文档的代码大纲视图
• JavaScript的所有酷炫东西！ （实验阶段，下面有更好的描述。）

对于Mac： control + 选项 + o

对于Win： Ctrl + Alt + o

Answer 5

如果您是Visual Studio的重度用户，则只需打开您的首选项设置，然后将以下内容添加到settings.json中即可：

function MyComponent({ isVisible }){
  if(isVisible){
    return (
      /* your component code */
    )
  }
}

希望这会有所帮助！

Answer 6

在此线程上已经有很多好的答案！我将发布此消息，以帮助尝试自动执行此操作的任何人！要自动删除整个项目的未使用导入，此article对我确实很有帮助。

在文章中，作者这样解释：

制作一个包含以下内容的独立tslint文件：

{
  "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所具有的其他功能。

Answer 7

转到tslint.json并将属性no-unused-variable的值更改为false