Emmet: A Frontend Development Productivity Tool (Supports Vim / Emacs)
In a nutshell: An essential tool for web frontend development!
I discovered Emmet (formerly Zen Coding) while tinkering with Vim and Emacs plugins, and was instantly amazed. It uses a CSS-like syntax to quickly generate complete HTML/CSS code snippets from minimal abbreviations, greatly improving development efficiency.
What is Emmet?
Emmet (originally Zen Coding) is a toolkit designed specifically for rapid HTML/CSS coding in frontend development. By typing abbreviations like ul>li.item$*5, you can expand them into fully structured HTML code with a single command.
Example:
ul>li.item$*3
Expands to:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Emmet supports many IDEs and editors such as VS Code, Sublime Text, Atom, Vim, Emacs, and more.
Using Emmet in Vim (formerly Zen Coding)
Recommended plugin:
Installation (using Vim-Plug example)
Plug 'mattn/emmet-vim'
Key Bindings
,<Tab>: Expand the current Emmet abbreviation (default is<C-Y>,)- You can customize the trigger key by adding:
let g:user_emmet_leader_key=','
Using Emmet in Emacs
Although there is no official Emacs support, the community provides unofficial plugins:
Installation (using use-package)
(use-package emmet-mode
:hook ((html-mode css-mode web-mode) . emmet-mode)
:config
(setq emmet-expand-jsx-className? t)
(setq emmet-self-closing-tag-style " /"))
Key Bindings
C-j: Expand abbreviationM-RET: Insert Emmet expression
Recommended Resources (Docs & Tutorials)
| Name | Link |
|---|---|
| Official Emmet Documentation | https://docs.emmet.io/ |
| Chinese Emmet Translation | https://www.zhangxinxu.com/wordpress/?s=emmet |
| Zen Coding HTML Tag Cheat Sheet | HTML Tags Cheat Sheet |
| Vim Plugin Usage Tips | emmet-vim Examples |
| Unofficial Emacs Emmet Support | https://github.com/smihica/emmet-mode |
Summary
Whether you are a VS Code user or a Vim/Emacs enthusiast, Emmet is a powerful tool to boost your frontend coding efficiency. It especially saves tons of repetitive work when writing large structured HTML.
Highly recommended: Practice common abbreviations until they become muscle memory. Emmet will be your automatic weapon when coding!