【初心者向け】VSCodeでhtmlを実行しようとしたらabout:blankと表示されるようになった

はじめに

VSCodeを使ってhtmlの勉強をしている際に急にabout:blankと表示されて実行ができなくたったので、対応方法をまとめておきます。

エラー内容

以下の画像の通り、htmlファイルを実行しようとするとabout:blankと表示されるようになった。

結論と対応方法

原因

cssまたはJavaScriptのファイルをf5キーで実行してしまい、launch.jsonというファイルが作成されていしまったことが原因でした。launch.jsonはファイルを実行する際の実行方法を記述するファイルです。

対策

対策方法１：launch.jsonを削除する
対策方法２：launch.jsonを以下の通り編集する

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome with active file",
            "file": "${file}",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

現在開いているファイルをGoogle Chromeで開くという設定をしています。これまではf5キーを押してファイルを実行するたびにブラウザの選択をする必要がありましたが、launch.jsonで使用するブラウザを指定することにより手間が省けるようになりました。