← 返回工具箱
VSCode 配置完全指南
📅 2026-04-19
⏱️ 约 18 分钟
🏷️ 开发工具
Visual Studio Code（VSCode）是目前最流行的代码编辑器，由微软开发，免费开源，支持全平台。本文覆盖从基础配置到高级扩展的完整方案，帮助你用 VSCode 搭建专业的开发和写作环境。
一、编辑器核心配置
打开设置（Ctrl + ,），推荐以下基础配置：
{
"editor.fontFamily": "'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace",
"editor.fontSize": 14,
"editor.lineHeight": 1.6,
"editor.fontLigatures": true,
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"files.autoSave": "afterDelay",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"files.exclude": {
"**/.git": true,
"**/node_modules": true
},
"editor.minimap.enabled": true,
"editor.renderWhitespace": "boundary",
"editor.rulers": [80, 120],
"editor.cursorBlinking": "smooth",
"workbench.colorTheme": "GitHub Dark Default"
}
💡 Fira Code 连字效果
开启
fontLigatures 后，
=> 显示为箭头
→，
!= 显示为
≠，
:: 显示为
::。推荐搭配 Fira Code 或 JetBrains Mono 字体使用。
二、必备扩展推荐
1. 界面与语言
| 扩展 | 说明 |
|---|
| Chinese (Simplified) Language Pack | 中文界面 |
| GitHub Theme | GitHub 同款配色（推荐 Dark Default / Dimmed） |
| Bracket Pair Colorizer 2 | 括号对彩色高亮，快速配对 |
| Indent Rainbow | 缩进彩色区分，看嵌套结构一目了然 |
| Error Lens | 直接在行尾显示错误/警告，不再需要看 Problems 面板 |
2. 核心开发扩展
| 扩展 | 说明 |
|---|
| GitLens | 增强 Git，编辑器内直接看行级提交历史、作者、Blame |
| Remote - SSH | 通过 SSH 直接编辑远程服务器代码，无需同步 |
| Docker | 管理容器/镜像/网络，直接在 VSCode 里操作 Docker |
| Remote - Containers | 在 Docker 容器内开发，保持一致的容器内开发体验 |
| REST Client | 在 .http 文件中直接发送 HTTP 请求，调试 API 超方便 |
3. 语言支持
| 扩展 | 语言/框架 |
|---|
| Python | Python 语言支持、Lint、格式化 |
| ESLint | JavaScript/TypeScript 代码检查 |
| Prettier | 代码格式化（支持 JS/TS/CSS/HTML/Markdown 等） |
| YAML | YAML 文件语法高亮和验证 |
| JSON Crack | 可视化 JSON 结构 |
| ShellCheck | Shell 脚本错误检查 |
4. Markdown 写作扩展
| 扩展 | 说明 |
|---|
| Markdown All in One | 自动目录、快捷键、数学公式支持、TOC 生成 |
| Markdown Preview Enhanced | 增强预览，支持 Mermaid、流程图、pandoc 导出 |
| Paste Image | 截图后 Ctrl + V 直接粘贴，自动保存到 assets 目录 |
| markdownlint | Markdown 格式检查，规范写作风格 |
三、Git 集成配置
VSCode 内置 Git 支持，安装 GitLens 后功能大幅增强：
💡 GitLens 核心功能
- 将光标放到任意一行代码，直接看到该行的提交记录、作者、时间
- 点击提交记录可以看到完整的 diff
- 侧边栏显示文件历史 Commits 图谱
- 对比不同分支的代码差异
推荐 Git 配置
[core]
editor = code --wait
autocrlf = input
[alias]
s = status -sb
l = log --oneline -10
d = diff
co = checkout
[pull]
rebase = false
四、Remote SSH 远程开发
Remote SSH 是 VSCode 最强大的功能之一，让你在本地编辑器里直接开发和调试远程服务器代码。
连接配置
按 Ctrl + Shift + P → 输入 Remote-SSH: Connect to Host → 选择 Configure SSH Host File → 编辑 SSH 配置文件：
Host prod-server
HostName 192.168.1.100
User ubuntu
Port 22
IdentityFile ~/.ssh/id_ed25519
ForwardAgent yes
Host dev-server
HostName dev.example.com
User developer
Port 2121
ProxyJump bastion.example.com
IdentityFile ~/.ssh/id_ed25519
工作流程
1. Ctrl+Shift+P → Remote-SSH: Connect to Host → 选择配置好的服务器
2. 首次连接会自动在远程服务器安装 VSCode Server
3. 正常打开文件夹、安装扩展（扩展会同时安装到本地和远程）
4. 远程 terminal 直接在 VSCode 底部面板打开
5. 远程 debugger 配置和本地完全一致
💡 远程扩展安装技巧
Remote SSH 连接后，扩展有三种安装位置：
Local：本地扩展（如主题、GitLens）
Remote-SSH:Installed：在远程服务器安装（如语言服务器、调试器）
Disabled：当前环境不支持的扩展
推荐把
Prettier、ESLint、Python、Pylance 等语言工具装在 Remote 上，确保和你在服务器上实际运行的工具版本一致。
五、调试配置
VSCode 内置调试器，支持 Node.js、Python、Go、Java、C++ 等语言。
Node.js 调试
在项目根目录创建 .vscode/launch.json：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动服务",
"program": "${workspaceFolder}/server.js",
"runtimeExecutable": "node",
"console": "integratedTerminal",
"restart": true,
"env": { "NODE_ENV": "development" }
},
{
"type": "node",
"request": "attach",
"name": "附加到进程",
"port": 9229,
"restart": true
}
]
}
Python 调试
{
"version": "0.2.0",
"configurations": [
{
"type": "debugpy",
"request": "launch",
"name": "Python: 当前文件",
"program": "${file}",
"console": "integratedTerminal",
"justMyCode": true
}
]
}
六、Tasks 任务自动化
用 .vscode/tasks.json 定义常用任务，免去每次手动敲命令：
{
"version": "2.0.0",
"tasks": [
{
"label": "npm: build",
"type": "shell",
"command": "npm run build",
"group": "build",
"problemMatcher": ["$tsc"],
"presentation": {
"reveal": "always",
"panel": "new"
}
},
{
"label": "npm: dev",
"type": "shell",
"command": "npm run dev",
"isBackground": true,
"group": "none",
"presentation": {
"reveal": "always",
"panel": "new"
}
},
{
"label": "Shell: 清理缓存",
"type": "shell",
"command": "rm -rf node_modules/.cache && echo done",
"group": "none",
"problemMatcher": []
}
]
}
按 Ctrl + Shift + B 运行默认构建任务，或 Ctrl + Shift + P → Tasks: Run Task 选择其他任务。
七、Settings Sync 同步配置
VSCode 内置 Settings Sync 功能，可以用 Microsoft/GitHub 账号同步所有配置到多台设备：
1. Ctrl+Shift+P → 启用 Settings Sync
2. 登录 Microsoft 或 GitHub 账号
3. 勾选要同步的内容：Settings / Extensions / Keyboard Shortcuts / UI State
4. 完成后在新设备登录同一账号，自动同步
💡 推荐 Settings Sync + dotfiles 组合
Settings Sync 同步 VSCode 配置（扩展、快捷键、设置）。
dotfiles（如 ~/.bashrc、~/.gitconfig、~/.ssh/config）用 GitHub Gist 同步。
两者的并集就是你完整的开发环境，任何新机器 10 分钟内可以完全复原。
八、快捷键速查
| 快捷键 | 功能 |
|---|
Ctrl + P | 快速打开文件 |
Ctrl + Shift + P | 命令面板 |
Ctrl + Shift + F | 全局搜索 |
Ctrl + D | 选中当前词，下一个相同词也选中（多光标） |
Alt + ↑ / ↓ | 整行上移/下移 |
Ctrl + Shift + K | 删除整行 |
Alt + Shift + F | 格式化文档 |
Ctrl + ` | 打开终端 |
F12 | 跳转到定义 |
Alt + F12 | peek 定义（不跳转） |
Ctrl + H | 文件内替换 |
Ctrl + B | 切换侧边栏 |
Ctrl + \ | 分屏编辑器 |
Ctrl + K Ctrl + [ | 折叠所有区域 |
Ctrl + K Ctrl + ] | 展开所有区域 |
VSCode
IDE
编辑器
Remote SSH
Git
开发环境
← 返回工具箱