VSCode插件助你告别繁琐的路径输入工作-VSCode-PHP中文网

path intellisense 默认不支持 markdown 图片路径补全，需手动配置 extensions 并配合 alias；vscode-md-image-helper 依赖固定资源目录，需指定 imagefolder；monorepo 中应使用 auto import 配合 tsconfig paths 实现别名补全；ctrl+click 跳转失败多因空格、协议前缀或插件冲突。

vscode插件助你告别繁琐的路径输入工作

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 容易漏层级，且重构时极易断裂。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

装 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 试试