VS Code配置launch.json打开HTML到Edge时${relativeFile}未解析如何解决

你遇到的变量未解析问题可以通过以下两种方法解决： #

方法1：使用Edge Tools扩展内置命令变量 #

该扩展提供了专门的内置命令来获取当前激活文件的相对路径，兼容性优于VS Code通用的${relativeFile}变量，修改launch.json配置如下：

{
"configurations": [
    {
        "name": "Launch Microsoft Edge and open the Edge DevTools",
        "request": "launch",
        "type": "vscode-edge-devtools.debug",
        "webRoot": "${workspaceFolder}",
        "url": "http://localhost/${command:extension.vscode-edge-devtools.getActiveEditorRelativePath}"
    }
  ]
}

方法2：使用原生Edge调试类型 #

VS Code原生支持的Edge调试类型对通用变量的解析支持更完善，不需要依赖扩展的专属命令，修改配置如下：

{
"configurations": [
    {
        "name": "Launch Microsoft Edge and open the Edge DevTools",
        "request": "launch",
        "type": "pwa-msedge",
        "webRoot": "${workspaceFolder}",
        "url": "http://localhost/${relativeFile}"
    }
  ]
}

该配置仍可正常联动你已安装的「Microsoft Edge Tools for VS Code」扩展的DevTools功能，不会影响调试体验。 #

注意事项 #

• 启动调试前请确保需要调试的HTML文件是当前VS Code的激活标签页，否则会读取到错误的文件路径
• 请确认本地Web服务已正常启动，如果你使用的Web服务端口不是默认的80，需要在url中补充端口，例如http://localhost:8080/${relativeFile}

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