VSCodeのLive HTML Previewerの代替拡張機能 Live Server vs Live Server Preview
ブログ記事をHTMLで書くのにVisual Studio Code(以下VSCode)を使っています。
このVSCodeの拡張機能(Extention)にLive HTML Previewerと云うのがあって、HTMLでソースを書いていくと、分割画面にブラウザでの表示が同時に表示されていきます。
その画面を見ながら書いていくと、CSSで装飾された部分等も反映されてるかどうかが瞬時に判って、本当に便利です。
ところが、過去記事のVSCodeのLive HTML Previewer が使えなくなってロールバックしたら、自動でアップデートしてしまう話 とかでも書いたように、Live HTML Previewerを使う為にはVSCodeのアップデートを諦めなければならない羽目になっていました。
それでは、VSCodeのアップデートから永遠に置いてけぼりになり、それはそれで怖いことになります。
で、Live HTML Previewerのアップデートとか、代替拡張機能がないかとあれこれネットを漁ってまして、Live Server Preview が使えるとか云う記事を見かけるのですが、インストールしても旨くいきません。
色々検索中に、Extensions for the Visual Studio family of products と云う、VSCodeの拡張機能の本家本元のページを見つけました。
ここでLive Server Previewを探して、たまたまその記事のRating & Review と云うタブを開くと
TIP: to get it to update like the author does, you must enable Auto Save!
と云う投稿があります。
なんとオートセーブ(自動保存)を有効にせよ!と(気づかなかった)
最近のグーグル翻訳は本当に便利になりました。
これで解決です。
ただ、プレビュー画面の画像にマウスを持っていっても、画像のURLが表示されないのがちょっと不便かも。
他に、 Live Server という拡張機能でも、自動更新を有効にしていれば使用できます。こちらはWindowsで設定した規定のブラウザが開きます。
ただしChromeでないと旨くいきません。Firefoxでは、ソースを書換える度にブラウザ側の表示位置がコロコロ変わってしまいます。最近のFirefoxはページ内での表示位置が、とあるタイミングの時色々変になるのと関係があるのかも。
こちらはブラウザが開くので、元々のブラウザの機能である、画像上でマウスオーバーするとブラウザ下に画像のURLが表示されます。
このちょっとした事がなにげに便利だったりする。
でもFirefox 応援隊としては、悔しいので、Live Server Preview を、当分は使っていこうかと。