2025-04-26-安裝 VS Code 外掛的方法
2025-04-26-安裝 VS Code 外掛的方法
很好 👍 你已經把 VS Code 裝好，接下來要安裝外掛（Extensions）。步驟如下：
🔹 安裝 VS Code 外掛的方法
- 打開 VS Code。
- 左邊工具列找到 Extensions（擴充功能），圖示像一個方塊拼圖。
- 在搜尋框輸入外掛名稱 → 按 Install 安裝。
🔹 建議安裝的外掛
Volar（Vue 3 支援）
- 搜尋：
Volar - 安裝後就能得到 Vue 3 的語法提示、錯誤檢查。
- ⚠️ 如果之前有安裝
Vetur，記得先移除（Vetur 是給 Vue 2 的）。
- 搜尋：
Tailwind CSS IntelliSense
- 搜尋：
Tailwind CSS IntelliSense - 功能：打 class 時會自動提示（例如
bg-...、text-...）。
- 搜尋：
ESLint
- 搜尋：
ESLint - 功能：幫你檢查程式碼是否符合規範，避免 bug。
- 安裝後，建議在專案裡也安裝 ESLint 套件（之後我可以教你）。
- 搜尋：
Prettier - Code formatter
- 搜尋：
Prettier - 功能：自動排版程式碼（按下 右鍵 → Format Document，或存檔時自動排版）。
- 搜尋：
✅ 安裝完這些外掛後，你的 VS Code 就能支援 Vue 3 + TailwindCSS + 自動排版 + 程式碼檢查。
⚡ 建議安裝順序：
先 Volar → 再 Tailwind CSS IntelliSense → 然後 ESLint → 最後 Prettier。
要不要我幫你設計一個 第一個 Vue + Tailwind 心理測驗小程式，讓你可以馬上測試這些外掛有沒有正常運作？