我的 VS Code 高效配置清单 - 宋先生的技术笔记

VS Code 是目前最流行的代码编辑器，但很多人只用到了它 20% 的功能。本文分享我多年来打磨的核心配置，涵盖 settings.json、快捷键、必备插件和工作流优化。有些配置可能不那么显而易见，但能实实在在提升日常开发效率。

一、settings.json 核心配置

VS Code 的配置入口是 settings.json。以下是我每台机器都会同步的配置：

{
  // === 编辑器行为 ===
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 24,
  "editor.tabSize": 2,
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.minimap.enabled": false,
  "editor.stickyScroll.enabled": true,

  // === 自动保存与格式化 ===
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "files.autoSave": "onFocusChange",
  "files.autoSaveDelay": 1000,

  // === 文件与导航 ===
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true
  },
  "workbench.startupEditor": "none",
  "workbench.tree.indent": 20,
  "explorer.compactFolders": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,

  // === 终端 ===
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'CaskaydiaCove Nerd Font', 'JetBrains Mono', Consolas",
  "terminal.integrated.defaultLocation": "editor",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.smoothScrolling": true,
  "terminal.integrated.enableMultiLinePasteWarning": false,

  // === 搜索 ===
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/coverage": true,
    "**/*.lock": true
  },
  "search.quickOpen.includeHistory": false,

  // === Git ===
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.inputValidationSubjectLength": 72,
  "diffEditor.ignoreTrimWhitespace": false,
  "diffEditor.renderSideBySide": true
}

几个值得重点说明的选项：

stickyScroll.enabled：滚动时当前作用域的类名/函数名固定在顶部，阅读长文件不迷路
terminal.integrated.defaultLocation: "editor"：终端在编辑器区域打开，而非底部面板，对宽屏显示器非常友好
explorer.compactFolders: false：禁用文件夹紧凑模式，让目录结构一目了然

二、快捷键自定义

以下快捷键经过长期打磨，覆盖了我最高频的操作：

// keybindings.json
[
  {
    "key": "ctrl+e",
    "command": "workbench.action.quickOpen",
    "when": "!terminalFocus"
  },
  {
    "key": "ctrl+shift+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+shift+f",
    "command": "workbench.view.search"
  },
  {
    "key": "ctrl+shift+n",
    "command": "workbench.action.newWindow"
  },
  {
    "key": "ctrl+k ctrl+r",
    "command": "editor.action.goToReferences"
  },
  {
    "key": "ctrl+alt+l",
    "command": "editor.action.formatDocument"
  },
  {
    "key": "ctrl+shift+enter",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+shift+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "ctrl+shift+f12",
    "command": "workbench.actions.view.problems"
  }
]

三、必备插件清单

3.1 语言增强

插件	用途
Prettier	统一的代码格式化
ESLint	JavaScript/TypeScript 静态分析
Path Intellisense	路径自动补全
GitLens	Git 历史、Blame 注解、代码审查
Error Lens	行内显示错误/警告信息

3.2 效率工具

插件	用途
VS Code Pets	编辑器中养一只小宠物减压
Todo Tree	高亮所有 TODO/FIXME 注释，侧边栏汇总
Code Runner	一键运行代码片段
Live Server	本地开发服务器 + 热更新
Markdown Preview Enhanced	Markdown 实时预览
Remote - SSH	远程开发，连接远程服务器写代码

3.3 界面美化

插件	用途
One Dark Pro	经典主题，护眼且清晰
Material Icon Theme	文件图标，一眼识别文件类型
Dracula Official	高对比度主题，适合演示

四、用户代码片段

代码片段（Snippets）是避免重复劳动的利器。以下是我常用的几个：

// JavaScript / TypeScript 代码片段
// 文件: snippets/javascript.json
{
  "Console Log with Label": {
    "prefix": "cl",
    "body": "console.log('[$1]:', $1);$2",
    "description": "带标签的 console.log"
  },
  "Async Function": {
    "prefix": "afn",
    "body": [
      "async function ${1:name}(${2:params}) {",
      "  try {",
      "    return await ${3:expression};",
      "  } catch (err) {",
      "    console.error('${1:name} failed:', err);",
      "    throw err;",
      "  }",
      "}"
    ],
    "description": "async function with try/catch"
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    ",
      "      $0",
      "    ",
      "  );",
      "}"
    ],
    "description": "React 函数组件（TypeScript）"
  },
  "Express Route Handler": {
    "prefix": "erh",
    "body": [
      "router.${1:get}('/${2:path}', async (req, res, next) => {",
      "  try {",
      "    const result = await ${3:query};",
      "    res.json({ success: true, data: result });",
      "  } catch (err) {",
      "    next(err);",
      "  }",
      "});"
    ],
    "description": "Express route handler"
  }
}

五、多行光标与选择技巧

VS Code 的多行编辑能力是提升编辑速度的关键。花 10 分钟掌握这些快捷键，回报是持久的：

// 多行光标
Alt + Click         → 在任意位置添加光标
Ctrl + Alt + ↑/↓    → 向上/下添加光标
Ctrl + D            → 选中下一个匹配项
Ctrl + Shift + L    → 选中所有匹配项

// 文本选择
Ctrl + Shift + →/←  → 按词选择
Ctrl + D            → 选中等值
Alt + Shift + →/←   → 扩大/缩小选区

// 行操作
Alt + ↑/↓           → 上移/下移行
Alt + Shift + ↑/↓   → 复制行
Ctrl + Shift + K    → 删除行
Ctrl + Enter        → 下方插入行
Ctrl + Shift + Enter → 上方插入行

// 代码折叠
Ctrl + Shift + [    → 折叠
Ctrl + Shift + ]    → 展开
Ctrl + K Ctrl + 0   → 折叠所有
Ctrl + K Ctrl + J   → 展开所有

六、任务自动化和多任务运行

VS Code 的任务系统可以替代多个终端标签页。配合 terminals 配置，一键启动所有开发服务：

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Dev: All Services",
      "dependsOn": ["Dev: API", "Dev: Frontend", "Dev: Database"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "Dev: API",
      "type": "shell",
      "command": "npm run dev",
      "options": { "cwd": "${workspaceFolder}/api" },
      "presentation": {
        "group": "dev",
        "panel": "dedicated"
      }
    },
    {
      "label": "Dev: Frontend",
      "type": "shell",
      "command": "npm run dev",
      "options": { "cwd": "${workspaceFolder}/frontend" },
      "presentation": {
        "group": "dev",
        "panel": "dedicated"
      }
    },
    {
      "label": "Dev: Database",
      "type": "shell",
      "command": "docker compose up db",
      "presentation": {
        "group": "dev",
        "panel": "dedicated"
      }
    }
  ]
}

按 Ctrl + Shift + B 即可一键启动所有服务，每个服务都有自己的专属终端标签页。

七、调试配置实战

一个项目级 launch.json 配置，覆盖前后端断点调试：

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug API",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--inspect", "src/index.js"],
      "skipFiles": ["<node_internals>/**"],
      "env": {
        "NODE_ENV": "development",
        "PORT": "3000"
      }
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Process",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Frontend",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/frontend/src"
    }
  ],
  "compounds": [
    {
      "name": "Debug Full Stack",
      "configurations": ["Debug API", "Debug Frontend"]
    }
  ]
}

compound launch 是很多人不知道的功能——一个快捷键同时启动前后端调试器，断点可以同时命中 Express 路由和 React 组件。

八、Settings Sync

多台机器间同步配置，官方提供了两种方案：

Settings Sync（内置）：登录 GitHub/Microsoft 账号即可同步所有配置、快捷键、插件
.vscode/ 文件夹：将项目级配置提交到 Git 仓库，团队共享

我推荐两者结合使用：Settings Sync 维护个人偏好，项目中的 .vscode/ 维护团队规范。

九、总结

VS Code 的深度配置是一个持续积累的过程。不要试图一次配完所有东西，而是在日常工作中留意"这个操作我每天做 20 次"，然后去找有没有快捷键或插件能优化它。