WebStorm中@路径标红但运行正常，是因为Vite等构建工具通过vite.config.ts解析别名，而WebStorm仅依赖tsconfig.json的baseUrl和paths配置进行静态分析；必须同步安装@types/node、正确配置tsconfig.json路径映射、并在WebStorm中启用paths映射并重启TS服务。
WebStorm 本身不自动识别 @ 别名，必须通过 tsconfig.json 显式声明并启用 TypeScript 路径映射，否则跳转、补全、标红检查全部失效。
为什么 @/xxx 在 WebStorm 里标红但运行正常？
因为运行时（Vite/Webpack）和编辑器（WebStorm）用的是两套路径解析机制：构建工具靠 vite.config.ts 或 vue.config.js 里的 resolve.alias，而 WebStorm 只认 tsconfig.json 中的 compilerOptions.paths。它不会读取配置文件里的 path.resolve(__dirname, 'src') 这类动态表达式。
常见错误现象：
-
import { foo } from '@/utils'标红，提示Cannot find module '@/utils' - Ctrl+Click 跳转失败，或跳到空文件
- 输入
@/后无路径补全提示
必须配的三项：tsconfig.json + @types/node + WebStorm 设置
缺一不可，顺序不能乱：
- 安装
@types/node：npm install @types/node --save-dev—— 否则tsconfig.json里写baseUrl会被 TS 报错，WebStorm 直接忽略整个 paths 配置 -
tsconfig.json中确保有合法的baseUrl和paths：{ "compilerOptions": { "baseUrl": "./src", "paths": { "@/*": ["*"] } } }注意：baseUrl必须是相对于tsconfig.json的相对路径（如"./src"），不能是"src"或"/src"；paths的 key 必须以/结尾（"@/*"✅，"@"❌） - 在 WebStorm 中打开
Settings → Languages & Frameworks → TypeScript，确认：- TypeScript version 使用项目本地安装的（非内置）
- 勾选
Use paths mapping from tsconfig.json
Restart TypeScript Service
Vue CLI / Vite 项目别名不一致怎么办？
Vue CLI 默认把 @ 指向 src/，Vite 也常这么配，但 WebStorm 不会自动同步这个约定。你必须在 tsconfig.json 里显式补上对应 paths，否则编辑器“看不见”。
例如 Vite 项目中 vite.config.ts 写了：
resolve: { alias: { '@': path.resolve(__dirname, 'src') } }
那 tsconfig.json 就必须配：
"@/*": ["src/*"]而不是指望 WebStorm 去解析
path.resolve。
额外提醒：如果项目用了多级别名（如 @utils/*），paths 中也要一一对应，且目录真实存在、大小写完全匹配（Linux/macOS 区分大小写）。
容易被忽略的细节：节电模式和 ESLint 干扰
节电模式（Power Save Mode）开启后，WebStorm 会禁用所有代码分析功能，包括路径别名解析 —— 检查菜单栏 File → Power Save Mode 是否被勾选。
另外，有些项目会建 alias.config.js 或 webpack.config.js 来辅助配置，但 WebStorm 不读这些文件；若该文件里用了 require('path') 却没装 @types/node，ESLint 可能报错，进而干扰 IDE 对整个项目的类型服务加载 —— 此时建议在 .eslintignore 中加入该文件，或直接删掉它，专注用 tsconfig.json 管理。
