如何在WebStorm中快速清理未使用的Imports和变量

兄弟们，聊一个在WebStorm里天天用，但未必真搞懂的小功能——`Optimize Imports`。先说说它能干吗，不能干吗，不然剁起手来容易翻车。 ## 哪些 import 会被“优化”掉？ 很简单，它只收拾当前文件里那些真正没被用到的 import。具体来说： - 像 `import { foo } from 'bar'` 里那个孤零零的 `foo` - 整个 `import * as utils from './utils'`，如果 `utils` 在代码里压根没露面 - 重复导入（比如同一行 `import React from 'react'` 写了两次），它会自动帮你合二为一 但注意，它不碰带 `type` 的导入（除非你手动开了 TypeScript 的某个特殊检查），也不管动态 `import()` 表达式。所以别指望它帮你扫清一切。 ## 怎么一键清理整个项目里的 import？ 默认快捷键 `Ctrl+Alt+O`（Win/Linux）或 `Cmd+Option+O`（Mac）只管当前文件。想扫全项目？ 1. 先点左侧 `Project` 面板，确保它拿到焦点 2. 按下 `Ctrl+Alt+Q`（Win/Linux）或 `Cmd+Option+Q`（Mac） 3. 弹出的对话框里选范围——强烈推荐勾上 `Only VCS changed files`，避免误伤没提交的依赖文件 4. 点 `Run`，WebStorm 会自动处理所有匹配的 `.ts` 和 `.js` 文件 需要提醒的是：这招对没纳入 Git 跟踪的文件无效，`.d.ts` 和配置类文件它也不碰。 ## 删未用变量/函数/类型？别指望 Optimize Imports 不少人以为 `Optimize Imports` 能顺手把没用到的变量和函数也干掉，这是个误会。那是代码检查的事。 正确操作是： - 光标停在灰色显示的未用变量上，按 `Alt+Enter`，选 `Remove unused declaration` - 想全局排查？菜单栏 `Analyze → Run Inspection by Name`，输入 `unused`，列出 `Unused local symbol`、`Unused function`、`Unused type declaration` 等 - 指定范围运行后，结果列表支持多选 + 右键 `Apply fix` 批量删除 不过要注意一个坑：接口或 `type` 定义虽然没直接使用，但如果被其他类型 `extends` 或 `&` 引用，WebStorm 可能误判为“未使用”，这种就得人工核实了。 ## 删完 import 还报错？常见雷区在这儿 真正让人头疼的从来不是怎么删，而是删完之后运行时突然蹦出个 `ReferenceError`。几个容易踩的坑： - `import` 被注释掉了但代码还在？`Optimize Imports` 默认忽略注释，得手动清 - 项目里用了 `require()` 或 `define()`（比如 AMD）？它只认 ES Module 和 CommonJS 的 `import`/`export` - TypeScript 中 `import type { Foo } from './types'` 这种带 `type` 修饰的，默认不参与清理——得去 `Settings → Editor → Inspections → TypeScript → Unused symbol` 单独开检查 - 某些插件（如 Angular Language Service）可能缓存旧符号，删完后建议重启 WebStorm 或执行 `File → Invalidate Caches and Restart` 说到底，有些 import 是给构建工具（如 Webpack 的 `require.context`）或运行时反射（如 `Reflect.getMetadata`）用的，静态分析根本看不见。这时候删了，就等着报错吧。