VSCode 高效使用技巧

1. 必备快捷键

文件与导航

快捷键	功能
`Ctrl+P`	快速打开文件
`Ctrl+Shift+P`	命令面板（所有功能）
`Ctrl+B`	切换侧边栏
`Ctrl+\`	分屏编辑
`Ctrl+Tab`	切换打开的文件

编辑操作

快捷键	功能
`Alt+↑/↓`	移动当前行
`Shift+Alt+↑/↓`	复制当前行
`Ctrl+D`	选中下一个相同词
`Ctrl+Shift+K`	删除当前行
`Ctrl+/`	切换注释
`Alt+Z`	切换自动换行

搜索与替换

快捷键	功能
`Ctrl+F`	当前文件搜索
`Ctrl+H`	当前文件替换
`Ctrl+Shift+F`	全局搜索
`Ctrl+Shift+H`	全局替换
`F2`	重命名符号

2. 实用插件推荐

前端开发必备

Vetur / Volar - Vue 语法高亮和智能提示
ESLint - 代码规范检查
Prettier - 代码格式化
Auto Rename Tag - 自动重命名配对标签
Path Intellisense - 路径自动补全
GitLens - Git 增强工具

效率提升

Bracket Pair Colorizer - 括号配对高亮
Indent Rainbow - 缩进彩色显示
Todo Tree - 快速定位 TODO 注释
Live Server - 本地开发服务器
Code Spell Checker - 拼写检查

3. 高级技巧

多光标编辑

Alt+Click - 添加多个光标
Ctrl+Alt+↑/↓ - 上下添加光标
Ctrl+Shift+L - 选中所有匹配项

代码片段

JSON

复制代码

// 自定义代码片段 (File > Preferences > User Snippets)
{
  "Vue Component": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${1:componentName}',",
      "  data() {",
      "    return {}",
      "  }",
      "}",
      "</script>"
    ]
  }
}

终端集成

`Ctrl+`` - 打开集成终端
`Ctrl+Shift+`` - 新建终端
支持多个终端标签页

工作区设置

JSON

复制代码

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "vetur.validation.template": false
}

4. 调试技巧

Vue 调试

安装 Vue.js devtools 浏览器扩展
在 launch.json 中配置调试：

JSON

复制代码

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Vue",
  "url": "http://localhost:8085",
  "webRoot": "${workspaceFolder}"
}

断点调试

F9 - 切换断点
F5 - 开始调试
F10 - 单步跳过
F11 - 单步进入

5. Git 集成

常用操作

侧边栏 Source Control 面板
Ctrl+Shift+G - 打开 Git 面板
右键文件可执行 Git 操作
支持暂存、提交、推送、拉取

查看历史

安装 GitLens 后可查看：
- 每行代码的最后修改者
- 文件历史记录
- 分支对比

6. 自定义配置

主题推荐

One Dark Pro - 深色主题
GitHub Theme - GitHub 风格
Material Theme - 材料设计

字体推荐

Fira Code - 支持连字
JetBrains Mono - 编程字体
Cascadia Code - 微软开源字体

7. 性能优化

提升速度

禁用不需要的插件
使用 .gitignore 排除大目录
调整 files.watcherExclude 设置
定期清理扩展缓存

内存管理

关闭不需要的标签页
使用工作区而非打开整个文件夹
定期重启 VSCode