如何配置VSCode实现React项目中图片路径的自动补全？

故障场景 #

• 原生文件夹、.js文件路径补全正常，但图片类资源路径无法自动补全
• 安装多个路径补全扩展后，文件夹、.js文件路径出现重复补全提示

修复步骤 #

1. 解决重复提示问题 #

• 卸载或禁用所有同类型路径补全扩展，仅保留1个常用扩展即可（如Path Intellisense），避免多个扩展功能冲突
• 关闭VSCode原生的JS/TS路径补全开关，避免原生功能和扩展重复输出提示：
  • 打开VSCode设置面板，快捷键为 Ctrl+,（Windows）或 Cmd+,（Mac）
  • JS项目搜索 @id:javascript.suggest.paths，关闭该配置项
  • TS项目搜索 @id:typescript.suggest.paths，关闭该配置项

2. 解决图片路径无法补全问题 #

• 为保留的路径补全扩展添加图片后缀识别规则，以Path Intellisense为例：

  在扩展配置中找到 File Extension 配置项，添加常见图片格式后缀：png、jpg、jpeg、svg、gif、webp

• 在项目根目录新增配置文件，让VSCode识别项目路径规则：
  • JS项目新增 jsconfig.json，TS项目新增 tsconfig.json，配置内容如下：

  {
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@/*": ["*"]
      }
    },
    "include": ["src/**/*"]
  }
  

• 若使用create-react-app搭建的项目，还需要添加public目录映射：

  搜索 path-intellisense.mappings 配置项，添加映射规则："public": "${workspaceFolder}/public"

• 配置完成后重启VSCode即可生效

内容的提问来源于stack exchange，提问作者Vinicius Bortoletto