VS Code

Visual Studio Code 是微软开发的开源代码编辑器，凭借轻量快速、丰富的扩展生态和内置 Git、调试、终端功能，成为前端开发和多语言通用开发的主流选择。

重度 Java / Spring Boot 开发推荐 IDEA，前端 / Python / Go / 全栈轻量开发 VS Code 更灵活。

界面布局

┌──────────────────────────────────────────┐
│ 活 │ 侧边栏（文件树 / 搜索 / Git / 扩展）  │
│ 动 │────────────────────────────────────  │
│ 栏 │ 编辑区（支持分屏，多 Tab）             │
│    │────────────────────────────────────  │
│    │ 面板（终端 / 问题 / 输出 / 调试控制台） │
└────┴────────────────────────────────────  ┘
       状态栏（分支 / 语言 / 行列号）

区域	快捷键
文件 / 搜索 / Git / 扩展	Ctrl+Shift+E/F/G/X
侧边栏显隐	Ctrl+B
终端面板	Ctrl+`
命令面板	Ctrl+Shift+P
快速打开文件	Ctrl+P

必备快捷键

编辑

快捷键	功能
Ctrl+D	选中下一个相同词（多光标编辑）
Ctrl+Shift+L	选中所有相同词（批量重命名）
Alt+↑/↓	移动当前行
Shift+Alt+↑/↓	复制当前行到上/下
Ctrl+Shift+K	删除当前行
Ctrl+/	切换行注释
Shift+Alt+F	格式化文档
F2	重命名符号（全局）
Ctrl+.	快速修复（Quick Fix）

导航

快捷键	功能
Ctrl+P	快速打开文件
Ctrl+G	跳转到指定行
F12	跳转到定义
Alt+F12	查看定义（Peek，不跳转）
Shift+F12	查找所有引用
Ctrl+Shift+O	跳转到文件内 Symbol
Ctrl+\	分屏编辑
Ctrl+Tab	在打开的文件间切换

多光标

Alt+Click              在点击位置添加光标
Ctrl+Alt+↑/↓           向上/下添加光标
Ctrl+D                 选中下一个相同词
Ctrl+Shift+L           选中所有相同词

设置（Settings）

打开方式

Ctrl+,                                     图形化设置界面
Ctrl+Shift+P → Open User Settings (JSON)   直接编辑 settings.json

常用 settings.json

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/__pycache__": true
  },
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "git.autofetch": true,
  "git.confirmSync": false
}

工作区设置（.vscode/settings.json）

针对当前项目覆盖用户设置，提交到 Git 供团队共享：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  },
  "python.defaultInterpreterPath": ".venv/bin/python"
}

推荐扩展

通用

扩展	用途
GitLens	Git 历史、blame、比较，大幅增强内置 Git
Prettier	代码格式化（JS / TS / CSS / HTML / JSON）
ESLint	JavaScript / TypeScript 代码检查
Error Lens	将错误/警告直接显示在代码行末
Path Intellisense	文件路径自动补全
Todo Tree	高亮 TODO/FIXME 注释并汇总到侧边栏

前端

扩展	用途
ES7+ React/Redux Snippets	React 代码片段
Auto Rename Tag	HTML 标签重命名时自动同步闭合标签
Tailwind CSS IntelliSense	Tailwind 类名补全与预览
Volar	Vue 3 官方语言支持

Python

扩展	用途
Python（ms-python）	Python 语言支持（含 Pylance）
Black Formatter	Python 代码格式化
Ruff	极速 Python linter

远程开发

扩展	用途
Remote - SSH	SSH 连接远程服务器，在远端运行 VS Code
Dev Containers	在 Docker 容器内开发，统一团队环境
Remote - WSL	Windows 上连接 WSL 开发

调试（Debug）

配置 .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Python",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    },
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js"
    }
  ]
}

调试快捷键

操作	快捷键
开始/继续调试	F5
单步跳过	F10
单步进入	F11
单步跳出	Shift+F11
添加/取消断点	F9
停止调试	Shift+F5

Git 集成

VS Code 内置 Git 面板（Ctrl+Shift+G），支持：

• 暂存（Stage）/ 取消暂存单行或整个文件
• 提交（含消息编辑）
• 查看 diff（行级高亮）
• 合并冲突编辑器（三路合并视图）
• 分支创建 / 切换 / 删除

配合 GitLens 扩展可查看每行代码的最近提交（inline blame）。详细 Git 工作流参见 Git。

Remote SSH

通过 Remote - SSH 扩展，像本地一样编辑远程服务器代码：

1. 安装 Remote - SSH 扩展
2. Ctrl+Shift+P → Remote-SSH: Connect to Host
3. 输入 user@host 或配置 ~/.ssh/config

# ~/.ssh/config
Host dev-server
    HostName 192.168.1.100
    User ubuntu
    IdentityFile ~/.ssh/id_rsa

连接后，终端、文件树、调试器均在远程服务器运行，本地仅负责渲染 UI。

代码片段（Snippets）

Ctrl+Shift+P → Configure User Snippets 自定义代码片段：

// python.json
{
  "Print f-string": {
    "prefix": "plog",
    "body": ["print(f'${1:var} = {${1:var}}')"],
    "description": "Print variable with f-string"
  },
  "Main guard": {
    "prefix": "main",
    "body": ["if __name__ == '__main__':", "    ${1:main()}"]
  }
}

任务配置（.vscode/tasks.json）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "shell",
      "command": "uv run pytest",
      "group": { "kind": "test", "isDefault": true },
      "presentation": { "reveal": "always" }
    }
  ]
}

Ctrl+Shift+P → Run Task 执行，或绑定快捷键触发。

Profile（配置档案）

不同语言/场景使用不同的扩展和设置，避免相互干扰：

Ctrl+Shift+P → Profiles: Create Profile

例如：

• Python Profile — 只装 Python、Black、Ruff，不带前端扩展
• Frontend Profile — Volar、Prettier、Tailwind IntelliSense
• 默认 — 通用工具

切换 Profile：点击左下角齿轮图标 → 选择 Profile，或命令面板搜索 Switch Profile。

---

自定义快捷键（keybindings.json）

Ctrl+Shift+P → Open Keyboard Shortcuts (JSON)

[
  // 在终端和编辑器间切换
  { "key": "ctrl+`", "command": "workbench.action.terminal.toggleTerminal" },
  // 格式化并保存
  { "key": "ctrl+shift+s", "command": "editor.action.formatDocument",
    "when": "editorTextFocus" },
  // 关闭所有编辑器
  { "key": "ctrl+shift+w", "command": "workbench.action.closeAllEditors" }
]

---

工作区推荐扩展（.vscode/extensions.json）

将扩展推荐提交到仓库，团队克隆后自动提示安装：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "vue.volar"
  ]
}

Ctrl+Shift+P → Extensions: Show Recommended Extensions 可一键安装全部推荐。

---

正则搜索与替换

Ctrl+H 打开替换面板，点击 .* 启用正则：

查找：import \{ (\w+) \} from '(\w+)'
替换：import type { $1 } from '$2'

文件内替换用 Ctrl+H，全项目替换用 Ctrl+Shift+H，支持「仅替换选中区域」。

实用正则场景

需求	查找	替换
删除空行	^\s*\n	（空）
末尾空格	\s+$	（空）
驼峰转下划线	([a-z])([A-Z])	$1_$2

---

专注模式

模式	快捷键	效果
Zen Mode	Ctrl+K Z	全屏，隐藏所有 UI，只留编辑区
居中布局	View → Appearance → Center Layout	编辑区居中，两侧留白
折叠侧边栏	Ctrl+B	隐藏侧边栏，最常用

---

折叠代码

操作	快捷键
折叠当前代码块	Ctrl+Shift+[
展开当前代码块	Ctrl+Shift+]
折叠所有	Ctrl+K Ctrl+0
展开所有	Ctrl+K Ctrl+J
按级别折叠（1-9）	Ctrl+K Ctrl+1~9

---

相关链接

• Git — VS Code 内置 Git 操作与 GitLens 深度集成
• IDEA — JetBrains IDE，Java / Spring Boot 首选
• Node — 前端开发 Node.js 环境配置
• uv — Python 项目推荐配合 VS Code Python 扩展使用