Path Intellisense 默认不支持 Markdown 图片路径补全,需手动配置 extensions 并配合 alias;vscode-md-image-helper 依赖固定资源目录,需指定 imageFolder;Monorepo 中应使用 Auto Import 配合 tsconfig paths 实现别名补全;Ctrl+Click 跳转失败多因空格、协议前缀或插件冲突。

Path Intellisense 为什么补不全图片路径?
默认只识别 .js、.ts 等代码文件,对 .md 里的  或 src="..." 不生效。必须手动开启资源类型过滤:
- 在 VSCode 设置里搜
path-intellisense.extensions,改成[".png", ".jpg", ".gif", ".svg", ".pdf"] - 如果项目用 WebP,得显式加上
".webp",否则补全列表里压根不出现 - 路径开头带
@/别名时,插件默认不解析——得配合alias配置(如 Webpack 的resolve.alias)或改用Import Cost类插件
vscode-md-image-helper 插件报“找不到 image folder”怎么办?
它依赖项目根目录下固定名称的资源目录,比如 assets 或 images。一旦你把图片放在 public/img 里,插件就直接罢工。
- 打开
.vscode/settings.json,加一行:"mdImageHelper.imageFolder": "public/img" - 注意路径是相对于工作区根目录,不是相对于当前 Markdown 文件
- 如果用了多级嵌套(如
docs/guide/xxx.md引用../assets/logo.png),插件可能误判相对路径——此时建议统一用/assets/这种绝对路径(需服务端支持)
Monorepo 里跨 package 引用路径总出错
比如 packages/ui/src/Button.tsx 想引用 packages/shared/assets/icon.svg,手写 ../../shared/assets/icon.svg 容易漏层级,且重构时极易断裂。
- 装
Auto Import插件,它能识别tsconfig.json中的paths配置,自动补全@shared/assets/icon.svg - 确保
tsconfig.json里有:"baseUrl": ".", "paths": { "@shared/*": ["packages/shared/*"] } -
Path Intellisense对@别名无效,别指望它补全——这是它的硬限制,不是配置问题
为什么 Ctrl+Click 跳转图片路径会失败?
VSCode 原生不支持图片路径跳转,所谓“可点击”其实是靠插件模拟的。常见失效原因:
- 路径含空格或中文:比如
my image.png→ 改成my_image.png或 URL 编码(my%20image.png) - 使用了
file://协议前缀:VSCode 只认相对路径或工作区根路径下的绝对路径(/assets/xxx.png) - 插件冲突:同时启用
Path Intellisense和Markdown All in One时,后者会覆盖跳转逻辑——关掉Markdown All in One的markdown.extension.preview.autoShowPreviewToSide试试
真正麻烦的不是补全本身,而是不同插件对“路径”的理解根本不一致:有的认相对路径,有的只吃绝对路径,有的连 ~ 都不处理。选插件前先看它支持的路径模式,比调半天配置更省时间。


















