VS CODE快捷键介绍

本文内容翻译自vs code中的交互式训练场。配合交互式训练场一起食用，风味更佳。??

本文介绍的快捷键主要涉及到以下操作：

• 多光标编辑
• 智能感知
• 行操作
• 重命名
• 格式化
• 代码折叠
• 获取错误和警告
• Emmet(传说中的zenCoding)

多光标编辑

通过多个光标，你可以同时编辑一个文档的多个部分，极大的提高生产力。请在vs code中尝试以下操作：

1. 选择盒子 - 按下⇧⌥⌘↓, ⇧⌥⌘→, ⇧⌥⌘↑, ⇧⌥⌘←这四个快捷键中的任意一个都可以选择一个文本快，你也在可以按住⇧⌥的同时，用鼠标来选择文本块。（例如在按下⇧⌥时，鼠标先放在了第一行第十列的位置，然后又将鼠标放在第三行第20列的位置，那么第一行到第三行的第20列的位置都会出现光标。列数不足20的的行，则光标出现在行末。）
2. 添加光标 - 使用⌥⌘↑ or ⌥⌘↓快捷键可以在当前行的上一行或下一行添加光标。你也可以在按住⌥的同时，通过点击鼠标在任意地方添加光标。
3. 在同一个字符串出现的所有地方添加光标 - 选择那个字符串的任意一个实例并按下⇧⌘L,然后你的改动会影响该字符串的所有实例。

你也可以通过右键菜单更改所有匹配项来达到多光标编辑的目的。

智能感知

对于JavaScript和预先安装的TypeScript, vs code 提供强大的代码智能感知功能。以下面的代码为例，我们只需要在req.的后面按下ctrl + space(我的mac下，该快捷键和切换输入法的冲突了，所以我改成了⌘.)就可以获得提示。

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send(`Hello ${req.}`);
});

app.listen(3000);

行操作

码代码的时候经常需要对一整行进行操作，vs code 也提供了行操作的快捷键。

1. ⇧⌥↓和⇧⌥↑ 复制一整行，并将其插入到当前位置的下一行或者上一行。
2. ⌥↑和⌥↓,将选中的一行或多行，上下移动。
3. ⇧⌘K 删除整行

另外一个常用的操作就是使用⌘/来注释当前行

重命名

重命名变量或者方法可以通过F2快捷键。引用该变量名或者方法名的地方都会改变。

格式化

⇧⌥F快捷键可以快速的格式化整个文档，我们也可以通过⌘K+⌘F组合快捷键格式化选中的代码块.除了快捷键，你也可以通过右键菜单中的Formate Document和Formate Selection来格式化代码。

当然你也可以通过修改settings.json来自定义代码风格。

代码折叠

废话不多说，直接上键。

折叠代码 ⌥⌘[

放开代码 ⌥⌘]

代码折叠是基于缩进的，所以你只需要将你的代码缩进，就可以创建一个可折叠的代码块，你可以使用⌘K+⌘1到⌘K+⌘5等快捷方式折叠一定层次的代码。

错误和警告

当你的代码出现错误或者警告时，使用快捷键F8便可以查看错误详情

Emmet

Emmet的前身为ZenCoding。使用Emmet,你可以使用类似于css的方式来书写HTML代码，非一般的感觉，你值得拥有。

例如：

div.test + tab键便会生成以下代码

     <div class='test'>
     <div>

例如复杂一点的 ul>li.item$*5 + tab 生成以下代码

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

Emmet教程

本文所以快捷键均居于mac版的vs code 1.12.2 版本

欢迎吐槽，希望对大家有帮助。