【JavaScript】Visual studio code と Live Server で開発環境をつくる

以前 Atom を使ってリアルタイムでコードの結果を確認する方法を書きましたが，ここからはもう一つのエディタである Visual studio code を使っていきたいと思います。どちらがいいか，というのは好みの問題ですが，個人的には VS code のほうがプログラミング以外でも原稿を書くのに使ってきたこともあって，今後は VS code を使っていこうと思います。

Live server で結果を確認する

Live server は VS code の拡張機能で，エディタ上で書いたコードの結果を即座に確認するのに便利です。詳しいことは省略しますが，VS code をインストールしたあと，拡張機能(またはCtrl+Shift+X)から Live server を検索し，インストールします。そのあと，エディタの画面の下に Go Live というボタンが出てきます。それを押すと，ブラウザが起動してコードの結果を確認できます。

一般的には，VS code とブラウザの画面を左右に並べておきます。あとはコードを書いてCtrl+Sで保存をするとブラウザの表示も変わる，という感じです。

また，Live server を使うにあたり，デスクトップなどにフォルダーを作り，その中に html 形式のファイルを置くようにします。そして，「ファイル(F)→フォルダーをワークスペースに追加」からそのフォルダーを指定するのを忘れずに。今は html 一つだけで話を進めていますが，例えばホームページなどのサービスを作るときには多くのファイルを使うことになるので，それらを格納するために必要になるものです。

Live server を使うことによって，今後できることがいろいろと増えてきます。これからの話は当面，VS code と Live server を使うことを前提に進めていこうと思います。