Vscode 前端快捷键及字符补全方法

Vscode 前端快捷键及字符补全方法

---

欢迎大家访问我的主页:西城Gether学习网

我的博客:浅作序

1. 快捷键的使用

快捷键	说明
Tab	补全代码
Alt + Tab	切换windows窗口
Ctrl + A	选择全部代码
Ctrl + C	复制
Ctrl + V	粘贴
Ctrl + X	剪切
Ctrl + Z	返回上一次操作
Ctrl + F	查找
Ctrl + /	添加或取消注释
Ctrl + + / -	放大/缩小
Ctrl + F1	打开浏览器
F12	浏览器中为启用调试模式
F11	浏览器中为全屏

2. 字符补全( ♥ 为常用项 )
+ ♥多项：* , 缩写：ul>li*5
css
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

+ ♥Class类：. , 缩写：div.top*2（Class类可以多次使用）
css
<div class="top"></div>
<div class="top"></div>

缩写：p.class1.class2.class3
css
<p class="class1 class2 class3"></p>

+ ♥Id类：# , 缩写：div#top(一个Id类只能使用一次)
css
<div id="top"></div>

缩写：form#search.wide
css
<form id="search" class="wide"></form>

+ ♥自增符号：$ , 缩写：ul>li.item$*5
css
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

+ ♥子元素：> , 缩写： nav>ul>li
css
<nav>
<ul>
<li></li>
</ul>
</nav>

+ ♥兄弟元素：+ , 缩写：div+div >p> span+em
css
<div></div>
<div>
<p><span></span><em></em></p>
</div>

+ 自定义属性：[]
缩写：p[title=”Hello world”]
css
<p title="Hello world"></p>

缩写：td[rowspan=2 colspan=3 title]
css
<td rowspan="2" colspan="3" title=""></td>

缩写：[a=’value1’ b=”value2”](a,b为属性，value为属性值。具体使用见上面的例子)
css
<div a="value1" b="value2"></div>

+ 文本：{}
缩写：a{Click me}
css
<a href="">Click me</a>


查看更多方法

---

欢迎大家访问我的主页:西城Gether学习网

我的博客:浅作序

2018/9/3 晚上23:37:08