VSCode 进阶配置：让你的编码效率翻倍的 15 个技巧

写在前面

VSCode 是 2025 年最主流的代码编辑器，没有之一。但是大部分新手只用了它 10% 的能力。这篇文章把我每天都在用的 15 个技巧整理出来，按学完之后性价比从高到低排序。

1. 必背的 10 个快捷键

如果说本文只值一招，那就是这一招：记快捷键。下面 10 个用一个月，你会发现写代码慢三倍是因为以前一直在点鼠标。

跳到任何文件          ⌘ + P            (Ctrl + P)
跳到任何命令          ⌘ + Shift + P    (Ctrl + Shift + P)
全局搜索              ⌘ + Shift + F
替换                  ⌘ + Shift + H
注释切换              ⌘ + /
多光标                ⌘ + D / Alt + 点击
向上 / 向下移动当前行  Alt + ↑ / ↓
复制当前行             Shift + Alt + ↓
删除当前行             ⌘ + Shift + K
分屏                  ⌘ + \

macOS 是 ⌘，Windows 是 Ctrl。

多光标的威力

按住 Alt 点击多个位置，可以同时编辑多处。或者选中一个词，反复按 ⌘+D 选中下一个相同的词，一次性改名。

学会多光标，重构 50 行代码只要 5 秒。

2. 必装的 8 个插件（按方向）

通用：

Prettier — 自动格式化
ESLint — 自动找错
GitLens — Git 增强（看每行是谁、什么时候改的）
Error Lens — 错误提示直接显示在行尾，强烈推荐
Path Intellisense — 路径自动补全

前端：

ES7+ React/Redux/React-Native snippets — 快速生成组件
Auto Rename Tag — 改一个标签同时改成对的闭合
CSS Peek — Cmd 点击 className 跳到 CSS 定义

装插件不在多，装一个用熟一个。

3. 让保存自动格式化（最常用配置）

.vscode/settings.json 或全局 settings.json：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.minimap.enabled": false,
  "editor.cursorBlinking": "smooth",
  "workbench.tree.indent": 16
}

从此再也没人因为你的代码缩进不一致而 review 失败。

4. 项目级配置：`.vscode/` 文件夹

把 .vscode/settings.json 提交到仓库，可以让所有协作者使用同一套配置：

// .vscode/settings.json
{
  "editor.tabSize": 2,
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

新人 clone 项目后，VSCode 会提示"是否安装推荐插件"。这就是所谓的工程化第一步。

5. 调试器（你绝对要学）

很多新手只会 console.log。学会用调试器后，你会感叹"我以前怎么活下来的"。

Node.js 项目

.vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

操作：

在代码行号左边点一下 → 出现红点（断点）
按 F5 启动调试
程序停在断点处 → 你能看到所有变量的值
按 F10 单步、F11 进入函数

学会断点 + Watch + Call Stack 这三件套，你能解决 99% 的诡异 bug。

6. 自定义代码片段（Snippets）

经常写的模板，用 snippet 一键生成。

File → Preferences → Configure User Snippets：

{
  "Console log": {
    "prefix": "cl",
    "body": ["console.log('🚀 ~ $1:', $1);"],
    "description": "Quick console.log"
  },
  "Async function": {
    "prefix": "afn",
    "body": [
      "async function ${1:name}(${2:params}) {",
      "  $0",
      "}"
    ]
  }
}

输入 cl 然后 Tab，就能秒生成 console.log('🚀 ~ user:', user);。

7. 全局搜索的高级用法

⌘ + Shift + F：

点 .* 图标启用正则
点 Aa 区分大小写
files to include 可写 src/**/*.tsx
files to exclude 可写 **/*.test.ts

几乎所有"重构"的第一步都是从全局搜索开始。

8. 快速导航文件

⌘ + P 后：

: + 行号 → 跳到指定行
@ + 名字 → 在当前文件里跳函数 / 变量
# + 名字 → 在工作区搜符号

例：⌘ + P 输入 posts.ts:42 → 直接跳到该文件第 42 行。

9. Zen 模式（专注写代码）

⌘ + K Z：进入只剩代码的极简界面。再按一次 Esc Esc 退出。

适合写专注度高的代码或者录屏。

10. 终端集成

按 ⌘ + ` 唤起内置终端。配合：

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13
}

可以在 package.json 的 scripts 旁边点 ▶️ 直接跑命令。告别窗口切换。

11. Git 集成

VSCode 自带 Git 功能：

左侧第三个图标查看 staged / unstaged
编辑器右上角"…"提供 commit / push 等操作
GitLens 装上后，每行旁边会有"上次改动信息"

12. 任务（Tasks）：把命令一键化

.vscode/tasks.json：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Dev",
      "type": "shell",
      "command": "npm run dev",
      "problemMatcher": []
    }
  ]
}

之后 ⌘ + Shift + P → Run Task → 选 Dev，比手动敲命令快。

13. 字体连字（Ligature）

让 =>, ===, != 显示成一个符号，看起来像"专业开发者"：

{
  "editor.fontFamily": "JetBrains Mono, 'Fira Code', monospace",
  "editor.fontLigatures": true
}

14. 远程开发

VSCode 装 Remote - SSH 插件后，可以像编辑本地一样编辑远程服务器上的文件。

F1 → Remote-SSH: Connect to Host → 输入 user@host

服务器上的 Node、Python 环境直接可用，再也不用 vim 写代码。

15. 同步设置

Settings Sync（VSCode 内置）让你在多台机器上保持一致的配置、插件、快捷键、片段。

新机器登录账号 → 一切搞定。

速查：今天必做的 5 件事

✅ 装 Prettier + ESLint + Error Lens + GitLens
✅ 在 settings 里开启 formatOnSave
✅ 背熟前面那 10 个快捷键
✅ 给项目加 .vscode/settings.json 和 .vscode/extensions.json
✅ 自己写 3 个 snippet

「工欲善其事，必先利其器。」 —— 把 VSCode 调成"你专属的工作站"，每天能省下半小时。一年就是 180 个小时，相当于多了一个工作月。