VS Code 安裝與設定：常用擴充和使用指南

VS Code 完整使用指南

Visual Studio Code（簡稱 VS Code）是目前最受歡迎的程式碼編輯器之一，以其輕量、快速、功能強大而著稱。本文將帶你快速上手 VS Code，從安裝到設定，再到必備外掛的使用。

VS Code 主介面

一、安裝 VS Code

安裝 VS Code 非常簡單：

訪問 VS Code 官網
點選下載按鈕，網站會自動識別你的作業系統（macOS、Windows 或 Linux）
對於 macOS 使用者：
- 下載 .dmg 檔案
- 雙擊開啟，將 Visual Studio Code 拖拽到 Applications 資料夾
- 首次開啟時可能需要在”系統偏好設定 > 安全性與隱私”中允許執行
首次啟動時，VS Code 會自動檢測系統語言並推薦相應的語言包

整個安裝過程通常只需要幾分鐘，安裝完成後即可立即使用。

小技巧：安裝完成後，建議在終端中啟用 code 命令：

按 Cmd + Shift + P 開啟命令面板
輸入 “Shell Command: Install ‘code’ command in PATH”
之後就可以在終端中使用 code . 快速開啟當前目錄

二、基礎設定

VS Code 的設定非常靈活，可以通過圖形介面或直接編輯設定檔來自定義。

開啟設定

有兩種方式開啟設定：

點選左下角齒輪圖示 ⚙️，選擇”Settings”
使用快捷鍵：Cmd + ,

設定介面

常用設定項

1. 縮排長度設定

在設定中搜尋 “indent”，可以找到以下選項：

{
  "editor.tabSize": 4,  // Tab 键的空格数
  "editor.insertSpaces": true,  // 使用空格而非 Tab
  "editor.detectIndentation": true  // 自动检测文件缩进
}

如果你喜歡 2 空格縮排（常見於前端開發），可以設定：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

2. 字型設定

搜尋 “font” 可以自定義字型相關設定：

{
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontWeight": "normal",
  "editor.lineHeight": 22,
  "editor.fontLigatures": true  // 启用连字特性
}

推薦幾款適合程式設計的字型：

Fira Code：支援連字特性，讓程式碼更美觀
JetBrains Mono：專為開發者設計
Cascadia Code：微軟開發的程式設計字型
SF Mono：macOS 系統自帶，簡潔優雅

3. 其他實用設定

{
  "editor.wordWrap": "on",  // 自动换行
  "editor.minimap.enabled": true,  // 显示代码缩略图
  "editor.renderWhitespace": "selection",  // 显示空格
  "files.autoSave": "afterDelay",  // 自动保存
  "files.autoSaveDelay": 1000,  // 自动保存延迟（毫秒）
  "editor.cursorBlinking": "smooth",  // 光标平滑闪烁
  "editor.cursorSmoothCaretAnimation": "on",  // 光标平滑移动
  "workbench.colorTheme": "Dark+ (default dark)"  // 主题
}

編輯設定檔

如果你更喜歡直接編輯 JSON 設定檔：

按 Cmd + Shift + P 開啟命令面板
輸入 “Preferences: Open User Settings (JSON)”
在開啟的 settings.json 檔案中新增或修改設定

命令面板

三、必備外掛推薦

VS Code 的強大之處在於其豐富的外掛生態。點選左側活動欄的擴充圖示（或按 Cmd + Shift + X）即可開啟擴充市場。

擴充市場

1. Remote - SSH

功能：通過 SSH 連線到遠端伺服器，在本地編輯遠端檔案。

安裝方式：

在擴充商店搜尋 “Remote - SSH”
或者直接安裝 “Remote Development” 擴充包（包含 SSH、Containers、WSL）

Remote SSH

使用方法：

按 Cmd + Shift + P 開啟命令面板
輸入 “Remote-SSH: Connect to Host”
輸入 SSH 連線資訊，如 user@hostname
輸入密碼後即可連線

連線成功後，你可以像操作本地檔案一樣編輯遠端伺服器上的程式碼，終端也會自動連線到遠端環境。

常見問題：VS Code Server 下載失敗

在某些網路環境下（如國內伺服器、防火牆限制等），VS Code 可能無法自動下載 VS Code Server 到遠端伺服器，導致連線失敗。

症狀：

連線時卡在 “Installing VS Code Server” 步驟
提示下載超時或連線失敗
日誌中顯示無法訪問 https://update.code.visualstudio.com/

解決方案 1：手動下載並上傳

首先檢視本地 VS Code 的 commit ID：
- 開啟命令面板（Cmd + Shift + P）
- 輸入 “Remote-SSH: Show Log”
- 在日誌中找到類似 Downloading VS Code server... commit:xxxxx 的資訊
- 或者在 VS Code 中選擇 “Code” -> “About Visual Studio Code”，檢視 Commit ID

在本地下載 VS Code Server：

# 替换 {commit_id} 为实际的 commit ID
# 替换 {platform} 为服务器平台：linux-x64, linux-arm64, alpine-x64 等
https://update.code.visualstudio.com/commit:{commit_id}/server-{platform}/stable

上傳到遠端伺服器：

# 将下载的文件上传到服务器临时目录
scp vscode-server-linux-x64.tar.gz user@hostname:~/

在伺服器上解壓到指定目錄：

# SSH 连接到服务器
ssh user@hostname

# 创建 VS Code Server 目录
mkdir -p ~/.vscode-server/bin/{commit_id}

# 解压文件
tar -xzf ~/vscode-server-linux-x64.tar.gz -C ~/.vscode-server/bin/{commit_id} --strip-components 1

# 设置执行权限
chmod +x ~/.vscode-server/bin/{commit_id}/node
chmod +x ~/.vscode-server/bin/{commit_id}/bin/code-server

重新在 VS Code 中連線遠端伺服器

解決方案 2：使用國內映像源

可以通過設定環境變數使用國內映像加速下載：

在遠端伺服器上編輯 .bashrc 或 .zshrc：

export VSCODE_SERVER_DOWNLOAD_URL="https://vscode.cdn.azure.cn"

使設定生效：
```
source ~/.bashrc
```
重新連線

解決方案 3：設定 SSH Config 使用代理

如果有可用的代理，可以在本地 SSH 設定中設定：

編輯本地的 ~/.ssh/config 檔案：

Host your-server
    HostName hostname
    User username
    # 使用 HTTP 代理
    ProxyCommand nc -X connect -x proxy_host:proxy_port %h %p
    # 或使用 SOCKS5 代理
    # ProxyCommand nc -X 5 -x proxy_host:proxy_port %h %p

解決方案 4：離線安裝指令碼

建立一個自動化指令碼簡化安裝過程：

#!/bin/bash
# download-vscode-server.sh

COMMIT_ID="$1"
PLATFORM="${2:-linux-x64}"

if [ -z "$COMMIT_ID" ]; then
    echo "Usage: $0 <commit_id> [platform]"
    echo "Example: $0 abc123def456 linux-x64"
    exit 1
fi

# 下载
echo "Downloading VS Code Server..."
wget "https://update.code.visualstudio.com/commit:${COMMIT_ID}/server-${PLATFORM}/stable" \
    -O vscode-server.tar.gz

# 创建目录
mkdir -p ~/.vscode-server/bin/${COMMIT_ID}

# 解压
echo "Extracting..."
tar -xzf vscode-server.tar.gz -C ~/.vscode-server/bin/${COMMIT_ID} --strip-components 1

# 设置权限
chmod +x ~/.vscode-server/bin/${COMMIT_ID}/node
chmod +x ~/.vscode-server/bin/${COMMIT_ID}/bin/code-server

echo "Installation complete!"
rm vscode-server.tar.gz

使用方法：

./download-vscode-server.sh abc123def456 linux-x64

2. Markdown Preview Enhanced

功能：即時預覽 Markdown 檔案，支援數學公式、流程圖等高階特性。

Markdown Preview

使用方法：

開啟 Markdown 檔案後，點選右上角的預覽圖示 📖
或使用快捷鍵 Cmd + K V（先按 Cmd + K，鬆開後按 V）
也可以使用 Cmd + Shift + V 在當前編輯器中預覽

特色功能：

支援 LaTeX 數學公式
支援 Mermaid 流程圖
可匯出為 PDF、HTML 等格式
支援自定義 CSS 樣式
即時同步滾動

示例：

# 支持数学公式
$$E = mc^2$$

# 支持流程图
```mermaid
graph LR
    A[开始] --> B[处理]
    B --> C[结束]
```

3. GitHub Copilot（Codex）

功能：AI 程式碼助手，提供智慧程式碼補全和建議。

說明：GitHub Copilot 基於 OpenAI Codex 模型，能夠根據上下文生成程式碼片段。

GitHub Copilot

使用方法：

需要 GitHub 賬號並訂閱 Copilot（學生和開源維護者可免費使用）
安裝 “GitHub Copilot” 外掛
登入 GitHub 賬號授權
開始編碼時，Copilot 會自動提供建議（灰色文字）
按 Tab 鍵接受建議，或按 Esc 忽略

使用技巧：

寫詳細的註釋，Copilot 會根據註釋生成相應程式碼
使用 Option + ] 檢視下一個建議
使用 Option + [ 檢視上一個建議
使用 Option + \ 檢視所有建議

4. Python

功能：提供 Python 語言支援，包括智慧提示、除錯、測試等。

Python Extension

主要特性：

IntelliSense 程式碼補全
程式碼格式化（支援 Black、autopep8 等）
程式碼檢查（Pylint、Flake8 等）
強大的偵錯程式
Jupyter Notebook 支援
虛擬環境管理

設定示例：

{
  "python.defaultInterpreterPath": "/usr/local/bin/python3",
  "python.formatting.provider": "black",
  "python.linting.enabled": true,
  "python.linting.pylintEnabled": true,
  "python.analysis.typeCheckingMode": "basic"
}

除錯功能：

按 F5 開始除錯
按 Cmd + Shift + D 開啟除錯檢視
點選行號左側設定斷點
使用除錯控制台執行表示式

Python Debugging

5. GitLens

功能：增強 Git 功能，視覺化程式碼歷史和提交資訊。

GitLens

核心功能：

Blame 註釋：在每行程式碼旁顯示最後修改者和時間
程式碼作者資訊：滑鼠懸停檢視詳細的提交歷史
檔案歷史：快速瀏覽檔案的所有修改記錄
分支比較：對比不同分支的差異
提交搜尋：強大的提交歷史搜尋功能
視覺化提交圖：圖形化展示分支和合並歷史

使用技巧：

點選狀態列的 GitLens 圖示可以快速切換功能
使用側邊欄的 GitLens 檢視檢視倉庫、檔案歷史等
在 Blame 註釋中點選提交資訊可以檢視完整的提交詳情
使用 Cmd + Shift + G 開啟原始碼管理檢視

GitLens Blame

四、進階技巧

快捷鍵大全（macOS）

掌握快捷鍵可以大大提升效率。以下是最常用的快捷鍵：

通用操作

Cmd + P：快速開啟檔案
Cmd + Shift + P：命令面板（最重要的快捷鍵！）
Cmd + ,：開啟設定
Cmd + W：關閉當前標籤頁
Cmd + K Cmd + S：開啟快捷鍵設定

編輯相關

Cmd + /：註釋/取消註釋
Option + ↑/↓：向上/向下移動當前行
Shift + Option + ↑/↓：向上/向下複製當前行
Cmd + D：選擇下一個相同的詞
Cmd + Shift + L：選擇所有相同的詞
Cmd + [：減少縮排
Cmd + ]：增加縮排
Cmd + Enter：在下方插入新行
Cmd + Shift + Enter：在上方插入新行

多游標編輯

Option + Click：新增游標
Cmd + Option + ↑/↓：在上方/下方新增游標
Cmd + U：撤銷最後一次游標操作

多游標編輯

搜尋和導航

Cmd + F：在當前檔案中查詢
Cmd + Shift + F：在整個專案中查詢
Cmd + G：查詢下一個
Cmd + Shift + G：查詢上一個
Cmd + Option + F：查詢並替換
Ctrl + G：跳轉到指定行
Cmd + Shift + O：跳轉到檔案中的符號
Cmd + T：跳轉到工作區中的符號

檢視控制

Cmd + B：切換側邊欄顯示
Cmd + J：切換面板顯示
Cmd + \：拆分編輯器
Cmd + 1/2/3：聚焦到第 1/2/3 個編輯器組
`Ctrl + “：開啟/關閉整合終端
Cmd + Shift + E：顯示資源管理器
Cmd + Shift + F：顯示搜尋
Cmd + Shift + D：顯示除錯
Cmd + Shift + X：顯示擴充

終端操作

`Ctrl + “：開啟/關閉終端
`Cmd + Shift + “：建立新終端
Cmd + \：在終端間切換

整合終端

小技巧：可以按 Cmd + K Cmd + S 開啟快捷鍵設定，搜尋任何命令並自定義快捷鍵。

程式碼片段（Code Snippets）

程式碼片段（Code Snippets）是一種強大的功能，可以快速插入預定義的程式碼模板，大大提升編碼效率。

Code Snippets

建立自定義程式碼片段

按 Cmd + Shift + P 開啟命令面板
輸入 “Snippets: Configure User Snippets”
選擇語言或建立全域程式碼片段
在開啟的 JSON 檔案中定義程式碼片段

程式碼片段語法示例

以 Python 為例，建立一個函式模板：

{
  "Python Function": {
    "prefix": "deff",
    "body": [
      "def ${1:function_name}(${2:parameters}):",
      "    \"\"\"${3:Description}",
      "    ",
      "    Args:",
      "        ${2:parameters}: ${4:parameter description}",
      "    ",
      "    Returns:",
      "        ${5:return description}",
      "    \"\"\"",
      "    ${6:pass}",
      "$0"
    ],
    "description": "Create a Python function with docstring"
  },
  "Python Main": {
    "prefix": "main",
    "body": [
      "if __name__ == '__main__':",
      "    ${1:main()}"
    ],
    "description": "Main entry point"
  }
}

JavaScript/TypeScript 示例

{
  "Console Log": {
    "prefix": "clg",
    "body": [
      "console.log('${1:message}:', $2);"
    ],
    "description": "Log to console"
  },
  "Arrow Function": {
    "prefix": "af",
    "body": [
      "const ${1:functionName} = (${2:params}) => {",
      "    ${3:// body}",
      "};"
    ],
    "description": "Create arrow function"
  },
  "React Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = () => {",
      "    return (",
      "        <div>",
      "            ${2:content}",
      "        </div>",
      "    );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create React functional component"
  }
}

程式碼片段語法說明

prefix：觸發程式碼片段的關鍵字
body：程式碼片段內容（陣列形式，每個元素是一行）
description：程式碼片段描述（在補全提示中顯示）
$1, $2, $3：Tab 停靠點，按 Tab 鍵可以依次跳轉
${1:default}：帶預設值的佔位符
$0：最終游標位置
${1|option1,option2,option3|}：下拉選擇選項

使用程式碼片段

在編輯器中輸入 prefix 定義的關鍵字
按 Tab 或 Enter 鍵觸發程式碼片段
按 Tab 鍵在各個佔位符之間跳轉
填寫完畢後按 Esc 退出程式碼片段模式

常用變數

程式碼片段還支援使用預定義變數：

{
  "File Header": {
    "prefix": "header",
    "body": [
      "/**",
      " * @file $TM_FILENAME",
      " * @author ${1:Your Name}",
      " * @date $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      " * @description ${2:File description}",
      " */",
      "",
      "$0"
    ],
    "description": "File header comment"
  }
}

常用變數包括：

$TM_FILENAME：當前檔名
$TM_FILENAME_BASE：不含副檔名的檔名
$TM_DIRECTORY：當前目錄
$TM_FILEPATH：完整檔案路徑
$CURRENT_YEAR：當前年份（4位數）
$CURRENT_MONTH：當前月份（2位數）
$CURRENT_DATE：當前日期（2位數）
$CURRENT_HOUR：當前小時（24小時制）
$CLIPBOARD：剪貼簿內容
$WORKSPACE_NAME：工作區名稱

工作區設定

除了使用者設定，VS Code 還支援工作區設定，這對於不同專案有不同設定需求很有用。

工作區設定的優勢：

可以為每個專案定製不同的設定
設定可以提交到版本控制，團隊共享
工作區設定優先順序高於使用者設定

建立工作區設定：

在專案根目錄建立 .vscode 資料夾
在其中建立 settings.json 檔案
新增專案特定的設定

示例設定：

{
  "editor.tabSize": 2,
  "python.defaultInterpreterPath": "./venv/bin/python",
  "files.exclude": {
    "**/__pycache__": true,
    "**/*.pyc": true
  }
}

Zen 模式與專注模式

VS Code 提供了多種專注模式，幫助你集中注意力編碼：

Zen 模式：

快捷鍵：Cmd + K Z
隱藏所有 UI 元素，只顯示編輯器
按 Esc Esc 退出

居中佈局：

命令面板搜尋 “Toggle Centered Layout”
將編輯器內容居中顯示

Zen Mode

五、主題與美化

檔案圖示主題

除了顏色主題，還可以自定義檔案圖示：

推薦的圖示主題：

Material Icon Theme：最流行的圖示主題
vscode-icons：詳細的檔案型別圖示
Monokai Pro Icons：簡潔現代

安裝方法：在擴充市場搜尋並安裝，然後通過命令面板選擇 “File Icon Theme”。

總結

VS Code 是一款功能強大且高度可定製的編輯器。通過合理設定和安裝適合的外掛，你可以打造一個完全符合個人習慣的開發環境。

學習建議：

先熟悉基礎功能和常用快捷鍵
逐步新增必要的外掛，不要一次性裝太多
定期檢視官方說明文件和更新日誌，發現新功能
自定義程式碼片段，提升編碼效率
加入 VS Code 社群，學習他人的設定和技巧

記住，最好的設定就是最適合你的設定。不要盲目追求外掛數量，選擇真正能提升你工作效率的工具即可。

有用的資源：

祝你使用愉快！🚀

VS Code 完整使用指南

一、安裝 VS Code

二、基礎設定

開啟設定

常用設定項

1. 縮排長度設定

2. 字型設定

3. 其他實用設定

編輯設定檔

三、必備外掛推薦

1. Remote - SSH

常見問題：VS Code Server 下載失敗

2. Markdown Preview Enhanced

3. GitHub Copilot（Codex）

4. Python

5. GitLens

四、進階技巧

快捷鍵大全（macOS）

通用操作

編輯相關

多游標編輯

搜尋和導航

檢視控制

終端操作

程式碼片段（Code Snippets）

建立自定義程式碼片段

程式碼片段語法示例

JavaScript/TypeScript 示例

程式碼片段語法說明

使用程式碼片段

常用變數

工作區設定

Zen 模式與專注模式

五、主題與美化

推薦主題

檔案圖示主題

總結

相关文章