MENU

VS code 初心者向け【 コードを書く ▶︎ ブラウザで見る 】を超簡単にする魔法のやり方!

目次

Live Server(ライブサーバー)とは

Live server (ライブサーバー)とは、visual studio code (ビジュアルスタジオコード)の【 拡張機能 】のひとつです。
簡単に言うと、「 あなたが書いたコードをすぐにブラウザで見せてくれるツール 」です。

使うメリット

VS code でコードを書いたら、そのコードを画像として表示させなければなりません。そのやり方を簡単に説明します。

こちらが私が書いたコードです。↓↓

まず、書いたコードを「 保存 」します。次に自分の書いたコードを画像として表示させるために、Safari(サファリ)やGoogle(グーグル)またはChrome(クローム)などのブラウザを手動で立ち上げ、自分の書いたコードを、ドラック&ドロップさせたり、更新したりすることで、書いたコードを画像として表示させる必要があります。
画像で表示されたらこんな感じ↓↓

しかし Livs Server を使えばその手間がなくなります! 
書いたコードを保存した時点で、↑↑上の画像を表示してくれます。
自動で更新されて最新の状態を表示してくれるんです!!!!

インストール手順

Live Server を使うには、まずインストールが必要です。
手順はとても簡単で、前回、日本語表示をするための拡張機能をインストールしたやり方と同じです。

1 Visual studio Code を開く

2 左側の「 四角いアイコンをクリック 」すると
 前回、日本語表示をするための拡張機能が一つインストール済みになっています。(地球儀みたいなやつ)



3 検索バーに「 Live Server 」と入力すると

4 似たような Live server が出てきますが【 Live Server 】とだけ書いてあるものをクリックする↓↓


5 インストールをクリック↓↓

5 インストールが完了したら、インストールのところが【 アンインストール 】に変わります。↓↓


6 Visual studio codeを一旦閉じます。 全に閉じてください。visual studio codeを再起動し、四角が4つあるアイコンをクリックすると、Live Server がインストールされているのが確認できます。↓↓

次回は、今回インストールしたLive Server を使って、【 実際にどのように表示されるのか 】Live server の使い方をマスターしよう!
プログラミングを始める前に使い方を覚えておく事は大切な事です。また、「表示されない」などのトラブルを事前に確認して使えるようにすることで、スムーズなプログラミング学習ができます。



よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

このブログでは、プログラミング初心者としての挑戦や気づきを記録し、同じように学び始めた方々と知識を共有できたらと思っています。
他の初心者の方が、気軽にプログラミングを始められるような情報を提供することを目標としています。

コメント

コメントする

目次