こんにちは。はけです。
普段はシステムエンジニアで、主にWEB系のシステムを開発しています。
最近Visual Studio Codeが開発用エディタとして人気が出てきています。
理由はとても軽量で、あらゆる便利な機能を使用できる点です。
そんなVisual Studio CodeでWEB開発をしていると、
- Visual Studio Codeでホームページを作るための便利なツールが知りたい！
- HTMLを書きながら実際のページを見たい！
と感じる方も多い のではないでしょうか。
今回はそんな方向けに、実際のWEBページを見ながらコーディングができるVisual Studio Codeのツールを紹介します。
ツールの名前は「HTML Preview」です。
これを使用することでHTMLのコーディングがとても早く正確にこなせるようになります。
使い方もとても簡単なので、是非試してみてくださいね！
目次
Visual Studio CodeでリアルタイムにプレビューしながらHTMLを編集する方法
では、「HTML Preview」の使用方法を紹介していきます。
実行環境
今回の操作を行った実行環境は次になります。
- Windows10
- Visual Studio Code 1.51.1
- HTML Preview 0.2.5
HTMLプレビューをインストールする
まずはHTML Previewのプラグインをインストールします。
- 「拡張機能タブ」を開きます。
- 検索窓に「HTML Preview」を入力します。
- 発行者名が「Thomas Haakon Townsend」の「HTML Preview」をインストールします。「インストール」ボタンを押してください。
なお、発行者名が異なる「HTML Preview」がありますが、「Thomas Haakon Townsend」のものを選択しました。
これでHTML Previewプラグインのインストールが完了です！
HTMLファイルを作成する
次にVisual Studio Code上でHTMLファイルを作成してみましょう。
手順は次のようになります。
- エクスプローラタブを開く
- ファイル→新規ファイルで、新規にファイルを作成する
- ファイルを保存する
エクスプローラタブを開く
エクスプローラタブを開きます。
ファイル→新規ファイルで、新規にファイルを作成する
ファイル→新規ファイルで、新規にファイルを作成します。
新規にファイルが作成できます。
ファイルを保存する
次のコードを作成したファイルに貼り付け、「Ctrl + s」で保存します。
ファイル名は「test.html」としました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
</head>
<body>
TEST
</body>
</html>
プレビューコマンドを打つ(プレビューを表示する)
ではさっそく、HTMLをプレビュー表示しましょう。
「Ctrl + K」を押したあとに「v」を押してください。
(Macでは 「cmd + k、 v」となります)
すると編集中のファイルの右側にHTMLをWEBブラウザで見たときの内容が表示されます。
この状態で、HTMLを編集すると右側の表示もリアルタイムに変わります。
このようにコードを編集しながら実際のページを確認することができます。
これにより、もし間違っていてもすぐに確認して修正することができ、正確に素早くコーディングすることができます。
プレビューを閉じる
最後に、プレビューの閉じ方を紹介しておきます。
次の手順になります。
- プレビュー(画面右側)を選択する
- 「Ctrl + K 」を押した後に「u」を押してください。
プレビューを閉じることができます。
まとめ
今回は、Visual Studio CodeでリアルタイムにプレビューしながらHTMLを編集する方法を紹介しました。
プラグインツールとして「HTML Preview」を使用し、インストール方法/使用方法を紹介しました。
本当に簡単にHTMLコーディングを飛躍的に快適にしてくれるので、ぜひ皆さんも試してみてください！！