1. 工作区快捷键

显示/暗藏侧边栏

  • Mac: Cmd + B
  • Win: Ctrl + B

显示/暗藏控制台

  • Mac: Cmd + J (应用 Control + \` 也能够，然而有时候不失效)
  • Win: Ctrl + \` (应用 Ctrl + J 也能够，然而自己的 vs code 常常会解体)

将工作区放大/放大

在投影仪场景常常用到

  • Mac: Cmd + + / -
  • Win: Ctrl + + / -

新开一个软件窗口

  • Mac: Cmd + Shift + N
  • Win: Ctrl + Shift + N

在曾经关上的多个文件之间进行切换

  • Mac: Cmd + Option + 左右方向键
  • Win: Ctrl + Pagedown / Pageup

2. 命令面板

显示命令面板

应用上面的组合键关上命令面板，其中有一个 > 代表输出的是命令：

  • Mac: Cmd + Shift + P
  • Win: Ctrl + Shift + P

应用上面的命令是搜寻文件，手动输出 > 也能够进入命令面板：

  • Mac: Cmd + P
  • Win: Ctrl + P

重启 vs code

在命令面板下中输出 reload ，抉择 reload window 即可

设置字体大小

在命令面板中输出 font，能够进行字体的设置：

大小写转换

选中文本后，在命令面板中输出 transform ，能够批改文本的大小写：

应用命令行启动 vs code

关上命令面板，输出 install code command ：

配置环境变量之后，能够在命令行中通过 code 启动 vs code ：

  • code . ：应用 vs code 关上当前目录
  • code pathName/fileName ：应用 vs code 关上指定目录/文件

3. 光标操作

在单词之间挪动光标

  • Mac: Option + 左右方向键
  • Win: Ctrl + 左右方向键
如果同时按 Shift 还能够进行选中

在整行之间挪动光标

  • Mac: Cmd + 左右方向键
  • Win: Fn/Win + 左右方向键 (Fn 试了有效，Win 会与 Win10 默认快捷键抵触)

光标定位到第一行/最初一行

定位到第一行

  • Mac: Cmd + ↑
  • Win: Ctrl + Home

定位到最初一行

  • Mac: Cmd + ↓
  • Win: Ctrl + End

多光标编辑

在任意地位同时呈现光标：

  • Mac: Option + 鼠标点击任意地位
  • Win: Alt + 鼠标点击任意地位

在间断多列上同时呈现光标：

  • Mac: Cmd + Option + 高低键
  • Win: Ctrl + Alt + 高低键

4. 代码相干

新增行

在以后行的下方新增一行（即便光标不在行尾，也能疾速向下插入一行）

  • Mac: Cmd + Enter
  • Win: Ctrl + Enter

将代码向上/向下挪动

单行代码移动：光标放到以后行任意地位，应用上面组合键

  • Mac: Option + ↑ / ↓
  • Win: Alt + ↑ / ↓

代码块挪动：先选中须要挪动的代码块，而后应用下面的组合键

将代码向上/向下复制

单行代码复制：光标放到以后行任意地位，应用上面组合键

  • Mac: Option + Shift + ↑ / ↓
  • Win: Alt + Shift + ↑ / ↓

代码块复制：先选中须要复制的代码块，而后应用下面的组合键

写反复代码的利器

删除整行

  • Mac: Cmd + Shift + K
  • Win: Ctrl + Shift + K

删除光标之前一个单词

  • Mac: Option + Backspace
  • Win: Ctrl + Backspace

删除光标之前的整行内容

  • Mac: Cmd + Backspace
  • Win: 没有

代码正文

单行正文：光标放到某一行的任意地位，应用如下快捷键

  • Mac: Cmd + /
  • Win: Ctrl + /

多行正文：对须要正文的代码选中，而后再应用上述快捷键即可

代码块挪动

单行缩进：光标放到以后行最后面，应用 TAB 键即可

单行向前挪动：光标放到以后行任意地位，应用 Shift + TAB 组合键即可

多行缩进：对须要缩进的代码选中，应用 TAB 即可

多行向前挪动：对须要向前的代码选中，应用 Shift + TAB 组合键即可

代码格式化

有时候一行行调整缩进太麻烦，能够应用上面的快捷键对整个模块的代码进行格式化：

  • Mac: Option + Shift + F
  • Win: Alt + Shift + F

5. 搜寻相干

搜寻全局代码

  • Mac: Cmd + Shift + F
  • Win: Ctrl + Shift + F

搜寻面板有个按钮可能很多同学都没留神过，点击之后就会关上搜寻页面来搜寻，能够预览更丰盛的搜寻后果：

搜寻 babel/@core 后果如下：

搜寻文件名

在以后我的项目工程里，全局搜寻文件名：

  • Mac: Cmd + P
  • Win: Ctrl + P

疾速跳转到某一行

在下面的搜寻框输出 : ，而后再输出须要跳转的行号，能够疾速跳到某一行：

当然搜寻文件的时候也能够加冒号和行号，疾速跳到该文件的那一行：

在以后文件中搜寻代码

在以后文件中搜寻代码，光标在搜寻框里：

  • Mac: Cmd + F
  • Win: Ctrl + F

6. 文件 diff

留神：这边介绍的性能须要应用 git 才有

文件 diff 显示目录信息

当咱们改了多个文件的时候，会列在 source control 面板的列表里，有多个同名文件的时候特地不直观。这边有一个按钮能够改为 tree view ，显示目录树：

当有多个同名文件的时候，这样会清晰的多：

疾速切换 diff 和文件编辑视图

当改了文件内容的时候，能够点击编辑区右上角的按钮，间接关上 diff，可能很多同学都没留神到这些按钮，但其实是很有用的。

再次点击就能够回到文件编辑状态

diff 视图疾速在 diff 之间跳转

当文件内容特地多，比方好几千行的时候，要找 diff 还是比拟麻烦的。其实基本不必本人去找，还容易漏，vscode 编辑器提供了高低按钮，能够间接跳到上一个 diff、下一个 diff

7. 前端相干

一键执行 npm scripts

vscode 会扫描所有的 npm scripts，而后列出来，间接点击 run 就会关上 terminal 来跑，而且高版本 vscode 还能够间接 debug 来跑。基本不须要本人输出 npm run xxx。

疾速生成 HTML template

输出 ! 而后按 TAB 键即可。

疾速生成 Vue 组件模板

确保装了 Vetur 插件，输出 <vue 按回车即可。

疾速输出 HTML 构造

应用 emmet 语法，示例如下：

<!-- 输出上面内容，按回车 -->div.user<!-- 主动生成以下构造 --><div class="user"></div><!-- 输出上面内容，按回车 -->div#user<!-- 主动生成以下构造 --><div id="user"></div>
更多能够参考 emmet 用法

参考

第一次应用VS Code时你应该晓得的所有配置

让你 vscode 写代码效率更高的技巧