iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
1

emmet 是個讓你快速打出 HTML 語法的小工具,它使用了類似 CSS Selector 的語法,讓你快速打出你要的 HTML 語法。emmet.vim 則幫 Vim 編輯器加上了這個功能。

emmet 語法

如果你不知道 emmet 是什麼的話,很多編輯器都可以使用 emmet,包括 VS Code、Sublime Text、Atom 等等。安裝好之後就可以打縮寫並按下 Tab 鍵打出 HTML 語法,例如:輸入 div 再按下 Tab 後會跑出 <div></div>、輸入 p 再按下 Tab 就會跑出 <p></p>

你也可以在一次打很多東西,透過 > 語法就可以打出下一層,例如 div>ul>li*5 就會變成:

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

透過 + 則可以長出同一層的語法,例如 div+p 就變成:

<div></div>
<p></p>

而常常會用到的 id 和 Class 則可以透過 #. 來達成。例如 ul#list>li.item*3 可以變成:

<ul id="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

emmet 還有許多語法,可以在 emmet 的 官方文件 看到更多的語法。

安裝 emmet.vim

在 Vim 中安裝 emmet,首先你一樣需要 Vundle,並在 ~/.vimrc 中加入:

Plugin 'mattn/emmet-vim'

開啟 Vim 並安裝套件:

vim +PluginInstall

重新打開 Vim 後,就可以使用 emmet 了。

如何使用 emmet?

為什麼在 Vim 中輸入 div#kangaroo 按下 Tab 卻沒有反應呢?因為 emmet.vim 預設的快捷鍵不是設成 Tab,而是要先按下 Ctrl+y 後再按下 ,

asciicast

如果想要改回按下 Tab 就會自動展開的話,可以考慮在 ~/.vimrc 加上:

let g:user_emmet_expandabbr_key = '<tab>'

重新開啟 Vim 後,就可以使用 Tab 鍵來展開語法了。不過我個人也不是很推薦,因為這樣會造成你真的需要 Tab 縮排時的衝突。

本篇文章同步發表在 Noob's Space


上一篇
Vim-gitgutter:快速查看本次 commit 新增了什麼
下一篇
GitHub CLI:用指令就能開 issue、發 PR
系列文
用 Chromebook 能寫什麼樣的東西30

尚未有邦友留言

立即登入留言