VSCodeで編集をしている時に「エディター上でブラウザ表示プレビューを見れたら便利だな」と思うこともあるかと思います。そのような時に便利な拡張機能が「Live Preview」です。
![](https://eguweb.jp/wp-content/uploads/202203162329-00-1024x602.jpg)
「Live Preview」とは?
「Live Preview」はVisual Studio Code の拡張機能のひとつで、エディター画面内でブラウザ表示を確認することができる便利な拡張機能です。
![](https://eguweb.jp/wp-content/uploads/202203162345-00.jpg)
「Live Preview」インストール方法
まずは「拡張機能」ページを開きます。
![](https://eguweb.jp/wp-content/uploads/202203162344-00.jpg)
「Live Preview」と検索すると、拡張機能が検索結果に表示されます。
[rml_read_more]
![](https://eguweb.jp/wp-content/uploads/202203162344-01.jpg)
あとは「インストール」を押すだけで拡張機能がインストールされます。
「Live Preview」の使い方
エディターの右上に、虫眼鏡アイコンが付いたアイコンが表示されているのでクリックします。
![](https://eguweb.jp/wp-content/uploads/202203162345-01.jpg)
そうすると、VSCode上にブラウザが表示されます!
![](https://eguweb.jp/wp-content/uploads/202203162345-02.jpg)
![](https://eguweb.jp/wp-content/uploads/202203162346-00.jpg)
下の段に移動させることも可能です!
![](https://eguweb.jp/wp-content/uploads/202203162346-01-1024x661.jpg)
まとめ
この拡張機能「Live Preview」でVSCodeがますます便利になります!
ご参考ください😃