Visual Studio Code 設定指南

Visual Studio Code (VSCode) 是一款輕量但功能強大的桌面源代碼編輯器。它內建支援 JavaScript、TypeScript 和 Node.js，並擁有豐富的擴展生態系統，可以支援其他語言和工具。

目錄

安裝

Windows

• 訪問 VSCode 下載頁面
• 點擊 Windows 下載按鈕
• 運行安裝程式 (.exe 檔案)
• 按照安裝向導的指示進行
• 勾選選項以：

  • 建立桌面圖示
  • 將「用 Code 開啟」添加到 Windows 檔案總管的右鍵菜單
  • 將 Code 註冊為支援的檔案類型的編輯器

macOS

• 訪問 VSCode 下載頁面
• 點擊 Mac 下載按鈕
• 打開下載的 .zip 檔案
• 將 Visual Studio Code.app 拖到應用程式資料夾
• 可選：將 VSCode 添加到 Dock

Linux

• 訪問 VSCode 下載頁面
• 選擇適合您發行版的套件 (.deb, .rpm 等)
• 對於 Debian/Ubuntu：

  • 使用命令安裝

• 對於 Red Hat/Fedora：

  • 使用命令安裝

首次啟動與介面概覽

當您第一次打開 VSCode 時，您會看到：

• 歡迎頁面：包含常用命令和最近專案的快速連結
• 活動欄：左側邊欄有不同視圖的圖示：

  • 檔案總管：檔案瀏覽器
  • 搜尋：查找和替換
  • 源代碼控制：Git 整合
  • 運行和除錯：除錯面板
  • 擴展：管理擴展

• 狀態欄：底部顯示當前檔案和編輯器的資訊
• 編輯區域：主要的編碼區域（可以分割成多個編輯器）
• 面板：底部面板可以顯示終端、輸出、問題等

基本設定

可以通過以下方式訪問設定：

• Windows/Linux: 檔案 > 偏好設定 > 設定
• macOS: Code > 偏好設定 > 設定

建議考慮的設定：

• 主題：

  • 檔案 > 偏好設定 > 顏色主題 (或 Ctrl+K Ctrl+T)
  • 熱門選擇：Dark+、Light+、Monokai、Solarized

• 字型：選擇適合的字型
• 自動儲存：開啟自動儲存功能
• 標籤大小：設定標籤的大小
• 格式化：設定代碼格式化的選項

擴展

VSCode 的強大來自於其擴展。要安裝擴展：

• 點擊活動欄中的擴展圖示（或按 Ctrl+Shift+X）
• 按名稱搜尋擴展
• 點擊安裝

按類別的基本擴展：

一般

• Prettier – 代碼格式化工具：保持代碼格式一致
• ESLint：JavaScript 代碼檢查工具
• EditorConfig：維持一致的編碼風格

語言

• Python：完整的 Python 支援
• C/C++：C 和 C++ 的智能提示和除錯
• Java 擴展包：Java 開發工具
• JavaScript (ES6) 代碼片段：JavaScript 的代碼片段

主題

• Material Theme：流行的主題包
• One Dark Pro：Atom 的經典主題

生產力

• GitLens：增強 Git 功能
• Live Share：協作編輯
• Path Intellisense：自動完成檔名

工作區設定

VSCode 中的工作區代表一個或多個在編輯器窗口中打開的資料夾。

• 打開資料夾：檔案 > 打開資料夾 (Ctrl+K Ctrl+O)
• 儲存工作區：檔案 > 另存工作區為…
• 工作區設定：在您的專案中創建 .vscode 資料夾，並包含：

  • settings.json：專案特定的設定
  • launch.json：除錯配置
  • tasks.json：構建任務配置
  • extensions.json：推薦的擴展

JavaScript 專案的 settings.json 範例：

鍵盤快捷鍵

VSCode 有許多鍵盤快捷鍵。以下是最基本的：

• Ctrl+P：快速打開，前往檔案
• Ctrl+Shift+P：顯示命令面板
• Ctrl+Space：觸發建議
• F12：前往定義
• Alt+F12：查看定義
• Shift+Alt+F：格式化文件
• F5：開始除錯
• Ctrl+`：切換終端
• Ctrl+B：切換側邊欄
• Ctrl+/：切換行註解
• Ctrl+K Ctrl+C：添加行註解
• Ctrl+K Ctrl+U：移除行註解

整合終端

VSCode 包含一個整合的終端：

• 打開終端：檢視 > 終端
• 多個終端：點擊加號圖示
• 切換終端：使用下拉選單

源代碼控制整合

VSCode 內建 Git 支援：

• 初始化倉庫：點擊源代碼控制圖示並選擇「初始化倉庫」
• 暫存變更：點擊修改檔案旁的 +
• 提交變更：輸入訊息並按 Ctrl+Enter
• 推送/拉取：使用省略號菜單 (…) 獲取其他 Git 命令
• 視覺差異：點擊修改檔案以查看變更

除錯

為您的專案設置除錯：

• 創建啟動配置：

  • 點擊運行和除錯圖示
  • 點擊「創建 launch.json 檔案」
  • 選擇您的環境

• 設置斷點：點擊行號旁的邊緣
• 開始除錯：按 F5
• 使用除錯控制：繼續、步進、步出
• 監視變數：將表達式添加到監視面板

其他資源