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>
<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>
- 選中文本,按下 "ctrl+shift+p" 打開命令窗口輸入"ewrap"
- 選擇Emmet:使用縮寫進行包裝 (Wrap with Abbreviation) 選項
- 輸入縮寫字符 nav>ul>li* 按下回車鍵即可看到效果.