こんにちは、プロクラスの國府です
今回は、VS Codeのおすすめのプラグインを紹介したいと思います
コーダーの方なら、すでに使っているかもしれませんが、「Live Server」
というプラグインです。
HTMLやCSSファイルを更新した場合、通常はブラウザの更新ボタンを
手動で押して変更を確認する必要がありますが、Live Serverを
使うことでこの作業を自動化してくれる便利なプラグインです。
Live Serverをインストールした後では、たった一つのボタンを押すだけで
自動化されたローカルホスト上のweb serverを起動し、ブラウザ上で
動作させることができます
Live Serverは、コードを変更して保存すると、ブラウザを自動的に更新し
素早く変更した内容を確認することができます
VS Code をインストール
VS Codeの公式サイト（https://code.visualstudio.com/)より
ダウンロードすることができます
ダウンロードが完了したら、「VSCode-darwin-universal.zip」を
ダブルクリックしてZIPファイルを展開してください
展開後の「Visual Studio Code.app」を「アプリケーション」に
ドラッグアンドドロップします
また、「Visual Studio Code」をよく使う場合は、Dockバーに
入れておくと便利です
VS Codeの拡張機能「Live Server」をインストールする
上の画像より
①「拡張機能」ボタンをクリック
②検索ボックスに、「Live Server」と入力する
③「Live Server (Ritwick Dey)」の「Install」ボタンをクリック
これで、拡張機能「Live Server」をインストールすることができます
VS Codeを再起動します
適当な、HTMLやCSSを作ります
上の画像の赤枠の「Go Live」をクリックします。
OSで設定されているデフォルトのブラウザが起動し、
作成したHTMLやCSSのWebページが表示されます。
HTMLやCSSを更新すると、自動的にブラウザのWebページが更新されます。
以上で「Live Server」の使い方は終了です