WebStorm import路径不自动补全需同时满足：Webpack配置在项目根目录且用path.resolve、tsconfig.json同步配置paths和baseUrl、IDE中启用Use paths mapping并重启TS服务。
WebStorm 里 import 路径不自动补全？先确认 Webpack 或 TS 配置是否被识别
WebStorm 不会凭空理解 @/components 这种别名，它必须从明确的配置文件中提取路径映射。只配了 webpack.config.js 不够，IDE 还得“看到”它。
- Webpack 别名必须写在项目根目录（和
package.json同级）的webpack.config.js、webpack.config.cjs或webpack.config.mjs中；放在config/子目录下默认不扫描 - 别名值必须用
path.resolve(__dirname, 'src')，不能是字符串拼接如__dirname + '/src'，否则 WebStorm 静态分析失败 - TypeScript 项目还必须在
tsconfig.json的compilerOptions.paths里同步声明，例如：{"@/*": ["src/*"]}，且baseUrl设为"./"或"./src" - WebStorm 设置中需勾选
Use paths mapping from tsconfig.json，改完后点右下角 TS 图标 →Restart TypeScript Service
HTML 里引用图片/CSS/JS 时路径错乱？标记资源根目录是关键
WebStorm 默认把所有文件夹当源码处理，但 img src、link href 这类静态资源路径，需要 IDE 明确知道“哪些文件夹是资源根”，才能提供相对路径补全和 Ctrl+Click 跳转。
- 在 Project 工具窗口中右键点击存放图片、字体、公共 CSS 的文件夹（如
public或assets），选择Mark Directory as → Resources Root - 标记后，HTML 中输入
src="会自动提示该目录下的文件；输入../也能正确向上跳转，而不是报红或找不到 - 如果用了
public目录且希望路径以/开头（如/logo.png），还需在 Settings → Languages & Frameworks → JavaScript → Libraries 中添加public为Resource root，并勾选Include subdirectories - 别把
node_modules标为资源根——它会被当成源码参与类型检查，引发大量误报
移动 HTML 或 JS 文件后路径全崩？别拖拽，用 Refactor | Move
直接鼠标拖文件进新目录，WebStorm 完全不更新任何 import、src、href 路径。看似移过去了，实际整个项目引用链已断裂。
- 正确做法：右键文件 →
Refactor → Move（或按F6），目标目录必须在当前项目索引范围内（不能拖到桌面或文档夹） - 移动 HTML 文件时，IDE 会自动修正同页面内所有
script src、link href、img src的相对路径；移动 JS 文件则更新所有import和require - 若移动后
import仍标红，大概率是tsconfig.json的include或exclude没覆盖新位置，需手动调整 - 移动含
public/引用的 HTML（如src="/js/app.js"），这类绝对路径不会被修改——这是预期行为，不是 bug
浏览器报 404 却本地能跑？ESM 场景下 .js 后缀不能省
Chrome 加载 ESM 模块时要求路径精确匹配文件系统，import { foo } from '@/utils' 会发请求 /utils，但真实文件是 /utils.js，必然 404。
- WebStorm 默认生成 import 语句时不带
.js后缀，需手动开启：Settings → Editor → Code Style → JavaScript → Imports → 勾选Use file extension in imports - 该设置只影响新生成的 import；已有语句需全选文件 → 按
Ctrl+Alt+O（Optimize Imports）批量补后缀 - Vite / Webpack Dev Server 通常配置了自动解析
.js，所以本地运行正常，但直接用file://打开或部署后就暴露问题 - 如果项目同时用 ESM 和 CommonJS，建议统一后缀策略，避免开发/生产行为不一致
