Live Server 安裝與操作流程

開啟 Visual Studio Code 後點擊紅框中的 Add workspace folder 將專案資料夾載入:

載入專案資料夾後快速連點你的網頁(index.html 檔案):

接著點擊擴充套件的圖示:

在搜尋框中搜尋 Live Server:

點擊搜尋到的第一個套件 Live Server 右下的 install 按鈕:

安裝完後在右下角點擊 Go Live:

點擊 Go Live 後, 會自動幫你在瀏覽器中開啟你的網頁:

回到 Visual Studio Code 中修改 HTML 內容,修改完後記得存檔:

存檔後網頁內容就會自動即時更新了:

如果想要修改樣式也是同樣道理,修改完目標元素的樣式後記得要存檔:

存檔後修改的樣式就會自動即時更新了:

每次修改網頁內容後記得要存檔才會自動即時更新,
每次修改網頁內容後記得要存檔才會自動即時更新,
每次修改網頁內容後記得要存檔才會自動即時更新,

很重要必須說三次!

Select a repo