VS Code配置浏览器JS绝对路径导入自动补全异常问题

要让VS Code自动生成带开头斜杠的绝对路径导入，同时保留类型绑定，需要调整jsconfig.json的路径映射配置，具体步骤如下：

1. 更新jsconfig.json配置 #

在原有配置基础上添加paths字段，将浏览器端需要的带斜杠绝对路径，映射到本地项目的实际目录结构，确保VS Code能识别这些路径对应的文件位置：

{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": "./app/",
    "paths": {
      "/common/*": ["common/*"],
      "/utils/*": ["utils/*"]
      // 根据你的项目目录，添加所有需要的根路径映射
    }
  },
  "include": ["app/**/*"]
}

• paths配置的作用是告诉VS Code：所有以/common/开头的导入路径，实际对应baseUrl下的common/目录
• include字段确保项目中所有JS文件都被纳入VS Code的类型分析范围

2. 保留VS Code导入偏好设置 #

你的settings.json配置无需修改，继续保留即可：

{
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifierEnding": "js"
}

3. 验证效果 #

完成配置后，当你输入import { createWorkletProcessor }时，VS Code会自动补全为：

import { createWorkletProcessor } from "/common/create-worklet-processor.js";

此时既满足浏览器的模块解析要求（带开头斜杠的绝对路径），又能保留VS Code的自动补全和类型绑定功能。

问题根源说明 #

• 浏览器遵循Web标准，模块导入路径必须是相对路径（.//../）或绝对路径（/开头），不支持不带前缀的非相对路径
• 原配置仅设置baseUrl，VS Code生成的非相对路径不带斜杠，导致浏览器报错；手动添加斜杠后，VS Code无法识别路径对应关系，丢失类型绑定
• 通过paths映射，让VS Code将带斜杠的绝对路径与本地文件关联，同时满足浏览器和编辑器的双重需求

内容的提问来源于stack exchange，提问作者Nick Muhonen