w3ctech

vs code 快键键

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 DocumentFormate 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 版本

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

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复