Visual Studio Code 是一款功能强大的代码编辑器，掌握一些技巧可以大大提高开发效率。

必备快捷键

Windows 常用快捷键

快捷键 功能
Ctrl + P 快速打开文件
Ctrl + Shift + P 命令面板
`Ctrl + `` 打开终端
Alt + Up/Down 移动行
Ctrl + / 注释/取消注释
Ctrl + D 选择下一个相同内容

多光标编辑

1
2
3
4
5
6
7
8
// 按 Alt + Click 添加多个光标
// 或按 Ctrl + D 逐个选择相同内容

const name1 = "value";
const name2 = "value";
const name3 = "value";

// 同时修改多个 name

推荐插件

1. Chinese (Simplified) Language Pack

中文语言包，界面中文化。

2. Auto Rename Tag

自动修改闭合标签。

3. Bracket Pair Colorizer

括号颜色配对，方便识别代码块。

4. Prettier

代码格式化工具，统一代码风格。

5. GitLens

增强 Git 功能，显示代码提交信息。

代码片段配置

创建自定义代码片段，快速生成常用代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 用户代码片段
{
  "Vue 组件模板": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>",
      "    $1",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${1:ComponentName}',",
      "  data() {",
      "    return {}",
      "  }",
      "}",
      "</script>",
      "",
      "<style scoped>",
      "</style>"
    ],
    "description": "Vue 组件模板"
  }
}

调试技巧

1. 使用断点调试

在代码行号左侧点击设置断点，按 F5 启动调试。

2. 日志输出

1
2
3
4
console.log('普通日志');
console.warn('警告信息');
console.error('错误信息');
console.table({ name: '张三', age: 18 });

总结

掌握这些技巧，让你的开发效率翻倍！