VS Code 高效使用技巧

必备快捷键

导航

• Cmd + P - 快速打开文件
• Cmd + Shift + P - 命令面板
• Cmd + B - 切换侧边栏
• Cmd + \` - 切换终端
• Ctrl + - - 后退
• Ctrl + Shift + - - 前进

编辑

• Option + ↑/↓ - 移动行
• Option + Shift + ↑/↓ - 复制行
• Cmd + / - 切换注释
• Cmd + D - 选择下一个相同的词
• Cmd + Shift + K - 删除行

推荐插件

开发效率

• GitHub Copilot - AI 代码助手
• ESLint - 代码检查
• Prettier - 代码格式化
• Auto Rename Tag - 自动重命名标签
• Bracket Pair Colorizer - 括号配对着色

美化

• Material Icon Theme - 文件图标
• One Dark Pro - 主题
• Fira Code - 连字字体

高级技巧

多光标编辑

按住 Option 点击多个位置，或使用 Cmd + D 逐步选择相同的词。

代码片段

// 创建自定义代码片段
"React Component": {
  "prefix": "rc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    
$0
",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Create React component"
}

工作区设置

在项目根目录创建 .vscode/settings.json，可以为项目设置专属配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

总结

掌握这些技巧和插件，可以让你的开发效率大幅提升。建议花时间配置适合自己的开发环境，磨刀不误砍柴工。