這裡是最實用、最親民的 Visual Studio Code（VS Code）教學?✨
不管你是完全新手，還是準備開始寫 Python、HTML、JavaScript、C++，這篇都能幫你快速上手！
? VS Code 是什麼？
Visual Studio Code（VS Code） 是由微軟開發的免費程式碼編輯器，支援超多語言（如 Python、HTML、JS、C++、Java）、擴充功能強大、介面簡潔，是目前最熱門的編輯器之一。
? 1. 安裝 VS Code
✅ 步驟：
- 前往官網下載：
? https://code.visualstudio.com - 選擇你的作業系統（Windows、macOS、Linux）
- 安裝完成後，開啟即可使用！
?️ 2. VS Code 介面簡介
| 區塊 | 功能說明 |
|---|---|
| 側邊欄（左邊） | 檔案總管 / 搜尋 / Git / 擴充 / 除錯 |
| 編輯區（中間） | 編輯檔案的地方，支援多分頁 |
| 狀態列（底部） | 顯示語言模式、Git 狀態、錯誤提示等 |
| 終端機（下方） | 開啟命令列，可執行程式（如 Python） |
? 快捷鍵：
Ctrl + Shift + P：開啟指令面板Ctrl + ~：開關終端機Ctrl + B：顯示/隱藏側邊欄
? 3. 打開/建立專案資料夾
? 開啟資料夾
- 點選「檔案 → 開啟資料夾」
- 可集中管理所有專案檔案
? 建立檔案
- 側邊欄檔案總管 → 點右鍵「新增檔案」
- 檔名範例：
index.html、main.py、style.css
? 4. 安裝擴充功能（Extensions）
VS Code 最強大之處就是「擴充功能」！
點左側「?擴充功能圖示」，安裝你需要的：
| 擴充名稱 | 適用語言 / 功能 |
|---|---|
| Python | 支援 Python 語法、除錯、執行 |
| Live Server | 即時預覽 HTML 頁面 |
| Prettier | 自動格式化程式碼 |
| ESLint | JavaScript 語法檢查 |
| C/C++ | 撰寫 C 語言與 C++ 必備 |
| GitLens | 更強大的 Git 版本控制功能 |
? 5. 撰寫與執行程式碼（以 Python 為例）
✅ 安裝 Python：
- 安裝網址：https://www.python.org
- 安裝時記得勾選「Add to PATH」
✅ 在 VS Code 中執行 Python：
- 建立一個
main.py - 輸入以下程式碼：
print("Hello, VS Code!")
- 點右上角 ▶️ 或按
Ctrl + F5執行！
（或在下方終端機輸入：python main.py）
? 6. 撰寫 HTML + CSS + JS
- 建立
index.html，輸入基本 HTML 結構 - 安裝「Live Server」擴充功能
- 右鍵 HTML 檔 → 點選「Open with Live Server」
- 頁面會自動在瀏覽器打開，儲存後即時更新✨
? 7. 除錯（Debugging）
- 點左側「?」或
Ctrl + Shift + D - 建立除錯設定檔（通常會自動產生）
- 在程式碼左側點一下加「斷點」
- 點「▶️ 開始除錯」就能一行行執行觀察變數
? 8. 常用快捷鍵速查
| 功能 | 快捷鍵（Windows） |
|---|---|
| 開啟命令面板 | Ctrl + Shift + P |
| 顯示/隱藏側邊欄 | Ctrl + B |
| 格式化程式碼 | Shift + Alt + F |
| 多行游標 | Alt + 點選 |
| 切換分頁 | Ctrl + Tab |
| 搜尋檔案 | Ctrl + P |
☁️ 9. Git 整合功能
- 安裝 Git：https://git-scm.com
- 開啟 VS Code → 點左側 Git 圖示
- 初次使用會提示初始化版本庫，或連接 GitHub
- 可直接 commit、push、pull、查看差異！
? 10. 個人化設定 VS Code
點選右下角齒輪圖示 → 設定：
- 字體大小、主題（淺色 / 深色）
- 自動儲存：可勾選自動儲存每次修改
- 語言設定：可切換成繁體中文介面（搜尋「Chinese Language Pack」）
✅ 總結你現在會了嗎？
✔ 安裝與開啟 VS Code
✔ 編輯與執行程式
✔ 使用終端機、除錯工具
✔ 安裝擴充功能（Python、Live Server 等）
✔ 快捷鍵操作更順手
✔ Git 整合簡單好用