VS Code 教學網站一

三步驟：從空白到可預覽、可自動排版

只學三件事：HTML 起手式（! + Tab）、Live Server 即時預覽、Prettier 存檔自動排版。完全新手也能照做。

從起手式開始
快捷鍵速覽
  • 指令面板：Ctrl+Shift+P
  • 儲存：Ctrl+S
  • 格式化整檔：Shift+Alt+F（Mac：Shift+Option+F）

① HTML 起手式：! + Tab（Emmet）

1
在 VS Code 用 File → Open Folder… 開啟你的專案資料夾，新增並打開 index.html。
2
在第一行輸入 !，按 Tab（或 Enter）。
3
會自動展開成 HTML5 骨架（如下）。若沒反應，右下角語言從 Plain Text 改成 HTML 再試；或輸入 html:5 + Tab。
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>我的第一頁</title>
  </head>
  <body>
  </body>
</html>

② Live Server：即時預覽網頁

1
左側點 Extensions（四個小方塊）→ 搜尋 Live Server（作者 Ritwick Dey）→ Install。
2
在檔案總管右鍵 index.html → Open with Live Server。
3
瀏覽器自動打開（通常是 http://127.0.0.1:5500/）。回 VS Code 改內容並 存檔，頁面會自動刷新。
提示：右下角有 Go Live 按鈕可啟動/停止。若沒有反應，請確認你是「以資料夾方式」開啟專案。

③ Prettier：存檔自動排版（設定搜尋版）

1
在 Extensions 搜尋 Prettier – Code formatter（作者 Esben Petersen）→ Install（需要的話點 Reload）。
2
按 Ctrl+, 開 Settings，搜尋 default formatter（或「預設格式器」），把 Editor: Default Formatter 設為 Prettier – Code formatter (esbenp.prettier-vscode)。
3
同一頁再搜尋 Format On Save，勾選 Editor: Format On Save。
4
測試：把 index.html 內容故意寫成一行 → 按 Ctrl+S 存檔 → 應會自動變整齊。或用 Shift+Alt+F 立即整理整檔。
若沒反應：右下角語言別不要是 Plain Text；確認 Prettier 已 Enabled；右上有黃色盾牌時請 Trust 這個資料夾。