VSCode中Code Runner无法在Chrome加载HTML页面的原因排查

我的配置与代码 #

settings.json配置 #

{
    "code-runner.executorMap": {
        "html": " cd $dir && start chrome $fileName",
        "javascript": "node",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "php": "php",
        "python": "python -u",
        "perl": "perl",
        "perl6": "perl6",
        "ruby": "ruby",
        "go": "go run",
        "lua": "lua",
        "groovy": "groovy",
        "powershell": "powershell -ExecutionPolicy ByPass -File",
        "bat": "cmd /c",
        "shellscript": "bash",
        "scheme": "csi -script",
        "ahk": "autohotkey",
        "autoit": "autoit3",
        "dart": "dart",
        "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
        "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
        "haskell": "runhaskell",
        "nim": "nim compile --verbosity:0 --hints:off --run",
        "lisp": "sbcl --script",
        "kit": "kitc --run",
        "v": "v run",
        "sass": "sass --style expanded",
        "scss": "scss --style expanded",
        "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
        "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "sml": "cd $dir && sml $fileName"
    }
}

HTML代码（已保存为woof.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Yo</h1>
</body>
</html>

问题 #

按照视频教程配置后，运行该HTML文件时Chrome打开错误页面，无法正常加载页面内容。

解决方法 #

问题根源在Code Runner的HTML执行命令上，当前命令有两处问题：

1. cd $dir前多了一个空格，可能导致命令执行路径异常
2. 直接传入$fileName给Chrome，若文件路径包含空格，Chrome无法正确解析，需要用引号包裹路径

修改settings.json中的HTML执行命令为以下任一形式：

• 修正空格并包裹文件名：

"html": "cd $dir && start chrome \"$fileName\""

• 直接使用文件绝对路径（更稳妥）：

"html": "start chrome \"$fullPath\""

修改完成后重启VSCode，再次运行HTML文件即可正常加载。

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