ボタン1つでローカルサーバを立てる【Visual Studio Code】

スポンサーリンク
プログラミング

悩む人
悩む人

ローカルサーバってどうやって立てるんだろう

簡単に立てる方法ないの?

こういったお悩みを解決いたします。

Visual Studio Code というエディタで、簡単にローカルサーバを起動できる方法をお教えします。

とても使いやすいエディタで拡張機能も豊富なので、ぜひ今後の使用をご検討してみてはいかがでしょうか。

インストールはこちら ⇒ https://azure.microsoft.com/ja-jp/products/visual-studio-code/

当記事ではHTMLファイルをサンプルとして扱います。

当記事を読むと、

  • VSCodeでローカルサーバを立てられるようになる
スポンサーリンク

拡張機能 “Live Server”

早速ですが、ボタン1つでローカルサーバを起動してくれるVSCodeの拡張機能 “Live Server“の導入~使い方まで解説いたします。

導入

まず、VSCodeを開くとこんな画面が表示されます。(おそらく若干異なりますが)

矢印で示した、四角が4つあるアイコンをクリックしてください。

左側に新しいタブが出現したと思います。

このタブで様々な拡張機能を検索し、自分が欲しいものをインストールできるわけです。

この後の流れはなんとなく分かるかと思いますが、検索ボックスに”Live Server”と入力すると、

これの一番上に出てきたものを選択しましょう。

すると、この拡張機能にによってできることや使い方の説明をしているタブが表示されます。

その中にあるInstallというボタンをクリックするとインストールが始まります。

ある程度経つと、右下に”Go Live”という文字が出てきます。

これでインストールが完了し、”Live Server”の機能が使えるようになりました。

使い方

使い方は非常に簡単です。

HTMLファイルを例として扱いますが、サーバとの通信を想定しているHTMLファイルを開き、そこで”Go Live”をクリックするだけです。

私の場合、このHTMLを開いたまま、ファイル”Go Live”をクリックすると、

自動でブラウザが開き、コンテンツが表示されたはずです。

これでローカルサーバの起動は完了です。

Live Serverの良い点として、ファイルを上書き保存すると自動でブラウザのページもリロードしてくれるところが挙げられます。

Webページを作る際なんかは、微調整が何度も何度も必要になってきますよね。

そんな時でも、いちいちリロードすることなくソースコードを更新するだけで、自動かつリアルタイムで反映してくれるのでとても便利です。

Live Serverについて、各種設定をカスタマイズしたいという方は以下の記事を参考にしてみてください。

VSCode拡張機能Live Server設定内容まとめ|Jyu2ログ
先日紹介したVSCodeの拡張機能の各設定内容をまとめました。 とはいっても自分のPCをサーバーにして、ブラウザでプレビ

各設定に対して非常に丁寧な説明が施されており、とても参考になる記事だと思います。

スポンサーリンク

まとめ

いかがでしたでしょうか。

ぜひLive Serverを使用して快適な開発生活を楽しみましょう。

もちろんLive Server以外にも便利な拡張機能はあります。

いろいろと調べてエディタを自分好みにカスタマイズしてみてください。

以上です。

コメント

タイトルとURLをコピーしました