Path Intellisense 扩展需手动安装启用,并确认语言模式正确、配置项适配(如 mappings 和 autoSlashAfterDirectory)、可手动触发提示、排除 node_modules 干扰、并配置 tsconfig.json 以支持 TypeScript 路径别名。

如果您在使用 VSCode 编写代码时需要频繁输入文件路径,但发现编辑器未自动提示相对或绝对路径,则可能是 Path Intellisense 扩展未启用、配置异常或与当前工作区不兼容。以下是启用并正确使用该扩展的多种操作方式:
本文运行环境:MacBook Pro,macOS Sequoia。
一、安装并启用 Path Intellisense 扩展
Path Intellisense 是一个独立的 VSCode 插件,需手动安装后方可生效,其核心功能依赖于扩展激活状态与语言模式匹配。
1、打开 VSCode,点击左侧活动栏中的扩展图标(四个方块组成的图标)。
2、在扩展搜索框中输入 Path Intellisense,找到作者为 Christian Kohler 的官方扩展。
3、点击“安装”按钮,安装完成后点击“启用”。
4、重启 VSCode 确保扩展完全加载。
二、验证工作区语言模式是否受支持
该扩展仅在特定语言标识(language ID)下触发路径提示,若当前文件未被识别为支持类型,则不会显示建议。
1、打开任意源码文件(如 index.js 或 style.css)。
2、查看窗口右下角状态栏,确认显示的语言名称(例如 JavaScript、CSS、HTML)。
3、若显示为 Plain Text,点击该区域,在弹出菜单中选择对应语言(如 JavaScript)。
4、重新在字符串中输入引号内的路径片段(如 “./”),观察是否出现路径候选列表。
三、检查并修改扩展配置项
默认配置可能禁用某些功能(如全局路径提示或大写敏感匹配),需手动调整 settings.json 中的键值对以适配项目结构。
1、按下 Cmd + ,(macOS)打开设置界面。
2、点击右上角的“打开设置(JSON)”图标(两个花括号 {})。
3、在 settings.json 文件中添加以下字段(若不存在):
4、确保包含 “path-intellisense.mappings”: {} 用于自定义别名映射。
5、确认 “path-intellisense.autoSlashAfterDirectory”: true 已启用,以在选中目录后自动补全斜杠。
四、手动触发路径提示
当自动提示未响应时,可通过快捷键强制唤起路径建议面板,适用于所有支持语言模式下的字符串上下文。
1、将光标置于双引号或单引号内部(例如 import ‘./’ 中的末尾位置)。
2、按下 Ctrl + Space(Windows/Linux)或 Cmd + Space(macOS)。
3、此时应显示当前目录及子目录的完整路径树,支持键盘方向键导航与回车确认。
五、排除 node_modules 干扰
默认情况下,Path Intellisense 会扫描整个工作区,包括 node_modules 目录,导致提示延迟或结果冗余,可通过配置屏蔽无关路径。
1、打开 settings.json 文件(同第三步)。
2、添加配置项:“path-intellisense.excludedItems”: {“**/node_modules/**”: true}。
3、保存文件后,重新打开一个 JS 或 TS 文件进行测试。
六、启用基于 tsconfig.json 的路径别名解析
对于使用 TypeScript 路径映射(paths)的项目,需显式开启别名支持,否则无法识别 “@/components/Button” 类型路径。
1、确认项目根目录存在 tsconfig.json 文件且其中包含 “compilerOptions.paths” 配置。
2、在 settings.json 中添加:“path-intellisense.tsconfig”: “./tsconfig.json”。
3、重启 VSCode 或执行命令面板中的 Developer: Reload Window。