VS Codeで超素早くHTMLをテストする方法

VS Code(Visual Studio Code)で簡単なHTMLやCSSを書いて見た目を確認するときのテクニックを紹介します。

まず、起動して新規ファイルを作成します(起動したら新規ファイルにする設定もありますが、さしあたりctrl+Nで新規作成が可能です。macOSは+N)。

右下のプレーンテキストをクリックし、HTMLに変更します。

ここでHTMLと入力するとさらに素早く絞り込める
ここでHTMLと入力するとさらに素早く絞り込める

言語モードをHTMLに切り替えたら、あとは簡単。htmlと入力し、コードスニペットからhtml:5を選択するだけです。

そうすると以下のようにババッとコードスニペットが入ります。lang="en"となっていますが、軽くテストする程度なら変更する必要もないでしょう。

基本的なHTMLタグも手打ちするよりスニペットを使った方が圧倒的に早いです。

ctrl+Shift+P(macOSは+Shift+P)を押してコマンドパレットを開き、preと入力することでHTMLのサイドプレビューが可能です。