Visual Studio Codeでhtmlのプレビューを表示する
広告
Visual Studio Codeの拡張機能は、Marketplaceで探す事ができます。
https://marketplace.visualstudio.com/
そこで、htmlのプレビューを表示する拡張機能を見つけました。
Live HTML Previewer
Visual Studio Codeで、htmlのプレビューを見るための拡張機能です。JavaScriptには、対応していません。
https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer
インストール
Visual Studio Codeを起動して、右側の拡張機能アイコンをクリックします。
検索窓に名前を入力すると関連する拡張機能が一覧で示されます。「Live HTML Previewer」のインストールボタンをクリックします。
有効をクリックします。
OKをクリックします。
使ってみる
htmlファイルを開きます。
横にプレビューを表示する
IME(日本語入力)をoffにした状態で[Ctrl]+[q]続いて[s]をクリックします。(Ctrl+Q、続いて、Ctrlを離して、sです。)
cssが反映された状態で、プレビューが表示されます。メディアクエリーも反映されます。
さらに、cssアニメーションも反映されています。
動作はぎこちないですが、htmlの編集内容がプレビューに反映されます。逆にプレビューを編集して、htmlを変更することはできません。
操作まとめ
横にプレビューを表示する
[Ctrl]+[ q], 続いて、[s]、あるいは、[F1]をクリックし、「Show side preview」とタイプする
Visual Studio Codeのウィンドウ枠全体にプレビューを表示する
[Ctrl]+[ q], 続いて、[f]、あるいは、[F1]をクリックし、「Show wide preview」とタイプする
ブラウザで開く
[Ctrl]+[ q], 続いて、[w]、あるいは、[F1]をクリックし、「Open in browser」とタイプする。
あるいは、右クリックして、コンテキストメニューを表示し、「Open in browser」を選択します。
類似した拡張機能
HTML Preview
https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode
こちらは、動作を確認していません。
まとめ
JavaScriptの動作を確認しなくていい場合、この「Live HTML Previewer」は、htmlで入力した内容を確認する際、かなり便利です。
「electron」フレームワークを使用したエディタ、いわゆる「Atom」系エディタの中では、 「Visual Studio Code」の拡張機能はかなり少なかったのですが、増えてきています。 探してみると、あなたが、必要と考えていた拡張機能が見つかるかもしれません。