VSCode编写JavaScript时导入语句无法识别css、图片等非脚本文件如何解决

方案1：修改配置文件（无需安装扩展） #

你可以通过修改VSCode和项目配置解决该问题，步骤如下：

• 打开VSCode用户配置文件settings.json
  • 快捷键：Windows/Linux 按 Ctrl + Shift + P，Mac 按 Cmd + Shift + P
  • 输入「Preferences: Open Settings (JSON)」回车进入配置文件
• 添加以下配置项：

// 开启JS/TS路径提示
"javascript.suggest.paths": true,
"typescript.suggest.paths": true,
// 允许导入时自动补全文件后缀
"javascript.preferences.importModuleSpecifierEnding": "auto",
"typescript.preferences.importModuleSpecifierEnding": "auto"

• 如果项目根目录存在jsconfig.json（JS项目）或tsconfig.json（TS项目），添加以下配置到compilerOptions节点下：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
    // 如果用了路径别名也需要在这里配置paths，比如：
    // "paths": { "@/*": ["./src/*"] }
  }
}

修改后重启VSCode即可生效，css、图片、svg等资源文件就会出现在路径补全候选列表里。

方案2：安装路径补全扩展（更省心） #

直接在VSCode扩展商店搜索安装 Path Intellisense 扩展，安装后默认支持绝大多数常用资源格式的路径补全，无需额外配置即可解决问题。如果有自定义后缀需要识别，可以在settings.json中添加以下配置自定义支持的后缀：

"path-autocomplete.fileExtensions": [
  ".css", ".scss", ".module.css",
  ".png", ".jpg", ".svg", ".webp"
  // 可按需添加其他后缀
]

内容的提问来源于stack exchange，提问作者Gustavo Lopes