VS Code 效率指南：成为高效开发者的秘密武器

VS Code 是最受欢迎的代码编辑器，掌握高效使用技巧能大幅提升开发效率。本文从快捷键、插件推荐、工作流优化三个维度，助你成为 VS Code 高手。

一、必备快捷键

1.1 文件导航

Cmd/Ctrl + P        快速打开文件
Cmd/Ctrl + Shift + P  命令面板
Cmd/Ctrl + B        切换侧边栏
Cmd/Ctrl + Shift + E  资源管理器
Cmd/Ctrl + Shift + F  全局搜索
Cmd/Ctrl + Shift + G  Git 面板

1.2 编辑操作

Cmd/Ctrl + D        选中下一个相同词
Cmd/Ctrl + Shift + K  删除整行
Alt + Up/Down       移动行
Alt + Shift + Up/Down  复制行
Cmd/Ctrl + /        注释/取消注释
Cmd/Ctrl + Shift + [  折叠代码
Cmd/Ctrl + Shift + ]  展开代码

1.3 多光标编辑

Alt + Click         添加光标
Cmd/Ctrl + Alt + Up/Down  上下添加光标
Cmd/Ctrl + Shift + L      选中所有相同词
Cmd/Ctrl + F2             重命名符号

二、推荐插件

2.1 代码质量

ESLint：JavaScript 代码检查

Prettier：代码格式化

Error Lens：行内显示错误信息

SonarLint：代码质量检测

2.2 开发效率

GitLens：Git 增强工具

Git Graph：Git 分支可视化

Live Server：本地开发服务器

Path Intellisense：路径自动补全

Auto Rename Tag：自动重命名标签

2.3 AI 助手

GitHub Copilot：AI 代码补全

Codeium：免费 AI 补全

Continue：开源 AI 编程助手

2.4 主题美化

One Dark Pro：经典主题

Material Icon Theme：图标主题

Bracket Pair Colorizer：括号配色

三、工作流优化

3.1 终端集成

Cmd/Ctrl + `        打开终端
Cmd/Ctrl + Shift + `  新建终端

在 settings.json 中配置：

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.tabs.enabled": true
}

3.2 代码片段

创建自定义代码片段：Cmd/Ctrl + Shift + P -> Configure User Snippets

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1:', $1);",
      "$2"
    ],
    "description": "Log output to console"
  }
}

3.3 任务自动化

在 .vscode/tasks.json 中配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Tests",
      "type": "npm",
      "script": "test",
      "problemMatcher": ["tsc"]
    }
  ]
}

四、调试技巧

4.1 断点调试

F9      切换断点
F5      开始调试
F10     单步跳过
F11     单步进入
Shift + F11  单步退出
F5      继续执行

4.2 Launch 配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["/**"],
      "program": "app.js"
    }
  ]
}

五、设置优化

{
  // 编辑器设置
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  
  // 文件设置
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  
  // 搜索设置
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  }
}

六、远程开发

安装 Remote SSH 插件后，可以直接在远程服务器上开发：

1. Cmd/Ctrl + Shift + P
2. Remote-SSH: Connect to Host
3. 输入服务器地址
4. 打开远程文件夹开始开发

七、总结

VS Code 的高效使用需要三方面的积累：快捷键形成肌肉记忆、插件组合提升功能、工作流优化节省时间。

提升建议：

1. 每天学一个新快捷键

2. 定期清理不用的插件

3. 配置同步保存设置

4. 自定义代码片段

5. 善用多光标编辑

工欲善其事，必先利其器。让 VS Code 成为你的效率利器。

本文链接：https://www.kkkliao.cn/?id=781 转载需授权！