本篇文章目錄

1. 前言：工欲善其事，必先利其器
2. VSCode必備神器：Live Server 即時預覽
3. 前端開發加速器：Emmet 快捷鍵全攻略
4. 實戰演練：用 Emmet 一秒拉出專案骨架

一、 前言：工欲善其事，必先利其器

在上一篇 [Day 01] 中，我們規劃了《醫藥健康小工具箱 (MedToolbox)》的設計藍圖與 30 天開發計畫。從今天開始，我們將正式進入實作階段。

在敲下第一行 HTML 之前，打造一個高效、順手的手感與開發環境至關重要。你是否曾經為了寫一個輸入表單，重複敲打無數次的 <div class="...">、<label> 與 <input> 感到枯燥無味？或者每次修改完 CSS 都要切換到瀏覽器按 Ctrl + R（或 Cmd + R）手動重新整理？

接下來要介紹的是VSCode中的兩大開發利器——Live Server 與 Emmet，讓我們的開發速度倍增！

二、 VS Code 必備神器：Live Server 即時預覽

在傳統的網頁開發流程中，我們存檔後必須切換到瀏覽器手動刷新頁面才能看到最新的渲染效果。而 Live Server 套件可以在本機啟動一個獨立的 Web Server，並具備 Hot Reload (熱重載) 功能——只要你在 VS Code 按下存檔 ，瀏覽器就會自動更新畫面！

如何安裝與使用 Live Server？

1. 開啟 VS Code，點擊左側選單的延伸模組圖示。
2. 在搜尋框輸入 Live Server（作者為 Ritwick Dey）。
3. 點擊 Install (安裝)。
4. 安裝完成後，開啟專案中的 index.html 檔案。
5. 點擊 VS Code 右下角狀態列出現的 「Go Live」 按鈕，或者在編輯區點擊右鍵選擇 「Open with Live Server」。
   

三、 前端開發加速器：Emmet 快捷鍵全攻略

什麼是 Emmet？

Emmet（早期稱為 Zen Coding）是一套內建於 VS Code 中的語法擴充工具。它允許我們使用類似 CSS 選擇器的極簡縮寫 (Snippets)，按下 Tab 或 Enter 鍵後，瞬間展開成結構完整的 HTML 或 CSS 程式碼。

它不是某個前端框架（如 React 或 Mithril），而是純粹幫你在寫 HTML/CSS 時「少打字、防打錯」的編輯器內建神器！

HTML 常用的 Emmet 語法一覽表

四、 實戰演練：用 Emmet 一秒拉出專案骨架

假設我們要在開瓶倒數計時器中建立包含「藥品名稱」與「開瓶日期」兩個輸入欄位的表單區塊，在以前可能需要一行一行慢慢敲打：

傳統手敲寫法：

<div class="form-grid">
  <div class="input-group">
    <label for="item-name">藥品名稱</label>
    <input type="text" id="item-name">
  </div>
  <div class="input-group">
    <label for="open-date">開瓶日期</label>
    <input type="date" id="open-date">
  </div>
</div>

運用 Emmet 一行搞定：

在 VS Code 中，你只需要在檔案裡貼上或輸入下面這行 Emmet 語法並按下 Tab：

.form-grid>(.input-group>label+input)*2

甚至如果想把文字與 ID 都一次到位，可以這樣寫：

.form-grid>(.input-group>label{藥品名稱}+input[type=text])+
(.input-group>label{開瓶日期}+input[type=date])

按下 Tab 的那一刻，完整的 HTML 表單結構就會自動展開了

結語

適當運用 Live Server 的即時熱重載 與 Emmet 的倍速展字 這些小工具，能讓我們把注意力專注在邏輯設計與畫面呈現上，而不是重複的手工打字。