---
# System prepended metadata

title: VS code 安裝步驟

---

# VS code 安裝步驟
1.在Google搜尋VS code，或直接進入官網：https://code.visualstudio.com/

![](https://i.imgur.com/AwqLRRT.png)


2.依照自己的作業系統選擇自己所需要的版本，並在下載好後進行安裝。

![](https://i.imgur.com/qPSFc1f.png)


3.安裝相關的Extensions套件
Live Server：幫助我們及時看到我們開發的內容。點擊Install進行安裝。

![](https://i.imgur.com/oS5Odtt.png)


4.一開始我們會看到『NO FOLDER OPENED』。
所以讓我們來新建一個VScode的資料夾~

![](https://i.imgur.com/r0M6juS.png)

在桌面（或者任何你想要儲存該文件夾的地方）右鍵，點擊『新增資料夾』，產生一個空資料夾。

接著，回到VS code，點擊『Open folder』，找到新資料夾所在路徑，點開。這樣我們就打開了我們撰寫程式內容的根目錄。

![](https://i.imgur.com/hmURxiD.png)


5.新建一個新檔案（New File）。
在根目錄欄選擇『New File』，輸入你現在要寫的這個程式的名字，並在檔案名字後面加上副檔名（譬如.html、.cpp、.py等）

6.面對空空的頁面不知從何下手？
沒關係，我們可以自動產生HTML樣板！神奇指令如下：

> html：5

看到自動生成的模板了嗎？
現在，我們可在`<body></body>`標籤中開始進行程式的編寫，譬如輸入`<h1>Hello World!!</h1>`標題。Hello World可以替換成自己想要的文字。

7.執行第一支程式！
在頁面空白處點擊右鍵，選擇『Open with Live Server』,我們寫的網頁就會出現在瀏覽器上了~
而Live Server的好處就是當你改寫完程式，按下保存鍵（CTRL+S），瀏覽器上的網頁就會自動更新！

![](https://i.imgur.com/pXtijbJ.png)

恭喜你！到此為止，你就已經完成了向這個程式世界Say Hello了！接著就可以在程式的世界中盡情探索了！