做網頁的好幫手 emmet

by

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

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

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

[code language=”html”]
<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>
[/code]

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

安裝方式

sublime

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

快捷鍵: Tab 或 Ctrl-E

vim

emmet-vim

使用 vundle
在 .vimrc 加入
[code]
Plugin ‘mattn/emmet-vim’
[/code]

然後:PluginInstall 一下 就好了

快捷鍵: Ctrl-y-,

Leave a Comment