VSCode「Visual Studio Code」はMicrosoftが開発している高機能コードエディターで、無料で利用することができます。この記事では拡張機能Live Serverを入れてHMTLをブラウザでプレビューする方法を確認します。
HTMLをブラウザでプレビューしたい
Live Serverを使うと
Live Server はコードを保存すると、自動でブラウザでプレビュー表示することができます。VSCode とブラウザを並べて使うことで、より効果が高くなります。
Live Server をインストール
① 拡張機能
② 検索欄で live server を検索
③ Live Server を選択
④ インストールします。
これでインストール完了です。
Live Server の使い方
画面右下にある Go Live をクリックすることで起動できます。
起動するとブラウザが立ち上がりプレビューが表示されます。
相性がいいショートカット
- 「command」+「s」→ファイルを保存
- 「command」+「option」+「s」→すべてのファイルを保存
- 「command」+「tab」→ウィンドウを切り替える
- 「space」→ブラウザを下スクロール
- 「shift」+「space」→ブラウザを上スクロール
以上VSCode HTML をブラウザでプレビュー表示する方法 でした。
