Visual Studio Codeの便利な拡張機能をメモしておきます。
目次
Visual Studio Codeとは
まずは、簡単なおさらいから。
Visual Studio Codeとは、Microsoftが開発しているWindows、Linux、macOS用のソースコードエディタです。Microsoftが開発している為か、Visual Studio Code利用者はWindows使いが多いような気がするのですが、Windowsの他、Linux、macOSでも利用することができるソースコードエディタです。
Visual Studio Codeの魅力はコード補完やGitコントロールなどの基本的な機能以外に、便利な拡張機能やテーマやショートカットのカスタマイズ性が高いといった特徴を持っています。
2019年には「Stack Overflow 2019 Developer Survey」の最も人気のある開発者環境ツールとしてランクインしたこともある開発者に人気のソースコードエディタです。
Visual Studio Codeの基本的なご紹介は、このあたりして、さっそくVisual Studio Codeの便利な拡張機能をご紹介していきます。
拡張機能 Live Server
Live Server、名前の通りの機能なのですが、Live Serverは、フロントエンドの開発では欠かすことができない開発したコードをブラウザ上で確認する作業を効率化してくれるツールです。
これまでは、開発したコードを保存し、ブラウザをアクティブにし再読み込みするか、開発したファイルをブラウザ上にドラッグ＆ドロップをする等の作業を経て、開発したコードの出来具合を一日に何度も何度も繰り返すといった作業をしなければならなかったのですが、Live Serverでは、コードに変更があったら自動的にブラウザをリロードしてくれるライブラリロード環境を実現することができます。
では、さっそくLive Serverをインストールしてみましょう。
Live Serverをインストールする
まず、Visual Studio Codeを起動し、「Ctrl＋Shft＋X」または左側にある拡張機能ボタンをクリックします。
以下の画面が表示されたら、検索ボックスの中に”live server”を入力します。画像キャプチャした時点のLive Serverは、5.6.1となっています。さっそく”インストール”ボタンをクリックして、Visual Studio Codeの拡張機能である”Live Server”をインストールします。
Live Serverをインストールが完了するまで、じっと我慢します。
Live Serverのインストールが完了しました。
Live Serverの使い方
Live Serverの使い方はいたって簡単。ウインドウ右下の”Go Live”と書かれているボタンをクリックするだけです。ただそれだけ。簡単すぎです。
因みに、Live Server起動後は、書いていたコードを保存すると自動的にブラウザがリロードされ最新のコードの状態をブラウザで確認することができます。
もし、モニターが2枚ある環境であれば、メインのモニターにVisual Studio Codeを表示させ、コードをガリガリと書きつつ、2枚目のモニターでブラウザを表示させておき、書いたコードを即座に確認するといったより作業効率の良い環境をつくることができます。
Live Serverの注意点
ここで、一点だけ注意しておかなければならないことがあります。Live Serverを使う際に、Visual Studio Codeでは、ファイルではなくフォルダを開くようにしてください。
Visual Studio Codeから直接ファイルを開いてしまうと、Live Serverを使うことができませんので、注意が必要です。
Live Serverにhttpsを設定する
ブラウザの仕様変更によって、”https”での接続でなければアラートが表示されてしまう世の中になってしまいましたので、つい、”https”での接続が当たり前のように感じてしまう今日この頃ですが、Visual Studio Code Live ServerのDefaultの設定は、”http”になっていますので、”https”でなければ動作しないようなアプリの開発を行う場合には、Live Serverの設定を”https”に変更する必要があります。
個人的には、”https”がDefaltな世の中ですので、環境をつくる際に”https”の設定を行っています。
画面左の「拡張機能」ボタン、Live Serverの”歯車”、”拡張機能の設定”の順にクリックします。
画像が少し見にくいのですが、ウインドウを下に進めていくと「Live Server > Setting Https」がでてきますので、”enable”を”true”に変更し、OKボタンをクリックします。
以上で、Visual Code Studioのライブリロード環境 Live Serverのインストールから基本的なセットアップが完了しました。あとは、ウインドウを２つ立ち上げて、コードを書きながら目線を横に移動するだけで、ブラウザ上の状態を確認することができます。
お疲れ様でした。
今日も一日頑張りましょう！
Have a great day!
