使用VS Code运行HTML文件时出现连接失败及配置异常问题

1. 重置默认运行配置 #

打开VS Code的「运行和调试」面板（Ctrl+Shift+D），检查顶部的运行配置下拉框是否选中了错误选项（比如你launch.json里的"Launch Chrome"）。如果是静态HTML项目，切换到直接打开本地文件的方式，或是安装Live Server插件后用插件启动页面。

2. 修改launch.json配置 #

你当前的"Launch Chrome"配置是针对localhost:8080服务的，但静态HTML无需启动服务，改成直接打开本地文件的配置即可：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome on Local File",
            "request": "launch",
            "type": "chrome",
            "file": "${file}" // 打开当前编辑的HTML文件
        }
    ]
}

如果不需要Node相关配置，直接删掉"Run npm start"和"Attach to Chrome"项，避免干扰。

3. 删除错误任务配置 #

检查项目根目录的.vscode文件夹里是否有tasks.json文件，若存在，里面可能有因误操作生成的错误任务（比如关联CSS文件打开JSON），直接删除整个tasks.json或清空其内容。

4. 用Live Server快速运行静态页面 #

静态HTML项目最省心的方式是安装「Live Server」插件：

• 安装完成后，右键点击HTML文件，选择「Open with Live Server」
• 插件会自动启动本地服务并在浏览器打开页面，不会出现localhost连接失败问题

5. 清除工作区配置 #

如果上述方法无效，直接删除项目根目录下的.vscode文件夹（存储着项目级的运行和任务配置），重新打开项目后，VS Code会恢复默认运行行为。

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