# VSCode 詳細安裝教學

VS Code 是目前主流的文字編輯器。不管是 Cursor 或是 Google 的 **Antigravity** 都是以 VS Code 為基底。雖然課程以 Antigravity 為主，還是建議大家下載 VS Code 一下。

## 步驟 1：下載 VSCode

### 1.1 前往官網下載

* **開啟瀏覽器**：前往 [Visual Studio Code 官網](https://code.visualstudio.com/)。
* **自動偵測系統**：網站會自動偵測你的作業系統並顯示對應的下載按鈕。
* **手動選擇版本**：點擊下載按鈕旁的下拉箭頭可選擇其他版本。

### 1.2 版本選擇指南

* **Windows 使用者**：
* `User Installer (64-bit)`：**建議選擇**，安裝到使用者資料夾。
* `System Installer (64-bit)`：需要管理員權限，安裝到系統資料夾。
* `ZIP Archive`：免安裝版本，適合隨身碟使用。

* **macOS 使用者**：
* `Universal`：同時支援 Intel 和 Apple Silicon (M1/M2) 晶片。
* `Intel Chip`：僅適用於 Intel 處理器的 Mac。
* `Apple Silicon`：僅適用於 M1/M2 處理器的 Mac。

* **Linux 使用者**：
* `.deb`：適用於 Ubuntu、Debian 及其衍生版本。
* `.rpm`：適用於 Red Hat、SUSE 及其衍生版本。
* `Snap`：通用套件格式。
* `tar.gz`：通用壓縮檔。

---

## 步驟 2：詳細安裝程序

### 2.1 Windows 安裝步驟

1. **執行安裝程式**
* 雙擊下載的 `VSCodeUserSetup-{version}.exe` 檔案。
* 如果出現 Windows 防護提示，點擊「仍要執行」。

2. **安裝精靈設定**
* **授權合約**：閱讀並接受 MIT 授權合約。
* **安裝位置**：建議使用預設路徑 `%LOCALAPPDATA%\Programs\Microsoft VS Code`。

3. **重要選項設定（強烈建議全部勾選）**
* [x] 建立桌面圖示
* [x] **新增到 PATH 環境變數**（重要：讓你可以在命令列使用 `code` 命令）
* [x] 註冊為支援檔案類型的編輯器
* [x] 新增「使用 Code 開啟」到檔案總管右鍵選單
* [x] 新增「使用 Code 開啟」到資料夾總管右鍵選單

4. **完成安裝**
* 點擊「安裝」等待安裝完成。
* 勾選「啟動 Visual Studio Code」。

### 2.2 macOS 安裝步驟

1. **下載並解壓縮**
* 開啟 Downloads 資料夾。
* 雙擊 `VSCode-darwin-universal.zip` 進行解壓縮。

2. **安裝應用程式**
* 將解壓縮後的 **Visual Studio Code.app** 拖曳到 **Applications** 資料夾。
* 首次開啟時，macOS 會詢問是否要開啟此應用程式，點擊「開啟」。

3. **命令列工具設定（可選但建議）**
* 開啟 VSCode。
* 按 `Cmd`+`Shift`+`P` 開啟命令面板。
* 輸入 `shell command: install`。
* 選擇 **「Shell Command: Install 'code' command in PATH」**。
* *這樣就可以在終端機使用 `code` 命令。*

### 2.3 Linux 安裝步驟（Ubuntu/Debian）

#### 方法一：使用官方儲存庫（建議）

# 更新套件列表
sudo apt update

# 安裝必要的相依套件
sudo apt install software-properties-common apt-transport-https wget

# 新增 Microsoft GPG 金鑰
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

# 新增 VSCode 儲存庫
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main"

# 安裝 VSCode
sudo apt update
sudo apt install code

#### 方法二：下載 .deb 套件

# 下載 .deb 檔案
wget -O code_latest_amd64.deb https://go.microsoft.com/fwlink/?LinkID=760868

# 安裝套件
sudo dpkg -i code_latest_amd64.deb

# 修復相依性問題（如果有的話）
sudo apt-get install -f

---

## 步驟 3：VSCode 初始設定和最佳化（選填）

### 3.1 選擇佈景主題

VSCode 首次啟動時會提示選擇主題：

* **Dark+ (default dark)**：深色主題，適合長時間程式設計。
* **Light+ (default light)**：淺色主題，適合明亮環境。
* **High Contrast**：高對比主題，適合視覺需求特殊的使用者。

### 3.2 安裝中文語言套件

1. **開啟擴充套件商店**
* 點擊左側邊欄的擴充套件圖示（四個方塊）。
* 或按 `Ctrl`+`Shift`+`X`（macOS：`Cmd`+`Shift`+`X`）。

2. **搜尋中文語言套件**
* 在搜尋框輸入 `Chinese`。
* 找到 **「Chinese (Traditional) Language Pack for Visual Studio Code」**。
* 點擊「Install」安裝。

3. **套用語言設定**
* 安裝完成後，右下角會出現「Change Language and Restart」提示，點擊重新啟動 VSCode。
* 如果沒有自動切換，按 `Ctrl`+`Shift`+`P`，輸入 `Configure Display Language`。

### 3.3 基本設定最佳化

**開啟設定：**

* 按 `Ctrl`+`,`（macOS：`Cmd`+`,`）。
* 或由選單進入：檔案 → 喜好設定 → 設定。

**建議調整的設定：**

* **自動儲存**
* 搜尋 `auto save`。
* 設定為 `afterDelay`（自動儲存）。

* **字型大小**
* 搜尋 `editor.fontSize`。
* 建議設定為 14-16（依個人喜好）。

* **縮排設定**
* 搜尋 `editor.tabSize`：設定為 2 或 4（依專案需求）。
* 搜尋 `editor.insertSpaces`：建議啟用（使用空格而非 Tab）。

* **自動換行**
* 搜尋 `editor.wordWrap`。
* 設定為 `on`（長行自動換行）。

### 3.4 必裝擴充套件推薦

**基礎開發套件：**

* **Prettier - Code formatter**：程式碼格式化。
* **ESLint**：JavaScript/TypeScript 程式碼檢查。
* **Auto Rename Tag**：自動重命名 HTML 標籤。
* **Bracket Pair Colorizer**：括號配對著色（新版 VSCode 已內建，可視情況安裝）。

**前端開發套件：**

* **Live Server**：本地開發伺服器。
* **HTML CSS Support**：HTML 中的 CSS 自動完成。
* **JavaScript (ES6) code snippets**：ES6 程式碼片段。