VSCode使⽤Emmet解决html代码⾃动补全
VS Code在⼀般的*.vue⽂件下，HTML代码是不能⾃动补全标签的，即便安装了 Vetur 也不⾏，要解决这个问题，就⽤到了Emmet插件。
Emmet
Emmet(前⾝为 Zen Coding)，如果你从事Web前端开发的话，对该插件⼀定不会陌⽣。VsCode 内置了 Emmet 语法，使⽤仿 CSS 选择器的语法来⽣成代码，然后⽴刻⽣成对应的 HTML 结构或者 CSS 代码，同时还有多种实⽤的功能帮助进⾏前端开发，极⼤的提⾼代码编写的效率.
Screenshot ( ⽂件后缀为 .vue )：
安装Emmet插件
配置
执⾏"⽂件 -> ⾸选项 -> 设置"，添加如下配置：
代码如下:
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
然后就ok了. 另外，推荐⼏个VS Code 常⽤插件<；快捷键：ctrl + shift + x >：
Auto Close Tag    ⾃动闭合HTML标签
Auto Rename Tag  修改HTML标签时，⾃动修改匹配的标签
HTML CSS Support  css提⽰（⽀持vue）
以下是⼀些常⽤的基本语法
嵌套操作符(Nesting operators)
嵌套操作符⽤于将缩写元素放置在⽣成的树中，是否应放置在上下⽂元素的内部或附近.
⼦级:> 通过>标识元素可以⽣成嵌套⼦级元素，可以配合元素属性进⾏连写
div#pageId>ul>li  =>
<div id="pageId">
<ul>
<li></li>
</ul>
</div>
同级:+ +字符表⽰⽣成兄弟级元素.
div#pageId+div.child  =>
<div id="pageId"></div>
<div class="child"></div>
⽗级:^ ⽤于⽣成⽗级元素的同级元素，从这个字符所在位置开始，查左侧最近的元素的⽗级元素并⽣成其兄弟级元素.
div>p.parent>span.child^ul.brother>li  =>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>
分组操作符(Grouping)
分组使⽤( )来实现缩写的分离.⽐如这个例⼦，如果不加括号那么 a 将作为 span 的⼦级元素⽣成.加上括号 a 将于( )内的元素同级.
div>(ul>li+span)>a  =>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
乘法(Multiplication)
使⽤N即可⾃动⽣成重复项.N是⼀个正整数.在使⽤时请注意N所在位置，位置不同⽣成的结果不同.
ul>li*3  =>
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
⾃动计数(numbering)
这个功能挺⽅便的对于⽣成重复项时增加⼀个序号，只需要加上$符号即可.
ul>li.item${item number:$}*3  =>
<ul>
<li class="item1">item number:1</li>
<li class="item2">item number:2</li>
<li class="item3">item number:3</li>
</ul>
使⽤@修饰符，可以更改编号⽅向（升序或降序）和基数（例如起始值）.注意这个操作符在$之后添加@-表⽰降序,@+表⽰升序，默认使⽤升序.
@N可以改变起始值.需要注意的是如果配合升降序使⽤的话N是放到+-符后.
ul>li.item$@-*3  =>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
再来个配合嵌套元素和计数的⼤栗⼦.
div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main =>
这个有点复杂，看下效果:
<div class="nav">
<nav id="navbar">
<ul>
<li>
<a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
<a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
将html代码显示为文本<a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
<a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
<a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
</li>
</ul>
</nav>
<div class="btn" type="button"><span>--</span></div>
</div>
<div id="main"></div>
最后⼀个，包装⽂本：
⾸页
产品介绍
相关案例
关于我们
⽽我们预期的效果是这样:
<nav>
<ul>
<li>⾸页</li>
<li>产品介绍</li>
<li>相关案例</li>
<li>关于我们</li>
<li></li>
</ul>
</nav>
1. 选中⽂本，按下 "ctrl+shift+p" 打开命令窗⼝输⼊"ewrap"
2. 选择Emmet：使⽤缩写进⾏包装 (Wrap with Abbreviation) 选项
3. 输⼊缩写字符 nav>ul>li* 按下回车键即可看到效果.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。