做網頁的好幫手 emmet

上週在看做網頁的一些教學 發現怎麼人家做網頁跟D3刷寶一樣快
原來是用了 emmet 這個神外掛
裝了之後 只要在編輯器打上

#page>div.logo+ul#navigation>li*5>a{Item $}

按一下指定熱鍵(依照編輯器與平台不同)
就會轉換為

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

當然 除了 HTML 之外 也支援 css
可看一下官方文件說明的很清楚

安裝方式

sublime

使用 Package Control
cmd-shift-p > install > emmet

快捷鍵: Tab 或 Ctrl-E

vim

emmet-vim

使用 vundle
在 .vimrc 加入

Plugin 'mattn/emmet-vim'

然後:PluginInstall 一下 就好了

快捷鍵: Ctrl-y-,