VS Code 完全指南 | 高效開發技巧、快捷鍵與配置優化教程

Visual Studio Code Development

Visual Studio Code（簡稱 VS Code）是微軟開發的免費、開源、跨平臺代碼編輯器。憑藉其豐富的擴展生態、強大的調試功能和高度可定製性，VS Code 已成為全球開發者最喜愛的開發工具之一。本文將詳細介紹 VS Code 的高級使用技巧、配置優化和效率提升方法。

為什麼選擇 VS Code？

核心優勢

優勢	說明
🆓 完全免費	開源項目，無隱藏費用
🌍 跨平臺	Windows、macOS、Linux 全支持
🔌 豐富擴展	30,000+ 插件覆蓋所有編程語言
⚡ 輕量快速	啟動速度快，資源佔用低
🎨 高度定製	主題、快捷鍵、佈局隨心配置
🛠️ 內置工具	Git 集成、終端、調試器一應俱全
🤝 強大社區	活躍社區，問題快速解決

適用場景

✅ 前端開發：HTML、CSS、JavaScript、TypeScript、Vue、React ✅ 後端開發：Node.js、Python、Go、Java、PHP ✅ 移動開發：React Native、Flutter ✅ 數據科學：Jupyter Notebook、Python 數據分析 ✅ DevOps：Docker、Kubernetes、Terraform ✅ 文檔編寫：Markdown、LaTeX

命令行工具

command+shift+p 打開 Command Palette (命令面板) 輸入 shell command，點擊回車

使用 VS code 打開當前文件夾 code .

`code -r .`	在最近使用的代碼窗口打開當前文件夾
`code -n`	創建新文件
`code --locale=es`	修改語言
`code --diff file1 file2`	打開 diff 編輯器
`code --help`	查看幫助
`code --disable-extensions .`	禁用所有的插件

命令行工具詳解

安裝命令行工具

macOS：

bash

# 方法 1：通過命令面板安裝
Cmd + Shift + P → 輸入 "Shell Command" 
→ 選擇 "Install 'code' command in PATH"

# 方法 2：手動添加（如果方法 1 失敗）
echo 'export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Windows：

powershell

# VS Code 安裝時默認添加到 PATH
# 如果沒有，重新運行安裝程序並勾選 "Add to PATH"

# 或者手動添加環境變量
# 系統屬性 → 高級 → 環境變量
# 在 Path 中添加：
C:\Users\你的用戶名\AppData\Local\Programs\Microsoft VS Code\bin

Linux：

bash

# Debian/Ubuntu
sudo apt install code

# 或通過 Snap
sudo snap install code --classic

# Fedora
sudo dnf install code

# Arch Linux
sudo pacman -S code

常用命令詳解

基礎命令：

bash

# 打開當前目錄
code .

# 打開指定文件或目錄
code /path/to/file
code /path/to/directory

# 在新窗口中打開
code -n .

# 在已存在的窗口中打開
code -r .

# 打開文件並定位到指定行
code file.txt:10

# 打開文件並定位到行和列
code file.txt:10:5

高級命令：

bash

# 比較兩個文件
code --diff file1.js file2.js

# 以特定語言模式打開
code --locale zh-CN

# 禁用所有擴展啟動（排查問題用）
code --disable-extensions .

# 禁用特定擴展
code --disable-extension vscode.python

# 顯示版本信息
code --version

# 顯示幫助信息
code --help

# 等待文件關閉後返回（用於 git commit 等）
code --wait file.txt

實用場景示例：

bash

# 1. 快速編輯配置文件
code ~/.zshrc
code ~/.bashrc

# 2. 比較 Git 分支差異
code --diff <(git show branch1:file.js) <(git show branch2:file.js)

# 3. 作為默認編輯器
export EDITOR="code --wait"
git config --global core.editor "code --wait"

# 4. 批量打開文件
code src/*.js

# 5. 打開多個目錄（多根工作區）
code folder1 folder2 folder3

創建別名（提升效率）：

bash

# 添加到 ~/.zshrc 或 ~/.bashrc
alias c='code'
alias cn='code -n'
alias cr='code -r'
alias cdif='code --diff'

# 重新加載
source ~/.zshrc

# 使用
c .          # 打開當前目錄
cn           # 新建窗口
cdif a.js b.js  # 比較文件

自定義設置

打開 settings.json

`"editor.formatOnPaste": true`	粘貼時格式化
`"editor.fontSize": 18`	改變字體大小
`"window.zoomLevel": 5`	設置縮放等級
`"editor.fontFamily": "Fira Code", "editor.fontLigatures": true`	編程字體連字
`"files.autoSave": "afterDelay"`	自動保存
`"editor.formatOnSave": true,`	保存時格式化
`"editor.tabSize": 4`	修改 tab 長度
`"editor.renderWhitespace": "all"`	空白符號顯示

Settings.json 完整配置指南

如何打開 settings.json

方法 1：命令面板
Cmd/Ctrl + Shift + P → 輸入 "Open Settings (JSON)"

方法 2：菜單
文件 → 首選項 → 設置 → 右上角圖標 "{}"

方法 3：快捷鍵
Cmd/Ctrl + , → 點擊右上角圖標

編輯器核心配置

json

{
  // ========== 基礎外觀 ==========
  "editor.fontSize": 16,
  "editor.fontFamily": "'Fira Code', 'JetBrains Mono', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.rulers": [80, 120],
  
  // ========== 縮進與空格 ==========
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "boundary",
  
  // ========== 自動保存與格式化 ==========
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  
  // ========== 代碼摺疊 ==========
  "editor.folding": true,
  "editor.foldingStrategy": "indentation",
  
  // ========== 智能提示 ==========
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnEnter": "on",
  
  // ========== 光標與選擇 ==========
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.selectionHighlight": true,
  
  // ========== 滾動與導航 ==========
  "editor.smoothScrolling": true,
  "editor.scrollBeyondLastLine": false,
  "editor.minimap.enabled": true,
  "editor.minimap.side": "right",
  
  // ========== 括號匹配 ==========
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  
  // ========== 其他優化 ==========
  "editor.wordWrap": "on",
  "editor.trimAutoWhitespace": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true
}

工作臺配置

json

{
  // ========== 主題與外觀 ==========
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "newUntitledFile",
  
  // ========== 側邊欄 ==========
  "workbench.activityBar.location": "top",
  "workbench.sideBar.location": "left",
  "workbench.statusBar.visible": true,
  
  // ========== 麵包屑導航 ==========
  "breadcrumbs.enabled": true,
  "breadcrumbs.filePath": "on",
  "breadcrumbs.symbolPath": "on",
  
  // ========== Zen 模式 ==========
  "zenMode.hideStatusBar": true,
  "zenMode.hideActivityBar": true,
  
  // ========== 搜索配置 ==========
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/dist": true,
    "**/build": true
  }
}

文件關聯配置

json

{
  // ========== 文件編碼 ==========
  "files.encoding": "utf8",
  "files.eol": "\n",
  
  // ========== 文件排除 ==========
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true
  },
  
  // ========== 文件關聯 ==========
  "files.associations": {
    "*.vue": "vue",
    "*.wxml": "html",
    "*.wxss": "css",
    ".env.*": "properties"
  }
}

語言特定配置

json

{
  // ========== JavaScript/TypeScript ==========
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  
  // ========== Python ==========
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit"
    }
  },
  
  // ========== JSON ==========
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features",
    "editor.tabSize": 2
  },
  
  // ========== Markdown ==========
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": false
  }
}

擴展配置

json

{
  // ========== Git ==========
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "git.openRepositoryInParentFolders": "always",
  
  // ========== Emmet ==========
  "emmet.includeLanguages": {
    "vue": "html",
    "javascript": "javascriptreact"
  },
  
  // ========== Terminal ==========
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.cursorBlinking": true
}

字體	特點	下載
Fira Code	連字支持好，開源免費	GitHub
JetBrains Mono	專為閱讀代碼設計	JetBrains
Cascadia Code	微軟出品，Windows 友好	GitHub
Source Code Pro	Adobe 出品，經典選擇	Adobe Fonts
Hack	清晰易讀，開源免費	Source Foundry
Monaco	macOS 默認，簡潔優雅	系統自帶

VSCode 查找和替換正則表達式轉義字符

`\t`	tab
`\r`	回車符號\r
`\n`	換行符號\n
`\uxxxx`	匹配 Unicode 編碼為 xxx 的字符,如\u0020 匹配空格，這個符號可以用來幫助匹配中文，後面說
`\`	特殊符號轉義，如"" ，轉義後匹配的是字符""， “(” 匹配的是括號"("
`[字符序列]`	匹配[ ]中的任意字符，如[ae]，字符 a 和字符 e 均匹配
`[^字符序列]`	匹配不在[ ]中的任意字符，如[^ae]除了 a 和 e，其他字符都匹配
`[字符 1-字符 2]`	匹配在[ ]之間的任意字符，如[a-x]，就是匹配 a 和 x 之間的所有字符（包括 a 和 x）
`.`	匹配任意單個字符(除了\n)
`\w`	匹配所有單詞字符（如"a"，“3”，“E”，但不匹配"?"，"."等）
`\W`	和\w 相反，匹配所有非單詞字符
`[\u4e00-\u9fa5]`	利用區間和\u 轉義符號，匹配中文（該區間包含 2 萬個漢字），可以當做中文版的\w 使用
`\s`	匹配空格
`\S`	和\s 相反，匹配非空格
`\d`	匹配數字字符，如"1"，“4”，"9"等
`\D`	和\d 相反，匹配除了數字字符外的其他字符
`*`	將前面的元素匹配 0 到多次，如"\d*.\d"，可以匹配"19.9"，".0",“129.9”
`+`	將前面的元素匹配 1 到多次，如"be+"，可以匹配"be"， “beeeeee”
`？`	將前面的元素匹配 0 次或者一次，如"rai?n" 可以且只可以匹配 “ran” 或者 “rain”
	n 是個數字，將前面的元素匹配 n 次，如"be{3}“可以且只可以匹配 ”beee”
	將前面的元素匹配至少 n 次，最多 m 次，如"be{1,3}" 可以且只可以匹配"be",“bee”, “beee”
`\|`	相當於"或",表示匹配由
`$n`	n 是個數字，這個是替換時使用括號（）將匹配的 patter 分割成了幾個元素，然後在替換的 patter 裡面使用，類似於變量。如果查找 patter 是"(\w+)(\s)(\w+)",那麼$1 就是(\w+),$2 是(\s),$3 是(\w+)，替換 patter 是$3$2$1,那麼替換結果就是(\w+)(\s)(\w+)。假設匹配到的是"one two"，那麼$1,$2,$3 分別為"one", " “, “two”，替換後的結果為"two one”.

正則表達式實戰示例

常用正則模式

regex

# 匹配郵箱
\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b

# 匹配 URL
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)

# 匹配 IPv4 地址
\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b

# 匹配日期 (YYYY-MM-DD)
\b\d{4}-\d{2}-\d{2}\b

# 匹配時間 (HH:MM:SS)
\b\d{2}:\d{2}:\d{2}\b

# 匹配手機號（中國）
\b1[3-9]\d{9}\b

# 匹配身份證號（中國）
\b\d{17}[\dXx]\b

# 匹配 HTML 標籤
<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)

# 匹配註釋
\/\/.*$|\/\*[\s\S]*?\*\/

# 匹配函數定義
function\s+(\w+)\s*\([^)]*\)

# 匹配 import 語句
import\s+.*?from\s+['"].*?['"]

查找替換實戰

示例 1：統一引號風格

查找：'([^']*)'
替換："$1"
說明：將單引號改為雙引號

示例 2：刪除行尾空格

查找：\s+$
替換：（空）
說明：刪除每行末尾的空格和 Tab

示例 3：交換名字順序

查找：(\w+)\s+(\w+)
替換：$2 $1
說明："John Doe" → "Doe John"

示例 4：提取中文

查找：[^\u4e00-\u9fa5]
替換：（空）
說明：刪除所有非中文字符

示例 5：格式化 CSS 顏色

查找：#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b
替換：#$1$1$2$2$3$3
說明：簡寫顏色展開 #fff → #ffffff

示例 6：批量重命名變量

查找：\boldVarName\b
替換：newVarName
說明：精確匹配整個單詞，避免部分匹配

正則測試工具

在線工具：

VS Code 內置測試：

1. Cmd/Ctrl + F 打開查找
2. 點擊 .* 圖標啟用正則
3. 輸入正則表達式
4. 高亮顯示匹配項

技巧

一次更改所有類似單詞	`Ctrl+Shift+L`
將光標移到行的末尾和開頭	`Alt + Shift + I`
代碼摺疊	`Ctrl + Shift + [` `Ctrl + Shift + ]`

必備快捷鍵大全

通用快捷鍵

功能	macOS	Windows/Linux
命令面板	Cmd+Shift+P	Ctrl+Shift+P
快速打開文件	Cmd+P	Ctrl+P
設置	Cmd+,	Ctrl+,
側邊欄切換	Cmd+B	Ctrl+B
終端開關	Ctrl+`	Ctrl+`
查找	Cmd+F	Ctrl+F
替換	Cmd+H	Ctrl+H
全局查找	Cmd+Shift+F	Ctrl+Shift+F
撤銷	Cmd+Z	Ctrl+Z
重做	Cmd+Shift+Z	Ctrl+Y
保存	Cmd+S	Ctrl+S
全選	Cmd+A	Ctrl+A
複製	Cmd+C	Ctrl+C
粘貼	Cmd+V	Ctrl+V
剪切	Cmd+X	Ctrl+X

編輯快捷鍵

功能	macOS	Windows/Linux
複製行	Shift+Alt+↓	Shift+Alt+↓
移動行	Alt+↑/↓	Alt+↑/↓
刪除行	Cmd+Shift+K	Ctrl+Shift+K
註釋代碼	Cmd+/	Ctrl+/
塊註釋	Cmd+Shift+/	Ctrl+Shift+/
縮進	Cmd+]	Ctrl+]
取消縮進	Cmd+[	Ctrl+[
跳轉到行	Ctrl+G	Ctrl+G
查找引用	Shift+F12	Shift+F12
重命名符號	F2	F2

導航快捷鍵

功能	macOS	Windows/Linux
跳轉到定義	F12	F12
Peek 定義	Alt+F12	Alt+F12
返回上一個位置	Ctrl+-	Alt+←
前進到下一個位置	Ctrl+Shift+-	Alt+→
切換到文件	Cmd+P	Ctrl+P
切換到符號	Cmd+Shift+O	Ctrl+Shift+O
大綱視圖	Cmd+Shift+O	Ctrl+Shift+O
麵包屑導航	Cmd+Shift+.	Ctrl+Shift+.

多光標操作

功能	macOS	Windows/Linux
添加下一個匹配	Cmd+D	Ctrl+D
選擇所有匹配	Cmd+Shift+L	Ctrl+Shift+L
添加光標	Option+Click	Alt+Click
列選擇	Shift+Option+拖動	Shift+Alt+拖動
撤銷上一個光標	Cmd+U	Ctrl+U

窗口管理

功能	macOS	Windows/Linux
拆分編輯器	Cmd+\	Ctrl+\
切換編輯器組	Cmd+1/2/3	Ctrl+1/2/3
移動編輯器	Cmd+Shift+P → Move	Ctrl+Shift+P → Move
最大化編輯器	Cmd+K Z	Ctrl+K Z
關閉編輯器	Cmd+W	Ctrl+W
關閉窗口	Cmd+Shift+W	Alt+F4

終端快捷鍵

功能	macOS	Windows/Linux
新建終端	Ctrl+Shift+`	Ctrl+Shift+`
拆分終端	Cmd+\	Ctrl+\
切換終端	Cmd+Shift+P → Terminal	Ctrl+Shift+P → Terminal
清屏	Cmd+K	Ctrl+L

高級編輯技巧

1. 多光標編輯

使用方法：

方法 1：逐個添加
- 選中一個詞
- Cmd/Ctrl + D 逐個選擇下一個相同詞
- 同時編輯所有選中項

方法 2：全部選擇
- 選中一個詞
- Cmd/Ctrl + Shift + L 選擇所有相同詞
- 批量修改

方法 3：手動添加
- Option/Alt + Click 在多處放置光標
- 同時編輯多個位置

方法 4：列選擇
- Shift + Option/Alt + 拖動鼠標
- 創建矩形選擇區域

應用場景：

javascript

// 場景 1：批量修改變量名
const oldName1 = 1;
const oldName2 = 2;
const oldName3 = 3;
// 選中 oldName → Cmd+D 三次 → 輸入 newName

// 場景 2：添加分號
console.log("a")
console.log("b")
console.log("c")
// Option/Alt + Click 每行末尾 → 輸入 ;

// 場景 3：批量包裹標籤
item1
item2
item3
// Cmd/Ctrl + Shift + L → 輸入 <li> → End → 輸入 </li>

2. 代碼片段（Snippets）

創建自定義代碼片段：

1. Cmd/Ctrl + Shift + P
2. 輸入 "Configure User Snippets"
3. 選擇語言（如 javascript.json）
4. 添加代碼片段

示例：React 組件模板

json

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = (${2:props}) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create a React functional component"
  }
}

使用：

輸入 rfc → Tab → 輸入組件名 → Tab → 完成

3. 任務自動化

創建 tasks.json：

json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm: build",
      "type": "npm",
      "script": "build",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "npm: dev",
      "type": "npm",
      "script": "dev",
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "npm test",
      "group": "test"
    }
  ]
}

運行任務：

Cmd/Ctrl + Shift + P → Tasks: Run Task
或使用快捷鍵 Cmd/Ctrl + Shift + B（構建）

4. 調試配置

創建 launch.json：

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.js"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Python: Current File",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

調試快捷鍵：

F5 - 啟動調試
Shift+F5 - 停止調試
F9 - 切換斷點
F10 - 單步跳過
F11 - 單步進入
Shift+F11 - 單步跳出

必備插件推薦

通用增強

插件	功能	評分
Chinese (Simplified)	中文界面	⭐⭐⭐⭐⭐
Material Icon Theme	美觀的文件圖標	⭐⭐⭐⭐⭐
One Dark Pro	流行主題	⭐⭐⭐⭐⭐
Bracket Pair Colorizer	彩色括號匹配	⭐⭐⭐⭐
Error Lens	錯誤實時顯示	⭐⭐⭐⭐⭐
Todo Tree	TODO 管理	⭐⭐⭐⭐⭐

前端開發

插件	功能	評分
ESLint	JavaScript 代碼檢查	⭐⭐⭐⭐⭐
Prettier	代碼格式化	⭐⭐⭐⭐⭐
Auto Rename Tag	自動重命名標籤	⭐⭐⭐⭐⭐
Live Server	實時預覽服務器	⭐⭐⭐⭐⭐
CSS Peek	CSS 定義跳轉	⭐⭐⭐⭐
IntelliSense for CSS	CSS 智能提示	⭐⭐⭐⭐

後端開發

插件	功能	評分
Python	Python 支持	⭐⭐⭐⭐⭐
Go	Go 語言支持	⭐⭐⭐⭐⭐
Java Extension Pack	Java 開發套件	⭐⭐⭐⭐⭐
PHP Intelephense	PHP 智能提示	⭐⭐⭐⭐⭐
REST Client	API 測試	⭐⭐⭐⭐⭐

Git 增強

插件	功能	評分
GitLens	Git 增強工具	⭐⭐⭐⭐⭐
Git Graph	Git 可視化	⭐⭐⭐⭐⭐
Git History	Git 歷史記錄	⭐⭐⭐⭐

Docker & DevOps

插件	功能	評分
Docker	Docker 支持	⭐⭐⭐⭐⭐
Remote - SSH	遠程開發	⭐⭐⭐⭐⭐
Remote - Containers	容器開發	⭐⭐⭐⭐⭐
Kubernetes	K8s 支持	⭐⭐⭐⭐

productivity

插件	功能	評分
Code Spell Checker	拼寫檢查	⭐⭐⭐⭐⭐
Path Intellisense	路徑自動補全	⭐⭐⭐⭐⭐
Import Cost	顯示導入包大小	⭐⭐⭐⭐
Thunder Client	輕量級 API 客戶端	⭐⭐⭐⭐⭐

常見問題解答

Q1: VS Code 啟動慢怎麼辦？

解決方案：

bash

# 1. 檢查擴展加載時間
Cmd/Ctrl + Shift + P → "Show Running Extensions"

# 2. 禁用不常用的擴展
# 擴展面板 → 右鍵擴展 → Disable

# 3. 使用 Profile 功能
# 創建不同的 Profile 用於不同項目
# File → Preferences → Profiles

# 4. 清理緩存
# 刪除以下目錄後重啟：
# macOS: ~/Library/Application Support/Code/
# Windows: %APPDATA%/Code/
# Linux: ~/.config/Code/

Q2: 如何同步配置到多臺設備？

方法 1：Settings Sync（推薦）

1. 登錄 GitHub 賬戶
2. Cmd/Ctrl + Shift + P → "Turn on Settings Sync"
3. 選擇要同步的內容：
   ☑️ Settings
   ☑️ Keyboard Shortcuts
   ☑️ User Snippets
   ☑️ User Tasks
   ☑️ Extensions
   
4. 在其他設備登錄同一賬戶即可自動同步

方法 2：手動備份

bash

# 備份配置目錄
# macOS
cp -r ~/Library/Application\ Support/Code/User ~/Backup/vscode-config

# Windows
xcopy %APPDATA%\Code\User C:\Backup\vscode-config /E /I

# Linux
cp -r ~/.config/Code/User ~/Backup/vscode-config

# 恢復時複製回去即可

Q3: 如何自定義快捷鍵？

操作步驟：

1. Cmd/Ctrl + K, Cmd/Ctrl + S 打開鍵盤快捷方式
2. 搜索要修改的命令
3. 點擊鉛筆圖標
4. 按下新的快捷鍵組合
5. 或直接編輯 keybindings.json

常用自定義快捷鍵示例：

json

[
  {
    "key": "cmd+enter",
    "command": "editor.action.insertLineAfter",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+l",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+shift+d",
    "command": "workbench.view.debug",
    "when": "viewContainer.workbench.view.debug.enabled"
  }
]

Q4: 如何提高大型項目性能？

優化建議：

json

{
  // 排除不必要的文件
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/build/**": true
  },
  
  // 限制搜索範圍
  "search.followSymlinks": false,
  "search.useIgnoreFiles": true,
  
  // 減少 IntelliSense 負擔
  "typescript.disableAutomaticTypeAcquisition": true,
  
  // 禁用不必要的功能
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "none"
}

Q5: 如何使用 Remote Development？

Remote - SSH 配置：

1. 安裝 Remote - SSH 擴展
2. Cmd/Ctrl + Shift + P → "Remote-SSH: Connect to Host"
3. 輸入 ssh user@hostname
4. 首次連接會安裝 VS Code Server
5. 之後就像本地開發一樣

Remote - Containers 配置：

1. 安裝 Remote - Containers 擴展
2. 在項目根目錄創建 .devcontainer 文件夾
3. 添加 devcontainer.json 配置
4. Cmd/Ctrl + Shift + P → "Reopen in Container"

總結

掌握 VS Code 的高效使用技巧：

✅ 命令行工具：快速打開文件和項目
✅ 自定義配置：打造個性化的開發環境
✅ 正則表達式：強大的查找替換能力
✅ 快捷鍵：大幅提升編輯效率
✅ 插件生態：擴展無限可能

關鍵收益：

🎯 開發效率提升 50%+
⚡ 減少重複操作，專注核心邏輯
🎨 個性化配置，舒適開發體驗
🔧 強大的調試和診斷工具
🌐 跨平臺無縫切換

下一步學習：

開始打造你的專屬開發利器吧！🚀✨

VS Code 完全指南 | 高效開發技巧、快捷鍵與配置優化教程 ​

為什麼選擇 VS Code？ ​

核心優勢 ​

適用場景 ​

命令行工具 ​

命令行工具詳解 ​

安裝命令行工具 ​

常用命令詳解 ​

自定義設置 ​

Settings.json 完整配置指南 ​

如何打開 settings.json ​

編輯器核心配置 ​

工作臺配置 ​

文件關聯配置 ​

語言特定配置 ​

擴展配置 ​

推薦編程字體 ​

VSCode 查找和替換正則表達式轉義字符 ​

正則表達式實戰示例 ​

常用正則模式 ​

查找替換實戰 ​

正則測試工具 ​

技巧 ​

必備快捷鍵大全 ​

通用快捷鍵 ​

編輯快捷鍵 ​

導航快捷鍵 ​

多光標操作 ​

窗口管理 ​

終端快捷鍵 ​

高級編輯技巧 ​

1. 多光標編輯 ​

2. 代碼片段（Snippets） ​

3. 任務自動化 ​

4. 調試配置 ​

必備插件推薦 ​

通用增強 ​

前端開發 ​

後端開發 ​

Git 增強 ​

Docker & DevOps ​

productivity ​

常見問題解答 ​

Q1: VS Code 啟動慢怎麼辦？ ​

Q2: 如何同步配置到多臺設備？ ​

Q3: 如何自定義快捷鍵？ ​

Q4: 如何提高大型項目性能？ ​

Q5: 如何使用 Remote Development？ ​

總結 ​

VS Code 完全指南 | 高效開發技巧、快捷鍵與配置優化教程

為什麼選擇 VS Code？

核心優勢

適用場景

命令行工具

命令行工具詳解

安裝命令行工具

常用命令詳解

自定義設置

Settings.json 完整配置指南

如何打開 settings.json

編輯器核心配置

工作臺配置

文件關聯配置

語言特定配置

擴展配置

推薦編程字體

VSCode 查找和替換正則表達式轉義字符

正則表達式實戰示例

常用正則模式

查找替換實戰

正則測試工具

技巧

必備快捷鍵大全

通用快捷鍵

編輯快捷鍵

導航快捷鍵

多光標操作

窗口管理

終端快捷鍵

高級編輯技巧

1. 多光標編輯

2. 代碼片段（Snippets）

3. 任務自動化

4. 調試配置

必備插件推薦

通用增強

前端開發

後端開發

Git 增強

Docker & DevOps

productivity

常見問題解答

Q1: VS Code 啟動慢怎麼辦？

Q2: 如何同步配置到多臺設備？

Q3: 如何自定義快捷鍵？

Q4: 如何提高大型項目性能？

Q5: 如何使用 Remote Development？

總結