Tools

VS Code 高效配置指南：插件、快捷键与工作区管理

2026-06-21 792 阅读 0 评论
{ } VS Code Workflow

一、必备插件清单

VS Code 的强大在于插件生态。以下是经过长期使用筛选的必备插件：

插件用途替代方案
GitLensGit 可视化增强，行级 Blame、历史对比Git Graph
Prettier代码格式化，支持 30+ 语言ESLint 内置
Error Lens行内显示错误和警告信息—
Thunder Client轻量 API 测试工具，无需切换窗口Postman
GitHub CopilotAI 代码补全，大幅提升编码效率Codeium / Cursor
Auto Rename Tag自动同步重命名 HTML/JSX 标签—
Path Intellisense文件路径自动补全—
Project Manager快速切换项目，收藏常用项目—

二、快捷键定制

以下是我最常用的自定义快捷键配置（keybindings.json）：

// keybindings.json
[
  {
    "key": "ctrl+shift+k",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+d",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+r",
    "command": "workbench.files.action.showActiveFileInExplorer"
  },
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+shift+p",
    "command": "workbench.action.showCommands"
  }
]

三、多项目工作区

工作区文件（.code-workspace）允许同时打开多个项目，共享设置和扩展：

// monorepo.code-workspace
{
  "folders": [
    { "name": "前端", "path": "./packages/frontend" },
    { "name": "后端", "path": "./packages/backend" },
    { "name": "文档", "path": "./docs" }
  ],
  "settings": {
    "editor.tabSize": 2,
    "files.exclude": { "**/node_modules": true },
    "typescript.tsdk": "./packages/frontend/node_modules/typescript/lib"
  },
  "extensions": {
    "recommendations": [
      "dbaeumer.vscode-eslint",
      "esbenp.prettier-vscode"
    ]
  }
}

四、settings.json 最佳实践

{
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.fontFamily": "'JetBrains Mono', 'Cascadia Code', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "terminal.integrated.fontFamily": "'JetBrains Mono'",
  "terminal.integrated.fontSize": 13,
  "files.autoSave": "onFocusChange",
  "explorer.confirmDelete": false,
  "diffEditor.ignoreTrimWhitespace": false
}
💡 提示：使用 Settings Sync 功能登录 GitHub/Microsoft 账号，自动同步所有配置到多台设备。