VSCode编辑器如何快速输入HTML代码,都有哪些快捷输入方式呢?

2020年5月19日 评论 1,293

VSCode中有一些快捷编辑HTML的方法,能大大提高工作效率,在这记录一些。

1.输入html:5,然后按tab键或enter键,效果如下:

<!-- 输入html或者html:5生成页面模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

其实还有一个更快速的方法,可以有一样的效果。
只需要在第一行输入「!」然后按tab键或enter键,即可快速生成页面模板。
(注意,感叹号要英文输入下的符号,页面要是html格式的才可以)

2.输入link:css引入css样式文件,输入script:src引入js

<!-- 输入link:css引入样式 -->
<link rel="stylesheet" href="">
<!-- 输入script:src引入js -->
<script src=""></script>

3.输入标签名自动补齐

<!-- 输入标签名 h1 按tab键或Enter键自动补齐 -->
<h1>HTML快捷输入练习</h1>
<!-- {}可输入标签内的文本 如输入:h2{填充文本} -->
<h2>填充文本</h2>

4.随机文本的输入

Lorem自动输入一段随机文本(默认30个单词),Lorem10 输入10个单词,Lorem*5 输入5遍随机文本。

Lorem ipsum dolor sit amet consectetur adipisicing elit. At illum doloremque accusantium est, expedita tenetur minus nostrum perspiciatis. Repudiandae voluptatum mollitia corrupti adipisci pariatur accusantium praesentium quas, quisquam tempore debitis?
<!-- Lorem10 的结果-->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolorem.
<!-- Lorem10*10 的结果-->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, debitis.
Sit accusamus nisi mollitia doloremque cumque praesentium quod velit vitae.
Quisquam qui ipsam beatae eaque non voluptatibus obcaecati voluptate exercitationem.

5.使用"#“输入id,”.“输入class,”[]"输入属性

<!-- div#main.content 输入id、class -->
<div id="main" class="content"></div>
<div id="foot" class="foot" data="结束"></div>
<!-- div[alt=到底了]{结束} 添加属性及包裹文本 -->
<div alt="到底了">结束</div>

6.使用">“输入嵌套标签,”+" 输入并列的兄弟标签,"^"上级元素

<!-- div>div#imgs{put some imgs here} 标签的嵌套-->
<div>
<div id="imgs">put some imgs here</div>
</div>

<!-- div#left{I am left}+div#right{I am right} 并列标签 -->
<div id="left">I am left</div>
<div id="right">I am right</div>

<!-- div#div1>p^div#div2 把div1提出成一行和div2同级 -->
<div id="div1">
<p></p>
</div>
<div id="div2"></div>
<!-- div>div#div1>p^div#div2 -->
<div>
<div id="div1">
<p></p>
</div>
<div id="div2"></div>
</div>

<!-- div>p>img^div>ul>li -->
<div>
	<p><img src="" alt=""></p>
</div>
<div>
<ul>
<li></li>
</ul>
</div>
<!-- div>div>div^div -->
<div>
<div>
<div></div>
</div>
<div></div>
</div>
<!-- div>div^div -->
<div>
<div></div>
</div>
<div></div>

7.使用"{}“对标签分组及使用”*"生成多个相同的标签

<!-- (div#list1>ul>li*2)+(div#list1>ul>li*2) 使用括号分组标签 *生成多个标签-->
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>

8.包装文本

听起来可能有点绕,通俗点解释就是把一段指定的文本包装成我们想要的结构.注意这个功能需要编辑器的支持,举个大栗子:
比如现在我们有这样一段文本。
首页
产品介绍
相关案例
关于我们
联系我们

而我们预期的效果是这样:

<nav>
    <ul>
        <li>首页</li>
        <li>产品介绍</li>
        <li>相关案例</li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
</nav>

该怎么做呢?
首先选中文本,按下ctrl+shift+p打开命令窗口输入ewrap
选择Emmet:使用输入缩写包围个别行(Wrap Individual Lines with Abbreviation)选项
输入缩写字符nav>ul>li*按下回车键即可看到效果。

也可以在菜单=>编辑=>Emmet(M)..然后输入。
(命令行炸年糕不要删除Emmet,不然没有作用)
这里需要的注意的地方是输入的缩写代码中*所在位置不同得到的效果也是不同的。

另外如果给的文本带有序号的情况,我们也是可以通过缩写来处理,而不是手动删除,主要用的是|t来处理.
比如:
1.首页
2.产品介绍
3.相关案例
4.关于我们
5.联系我们
输入包装字符命令

nav>ul>li*|t

即可看到生成的html中自动去掉了序号。
(这里注意|t中的一竖为符号一竖,在回车键上方的那个符号)

利用好Emmet来快速编写html代码,能提升工作效率不用在一个个敲闭合标签,简直是我等偷懒党神器.赶快去耍耍吧.

VSCode编辑器中好用的快捷键大全 技巧分享

VSCode编辑器中好用的快捷键大全

20.05.27补充: 同时选中多行相同元素 当我们选中某一个元素的时候,屏幕会高亮其它相同的元素,如果我们要一起修改这些相同的元素该怎么做呢? 只需要选中某个元素后,按 即可快速选中所有相同的元素,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: