前面幾篇，我們都用 Windows 內建的「記事本」寫網頁。它零門檻，很適合剛入門，但隨著程式碼越寫越多，缺點也越來越明顯：標籤沒有顏色區分、少寫結束標籤不會提醒、每次改完還要手動切到瀏覽器按 F5。
這一篇，我們來換一支更順手的工具：Visual Studio Code（簡稱 VS Code）。它是微軟推出的免費程式碼編輯器，全世界許多網頁開發者都在用。本文用 5 個步驟，帶你完成安裝、認識畫面、安裝兩個必備擴充功能，並學會幾個能大幅提升效率的技巧。不同版本的畫面與選項名稱可能略有差異，文中的圖片為示意圖，不是實際畫面。
先搞懂：為什麼要用 VS Code？
- 語法上色：標籤、屬性、文字用不同顏色顯示，一眼就能看出結構。
- 自動補全：打出開始標籤，自動補上結束標籤；輸入幾個字母，就跳出建議清單。
- 縮寫展開（Emmet）：輸入一行簡短的縮寫，按 Tab 就能展開成一大段 HTML。
- 即時預覽：搭配擴充功能，存檔後瀏覽器會自動重新整理。
- 管理整個專案：左側直接顯示資料夾裡的所有檔案，不用在檔案總管與編輯器之間切來切去。
另外還有一個好處：VS Code 預設就以 UTF-8 儲存檔案，不用再擔心中文變成亂碼。
步驟一：下載與安裝
- 開啟瀏覽器，搜尋「Visual Studio Code」，進入官方網站（網址是 code.visualstudio.com）。
- 按下「Download for Windows」，下載安裝程式。（若你使用 Mac，網站會自動提供對應的版本。）
- 執行下載的安裝檔，一路按「下一步」。到「選擇附加的工作」這一頁時，建議勾選下列項目：
- 「將『以 Code 開啟』動作加入 Windows 檔案總管檔案的操作功能表」
- 「將『以 Code 開啟』動作加入 Windows 檔案總管目錄的操作功能表」
- 「將 Code 註冊為支援的檔案類型編輯器」
- 「加入 PATH（重新啟動後生效）」
- 按「安裝」，完成後按「完成」並啟動 VS Code。
小提醒：勾選前兩項之後，以後在任何檔案或資料夾上按滑鼠右鍵，就會多一個「以 Code 開啟」，非常方便。VS Code 本身是免費的，請從官方網站下載，不要從來路不明的網站取得安裝檔。
步驟二：認識畫面，開啟你的網站資料夾
第一次開啟 VS Code，會看到一個「歡迎」頁面。先不用管它，我們直接開啟前面一直在用的 myweb 資料夾：
- 按「檔案」→「開啟資料夾」。
- 選擇
myweb資料夾，按「選擇資料夾」。 - 如果出現「是否信任此資料夾中檔案的作者」的提示，這是你自己建立的資料夾，選「是，我信任此作者」即可。
接著，左側的「檔案總管」就會列出 myweb 裡的所有檔案，點兩下 index.html 就能開啟編輯。要新增檔案，把滑鼠移到資料夾名稱上，按「新增檔案」圖示，輸入檔名（如 test.html）按 Enter 即可。
圖 1 VS Code 的主要區塊（示意圖）
步驟三：安裝中文介面與 Live Server
VS Code 的功能可以靠「擴充功能」增加。我們先裝兩個最實用的：
① 中文（繁體）語言套件
- 按左側活動列的「擴充功能」圖示（四個方塊的圖案），或按 Ctrl＋Shift＋X。
- 在搜尋框輸入
Chinese Traditional。 - 找到由 Microsoft 發行的「Chinese (Traditional) Language Pack for Visual Studio Code」，按「Install」。
- 安裝完成後，右下角會提示「重新啟動」，按下去，介面就會變成繁體中文。
② Live Server：存檔後瀏覽器自動更新
- 同樣在擴充功能搜尋框輸入
Live Server。 - 找到名稱為「Live Server」、作者為 Ritwick Dey 的那一個，按「Install」。
- 安裝完成後，開啟
index.html，畫面右下角的狀態列會出現「Go Live」。按下去，瀏覽器就會自動開啟網頁（網址類似http://127.0.0.1:5500/index.html）。 - 也可以在
index.html內容上按滑鼠右鍵，選「Open with Live Server」。
之後，只要你在 VS Code 修改並存檔（Ctrl＋S），瀏覽器就會立刻自動更新，不必再手動切換視窗按 F5。想關閉時，按狀態列的「Port: 5500」即可。
圖 2 修改、存檔、瀏覽器自動更新（示意圖）
小提醒：擴充功能請只安裝「下載次數多、發行者可信」的項目，避免安裝來路不明的擴充功能。Live Server 要從「開啟資料夾」的方式開啟專案，狀態列才會出現 Go Live。
步驟四：用 Emmet 縮寫，打一行變一大段
VS Code 內建了一項超好用的功能：Emmet。你只要輸入簡短的縮寫，按下 Tab 鍵，就會展開成完整的 HTML 程式碼。請先新增一個 test.html 練習：
- 在檔案總管新增
test.html，並開啟它。 - 在空白的編輯區輸入一個驚嘆號
!。 - 按 Tab（或 Enter），整份 HTML 基本骨架就自動產生了。
展開後，請把 <html lang="en"> 改成 <html lang="zh-Hant">，並把 <title> 改成你想要的標題。接著在 <body> 裡試試看其他縮寫，例如輸入 ul>li*3 再按 Tab：
圖 3 Emmet 縮寫展開前後的對照（示意圖）
常用的 Emmet 縮寫
| 輸入縮寫 | 按 Tab 後得到 |
|---|---|
! | 完整的 HTML5 基本骨架 |
h1 | <h1></h1> |
p*3 | 三個 <p></p> |
.card | <div class="card"></div> |
#top | <div id="top"></div> |
a[href="#"] | <a href="#"></a> |
img | <img src="" alt=""> |
div.wrapper>main+aside | 一個 wrapper，裡面放並排的 main 與 aside |
li.item$*3 | 三個 li，class 依序為 item1、item2、item3 |
符號的意思很好記：> 是「裡面放」、+ 是「同一層並排」、* 是「重複幾次」、. 是 class、# 是 id、$ 是自動編號。Emmet 在 CSS 檔裡也能用，例如輸入 df 按 Tab，會展開成 display: flex;。
步驟五：幾個好用的設定與快速鍵
調整幾項常用設定
按「檔案」→「喜好設定」→「設定」（或按 Ctrl＋,），在上方搜尋框輸入關鍵字，就能找到對應項目：
- Auto Save（自動儲存）：改成
afterDelay，停止輸入一下子就自動存檔，搭配 Live Server，畫面更新幾乎同步。 - Font Size（字型大小）：預設偏小，可調成 16 以上，閱讀比較不吃力。
- Word Wrap（自動換行）：改成
on，太長的程式碼會自動折行，不必左右捲動。 - Tab Size：縮排的空格數，網頁開發常用 2。
想暫時放大縮小，也可以按 Ctrl＋＝ 與 Ctrl＋－ 調整整個畫面的大小。
必學的快速鍵
| 快速鍵（Windows） | 功能 |
|---|---|
Ctrl＋S | 存檔 |
Shift＋Alt＋F | 自動整理格式與縮排 |
Ctrl＋/ | 把選取的行加上或取消註解 |
Alt＋↑、Alt＋↓ | 把目前這一行往上、往下移動 |
Shift＋Alt＋↓ | 複製目前這一行到下一行 |
Ctrl＋D | 連續選取相同的文字，可同時修改多處 |
Ctrl＋P | 輸入檔名，快速開啟檔案 |
Ctrl＋F、Ctrl＋H | 尋找、取代 |
Ctrl＋B | 顯示或隱藏左側側邊欄 |
Ctrl＋Shift＋P | 命令選擇區，輸入文字就能執行各種功能 |
使用 Mac 的讀者，把 Ctrl 換成 Command（⌘）、Alt 換成 Option（⌥）即可。
其中最推薦先學會的是 Shift＋Alt＋F。當你的程式碼縮排亂掉時，按一下就會自動整理好，很適合拿來整理前幾篇寫過的 index.html。
新手常見問題
- 右鍵沒有「以 Code 開啟」：安裝時沒有勾選對應的選項。重新執行安裝程式並勾選即可，你的設定與檔案不會遺失。
- 狀態列沒有「Go Live」：確認已安裝 Live Server，且是用「檔案」→「開啟資料夾」開啟專案，而不是只開啟單一檔案。
- 存檔後瀏覽器沒有更新：確認有按 Ctrl＋S，或開啟自動儲存。另外請看瀏覽器網址，是不是
127.0.0.1:5500開頭，而不是直接點兩下開啟檔案的file:///路徑。 - 輸入 ! 按 Tab 沒有反應：檢查檔名是不是
.html。也可以看右下角狀態列的語言模式，是否顯示「HTML」。 - 開啟舊檔案出現亂碼：點右下角狀態列的編碼（例如「UTF-8」），選「以編碼重新開啟」，試試 UTF-8 或 Big5。若確定是 Big5，可以在確認內容後另存成 UTF-8，之後就不會再亂碼。
- 找不到某項設定：在設定頁的搜尋框輸入英文關鍵字（例如 auto save），通常比逐項找更快。
小練習：熟悉你的新工具
- 用 VS Code 開啟
myweb資料夾，再按 Go Live 開啟index.html。 - 到
style.css修改標題顏色，存檔後觀察瀏覽器是否自動更新。 - 在
test.html輸入!展開骨架，再用nav>ul>li*4>a做出一個含四個連結的選單。 - 打開
index.html，按 Shift＋Alt＋F 整理縮排，觀察程式碼的變化。 - 挑戰：用 Alt＋↑／↓ 調整清單項目的順序，用 Ctrl＋D 一次把所有「HTML」改成「HyperText」。
結語
選對工具，學習的效率會差很多。今天你安裝了 VS Code，認識了它的畫面，並用到了三項最實用的功能：Live Server 即時預覽、Emmet 縮寫展開、自動格式化。從這一篇開始，後面的範例都可以直接在 VS Code 中練習。
下一篇，我們會進一步認識網頁中的圖片、音訊、影片與連結，並學會規劃多頁網站的資料夾結構。
沒有留言:
張貼留言