VSCode 高效开发技巧：从基础配置到高级调试

7次阅读

没有评论

共计 1502 个字符，预计需要花费 4 分钟才能阅读完成。

在日常开发中，许多开发者面临以下效率瓶颈：

重复操作消耗时间 ：如频繁切换文件、查找引用、格式化代码等手动操作
调试效率低下 ：缺乏对复杂场景（如多线程、异步代码）的调试支持
配置不当影响性能 ：插件过多或配置不当导致编辑器响应缓慢
工作流不连贯 ：缺乏个性化配置导致开发流程被打断

VSCode 的快捷键系统是提升效率的核心。以下为高频使用场景的快捷键组合：

Ctrl+P：快速文件跳转（可输入 @ 跳转符号，# 搜索内容）
Ctrl+Shift+O：文件内符号导航
Alt+↑/↓：整行移动代码
Ctrl+Shift+L：选中所有相同内容（支持多光标编辑）

自定义配置示例（settings.json）：

{
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "emmet.triggerExpansionOnTab": true
}

GitLens：实时显示代码作者和提交历史（建议关闭部分非核心功能以提升性能）

Prettier：自动格式化代码（配置示例）：

{
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

REST Client：直接发送 HTTP 请求并查看响应

ESLint：JavaScript 代码质量检查
Python：官方扩展支持智能补全和调试

在断点右键菜单中设置条件表达式，例如在循环中仅当 i > 5 时暂停：

for(let i=0; i<10; i++) {
  // 右键断点设置条件：i > 5
  console.log(i)
}

配置 launch.json 启用子进程调试：

{
  "type": "node",
  "request": "launch",
  "name": "Debug Cluster",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "start"],
  "cluster": true
}

利用重构功能优化代码结构（JavaScript 示例）：

// 原始代码
function oldMethod() {
  const a = 1;
  const b = 2;
  return a + b;
}

/* 操作步骤：1. 选中函数名 → 按 F2 → 输入新名称
2. 选中表达式 a + b → 右键选择 "Extract to function"
*/

// 重构后
function calculateSum() {return addValues(1, 2);
}

function addValues(a, b) {return a + b;}