ドローイング空間

3D-CADを中心に、雑多なことをかいています。

Visual Studio Codeでhtmlのプレビューを表示する

広告

Visual Studio Code拡張機能は、Marketplaceで探す事ができます。

f:id:kukekko:20161029235030p:plain

https://marketplace.visualstudio.com/

そこで、htmlのプレビューを表示する拡張機能を見つけました。

 

Live HTML Previewer

Visual Studio Codeで、htmlのプレビューを見るための拡張機能です。JavaScriptには、対応していません。

f:id:kukekko:20161029235048p:plain

https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer

インストール

Visual Studio Codeを起動して、右側の拡張機能アイコンをクリックします。

f:id:kukekko:20161029235103p:plain

検索窓に名前を入力すると関連する拡張機能が一覧で示されます。「Live HTML Previewer」のインストールボタンをクリックします。

f:id:kukekko:20161029235119p:plain

有効をクリックします。

f:id:kukekko:20161029235129p:plain

OKをクリックします。

f:id:kukekko:20161029235138p:plain

使ってみる

htmlファイルを開きます。

横にプレビューを表示する

IME(日本語入力)をoffにした状態で[Ctrl]+[q]続いて[s]をクリックします。(Ctrl+Q、続いて、Ctrlを離して、sです。

cssが反映された状態で、プレビューが表示されます。メディアクエリーも反映されます。

f:id:kukekko:20161029235709g:plain

さらに、cssアニメーションも反映されています。

f:id:kukekko:20161029235842g:plain

動作はぎこちないですが、htmlの編集内容がプレビューに反映されます。逆にプレビューを編集して、htmlを変更することはできません。

f:id:kukekko:20161029235908g:plain

操作まとめ

横にプレビューを表示する

[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」を選択します。

f:id:kukekko:20161030000017p:plain

類似した拡張機能

HTML Preview

f:id:kukekko:20161030000027p:plain

https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode

こちらは、動作を確認していません。

まとめ

JavaScriptの動作を確認しなくていい場合、この「Live HTML Previewer」は、htmlで入力した内容を確認する際、かなり便利です。

「electron」フレームワークを使用したエディタ、いわゆる「Atom」系エディタの中では、 「Visual Studio Code」の拡張機能はかなり少なかったのですが、増えてきています。 探してみると、あなたが、必要と考えていた拡張機能が見つかるかもしれません。