VS Code使用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>
                <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* 按下回車鍵便可看到效果.

參考文章：http://www.cnblogs.com/summit7ca/p/6944215.html