![見出し画像](https://assets.st-note.com/production/uploads/images/147938486/rectangle_large_type_2_9b188d7cf2cf84387575c8bd7fd67398.png?width=1200)
VS Codeで作成したコードをChromeで実行する方法
プログラミングをするときに、Visual Studio Codeで作成したコードをChromeで簡単に実行する方法を紹介します。
まず、適当なコードを記述します。
![](https://assets.st-note.com/img/1721477250111-0oZ1EVnEIz.png?width=1200)
コードはHTMLで書いているので、途中でどのように表示されるかを確認するときは、右クリックで「プレビュー表示」をすれば
↓このように確認することができます。
![](https://assets.st-note.com/img/1721477579032-7V8TTtItDT.png?width=1200)
右側にHelloと確認することができます。
しかし、このコードは、Java Scriptで表示するようコーディングされていますが、それが正確に表示されるかの確認はできません。
そこで、↓の一番したのアイコン、拡張機能をクリックします。
![](https://assets.st-note.com/img/1721477648036-H8gmasW73B.png)
そして、Live Serverという機能を追加することができます。
![](https://assets.st-note.com/img/1721477709078-5K6FHBeebo.png)
こちらをインストールしたあと、設定に向かいます。
![](https://assets.st-note.com/img/1721477737922-b7YrkVxyI1.png)
この歯車をひらいて、設定をクリックします。
![](https://assets.st-note.com/img/1721478134435-6G3aIuUjEU.png)
そして、検索のところに先ほどのLive Serverと検索すると、Live Serverの設定をすることができます。
![](https://assets.st-note.com/img/1721477832003-vZDBUzoaQK.png?width=1200)
一番した、nullとなっているところを変更します。
![](https://assets.st-note.com/img/1721477882800-BmVXSVKVQs.png?width=1200)
今回はChromeで実行したいので、Chromeを選択します。
![](https://assets.st-note.com/img/1721477943722-vNPHcVEB1q.png?width=1200)
それでは、今度はコードにもどります。↓図一番上をクリックします。
![](https://assets.st-note.com/img/1721477965483-9zsH82LIyF.png)
設定が完了するとVS Codeの下バーにGo Liveが追加されているのがわかります。ここをクリック
![](https://assets.st-note.com/img/1721478606943-2o8UZvOrcU.png?width=1200)
そうすると、Chromeで実行され、Java Scriptでコードした、アラートバーでHelloと表示されることが確認できます。
![](https://assets.st-note.com/img/1721478593706-bpcIt2d8kp.png?width=1200)