【VS Code】拡張機能 LiveServer を使ってコーディングスピードを爆上げ

今回は、VS Code（Visual Studio Code　〜ビジュアルスタジオコード〜）の拡張機能、LiveServerについての記事です。
このLiveServerを使うと、コーディングのスピードがとても早くなります。

さっそく機能内容、インストール方法、使い方を簡単にご紹介します。

Visual Studio Code実践ガイド -- 最新コードエディタを使い倒すテクニック [ 森下篤 ] 価格：3058円（税込、送料無料) (2021/11/17時点) 楽天で購入

LiveServerとは

LiveServerとは、簡易的なローカルサーバーをたちあげて、
HTMLやCSSの修正内容を自動でリロードし、その反映結果が即座に確認できる機能です。

人によっては、

コードを修正→ブラウザーをリロード→確認

もしくは、

デヴェロッパーツールで変更確認→コード修正

という方もいらっしゃるかと思います。

しかしLiveServerを使うと、
コード修正とブラウザーのリロードが同時にできるので、
コーディングスピードが格段に速くなります。

インストール方法

1 拡張機能検索

まず、VSCodeを立ち上げます。

拡張機能をクリック、「live」とだけ入力すれば、おそらくトップに出てくるはずです。

2 インストール

インストールボタンを押してインストールしましょう。

使い方

インストールできたら、HTMLファイルを開いてください。

そして、画面右下に、「Go Live」という項目がありますので、それをクリックしてください。

すると、ブラウザーが立ち上がり、コード結果が表示されます。

そして、HTMLファイルやCSSファイルを変更するたびに、自動でブラウザーがリロードされ、表示結果を即時に更新できます。

まとめ

インストール、「Go Live」をクリック、これだけです。

変更や修正を即座に確認できる、とても便利ですね。

みなさんも是非使ってみてください。