【VS Code】Microsoft公式のHTMLプレビュー機能が便利すぎる件

VS Codeの拡張機能live previewの開発者ツールの画面サンプル

私はWEB系のプログラマではないのですが、趣味で少しJavaScriptを触る機会があり、その折に見つけたLive PreviewというHTMLプレビュー機能が非常に便利だったので今回ご紹介したいと思います。

Live Previewのここが良い

  1. VS Codeのウィンドウ内でHTMLのプレビューが可能
    →ブラウザを別ウィンドウで開く必要がない!
  2. 開発者ツールもVS Code内で使用可能
    →開発者ツールを別ウィンドウで開く必要がない!
  3. WEBサーバの環境を自動で用意してくれる
    →ローカルファイルが原因のエラーが起きにくい!
  4. Microsoft公式
    →会社での利用申請が通りやすい!(会社によるかも)
  5. 機能がシンプルで分かりやすい
    →分かりやすい!

※個人的には”〜blocked by CORS policy”とかのエラーでどハマりしたので3つ目がとても嬉しいです。

Live Previewの使い方

1.インストール

インストールは他の拡張機能と同じでとても簡単です。

VS Codeの拡張機能で”live preview”と検索するとLive Previewがトップに出てくるはずなので、
後はインストールをクリックするだけです。

VS Codeの拡張機能live previewのインストール

2.プレビューを表示する

Live Previewをインストールすると、HTMLファイルを開いた際に右上にプレビューボタンが表示されるようになります。

プレビュー表示を行いたい場合は、このボタンをクリックします。

VS Codeの拡張機能live previewのプレビュー画面を開く方法
※キーボードショートカットはまだ割り当てられていない模様

クリックすると、以下のようなプレビュー画面がVS Code内に表示されます。

VS Codeの拡張機能live previewのプレビュー画面のサンプル

後述の設定でも出てきますが、ファイルを更新するとプレビュー画面も自動的に更新されます。

3.(ブラウザの)開発者ツールを使用する

開発者ツールを開く場合は、プレビュー画面右上のボタンにある”Open DevTools Pane”をクリックします。

VS Codeの拡張機能live previewでdevtoolsを開く方法

“Open DevTools Pane”をクリックすると、以下のようにVS Code内に開発者ツールを開くことができます。

VS Codeの拡張機能live previewの開発者ツールの画面サンプル

おまけ

おすすめの設定

シンプルなプレビュー機能なのでデフォルト設定でも特に問題はないのですが、個人的に更新間隔は変えておいた方が良いと思います。
(まあ趣味レベルの問題ですが)

と言うのも、デフォルトだとファイルを編集するたびにプレビューが更新されて、少し五月蝿いのです。

以下の通り設定することでプレビュー更新間隔をファイル保存毎にできます。

設定名“livePreview.autoRefreshPreview”
デフォルト値“On All Changes in Editor”
おすすめの設定値“On Changes to Saved Files”

上記以外はローカルで普通に使う分には特に気になる設定はありませんでした。

設定の一覧は、拡張機能の「機能のコントリビューション」タブから見ることができるので興味がある方はそちらからどうぞ。

VS Codeの拡張機能live previewの設定・コマンド一覧を参照する方法

注意点

①開発中の拡張機能である点
この記事を書いている時点では、バージョンv0.2.11で、プレビューのバッジがついています。
機能の説明欄にもWARNING: this extension is still under development!と思いっきり記載されているので、プレビュー版なんだと割り切って利用した方が精神衛生上良いかと思います。


②iframeがsandbox化が働く点
Live Preview
のプレビュー画面はiframeとして実装されているため、iframeのsandbox属性による制約が発生します。

確認したところ、Live Previewで生成されるiframeのsandbox属性には以下が指定されていました。

sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock allow-downloads"


例えば、allert()を使用する場合はallow-modalsの指定が必要ですが、上記の通り、指定されていないので、以下のようなエラーが出ます。

Ignored call to 'alert()'. The document is sandboxed, and the 'allow-modals' keyword is not set.

解消方法が見つからなかったので、こういった場合はブラウザを使うしかないのだと思います。

参考

Live Preview拡張機能の公式ページ
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

iframeの属性について
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe

コメント

タイトルとURLをコピーしました