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 写代码效率更高的技巧