如何启用VS Code本地路径自动补全？原功能失效该如何解决？

一、启用本地图片路径自动补全功能 #

1. 利用VS Code内置功能 #

VS Code自带基础路径补全，确保以下配置正确（打开settings.json：快捷键Ctrl+,（Windows）/Cmd+,（macOS），点击右上角图标进入编辑模式）：

• 确保未排除图片目录/文件：

  "files.exclude": {
    // 移除类似"**/*.png": true、"**/images/**": true的规则
  }
  

• 开启基于路径的精准补全：

  "editor.wordBasedSuggestions": false, // 关闭单词补全避免干扰路径提示
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  

2. 用专业插件强化功能 #

安装Path IntelliSense插件可获得更精准的路径补全（含图片文件），安装后添加以下配置优化：

"path-intellisense.extensionOnImport": true,
"path-intellisense.showHiddenFiles": true,
"path-intellisense.autoSlashAfterDirectory": true,
// 针对HTML等文件强化字符串内的路径补全
"[html]": {
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  }
}

二、功能失效的排查与修复步骤 #

• 检查工作区信任状态：若状态栏显示“工作区不受信任”，点击信任按钮——不信任状态下大部分智能补全功能会被禁用。
• 重置相关配置：
  1. 打开settings.json，搜索path-intellisense和files.exclude，删除可能屏蔽图片的规则。
  2. 打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），执行Preferences: Reset Settings，可选择重置所有设置或仅重置补全相关配置（记得备份自定义配置）。
• 排查插件冲突：
  1. 执行命令面板中的Developer: Reload Window with Extensions Disabled，重启后测试补全是否恢复。
  2. 若恢复正常，逐个启用插件并重启测试，定位冲突插件后更新或卸载。
• 清除VS Code缓存：
  1. 关闭VS Code。
  2. 根据系统删除缓存目录：
     • Windows：%APPDATA%\Code\Cache、%APPDATA%\Code\CachedData
     • macOS：~/Library/Application Support/Code/Cache、~/Library/Application Support/Code/CachedData
     • Linux：~/.config/Code/Cache、~/.config/Code/CachedData
  3. 重新打开VS Code测试。
• 检查文件关联与语言模式：
  1. 在编辑图片路径的文件（如HTML）中，确认右下角的语言模式为对应类型（如“HTML”）。
  2. 在settings.json中确保图片扩展名未被错误关联：

     "files.associations": {
       // 不要将.png/.jpg等后缀关联到非网页/脚本类语言
     }
     

• 更新软件与插件：
  1. 执行命令面板中的Help: Check for Updates，将VS Code更新至最新版本。
  2. 打开扩展面板（Ctrl+Shift+X/Cmd+Shift+X），更新所有已安装插件，尤其是Path IntelliSense这类补全相关插件。

内容的提问来源于stack exchange，提问作者Yaw Kean Huat