←

2021-12-24

VS code 学习笔记

VS code 自己的教程好像没有中文版本，稍微看一下教程学习一些技巧然后写个笔记。

目录

多光标编辑
智能感知
整行操作
重命名
折叠
Emmet

多光标编辑

可以使用 option + click 来添加一个光标。

使用 shift + command + L 可以选中文件中的重复内容并添加光标。

智能感知

VS code 预装了 JavaScript 和 TypeScript 的智能感知功能，将鼠标悬停在错误、函数名、变量上会有对应的提示。

其他语言在安装对应的插件之后，也会附带对应语言的智能感知。

整行操作

需要粘贴整行并插入到上 / 下一行可以使用 shift + option + 方向上 / 方向下。

需要移动整行可以使用 option + 方向上 / 方向下。

需要删除整行可以使用 shift + command + K

整行注释可以采用 command + L

重命名

选中之后右键重命名符号，可以修改整个文件中的该变量名称。

折叠

折叠快捷键：option + command + [

展开快捷键：option + command + ]

Emmet

Emmet 是 vscode 的一个大杀器，值得详细了解一下。

元素

html:5 => 生成 html 5 标准的包含 body 为空的基本 dom

文本操作符

希望在生成元素同时添加文本可以使用 {}

属性操作符

.className 可以表示类名称

#elementName 可以表示元素名称

[attr1=’’ attr2=’’] 表示自定义属性

嵌套操作符

> 表示子级元素

+ 表示兄弟元素

^ 表示父级元素

分组操作符

分组操作符这里写的比较有意思，需要注意一下

div>(ul>li)>a =>
<div>
    <ul>
        <li></li>
    </ul>
    <a href=""></a>
</div>

乘法

*使用乘法可以自动生成重复项：

ul>li^3 =>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自动计数

$ 表示自动计数

通过改变 @+ 和 @- 可以改变升序降序：

div>div{this is $}*5 =>
<div>
    <div>this is 1</div>
    <div>this is 2</div>
    <div>this is 3</div>
    <div>this is 4</div>
    <div>this is 5</div>
</div>

更多有关 Emmet 的内容可以访问 [ Emmet官网 ](https://docs.emmet.io/）。