WebStorm配置TypeScript自动导入：实现VSCode式混合导入规则

针对这个问题，按以下步骤配置WebStorm即可实现需求：

1. 确认tsconfig.json被WebStorm正确识别 #

首先确保WebStorm加载了你的项目配置：

• 打开File > Settings（快捷键Ctrl+Alt+S）
• 进入Languages & Frameworks > TypeScript
• 确认「TypeScript version」选择的是项目本地的TypeScript包，且「tsconfig.json」指向你项目根目录的配置文件

2. 调整自动导入规则配置 #

进入Editor > Code Style > TypeScript > Imports，修改以下设置：

• 在「Relative imports」区域，勾选两个选项：
  • Use relative import for imports within the same directory
  • Use relative import for imports from subdirectories
• 在「Import paths」区域，选择「Use paths relative to tsconfig.json」，确保路径映射规则生效
• 确保「Insert imports automatically」下的「Add unambiguous imports on the fly」已勾选，让WebStorm自动生成符合规则的导入语句

3. 缓存重置（如果配置后不生效） #

如果调整设置后还是不符合预期，尝试清除WebStorm缓存：

• 打开File > Invalidate Caches...
• 选择「Invalidate and Restart」，重启后再测试导入逻辑

这样配置后，WebStorm的自动导入就会和VSCode的行为一致：同级/子级文件用相对路径，跨目录的导入用绝对路径。

内容的提问来源于stack exchange，提问作者Austin Chappell