Tutorial for Emmet.vim
mattn <mattn.jp@gmail.com>
1. Expand an Abbreviation
Type the abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
---------------------
<div>
<p id="foo1">
<a href=""></a>
</p>
<p id="foo2">
<a href=""></a>
</p>
<p id="foo3">
<a href=""></a>
</p>
</div>
---------------------
2. Wrap with an Abbreviation
Write as below.
---------------------
test1
test2
test3
---------------------
Then do visual select(line wise) and type '<c-y>,'.
Once you get to the 'Tag:' prompt, type 'ul>li*'.
---------------------
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
---------------------
If you type a tag, such as 'blockquote', then you'll see the following:
---------------------
<blockquote>
test1
test2
test3
</blockquote>
---------------------
3. Balance a Tag Inward
type '<c-y>d' in insert mode.
4. Balance a Tag Outward
type '<c-y>D' in insert mode.
5. Go to the Next Edit Point
type '<c-y>n' in insert mode.
6. Go to the Previous Edit Point
type '<c-y>N' in insert mode.
7. Update an <img>’s Size
Move cursor to the img tag.
---------------------
<img src="foo.png" />
---------------------
Type '<c-y>i' on img tag
---------------------
<img src="foo.png" width="32" height="48" />
---------------------
8. Merge Lines
select the lines, which include '<li>'
---------------------
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
---------------------
and then type '<c-y>m'
---------------------
<ul>
<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>
---------------------
9. Remove a Tag
Move cursor in block
---------------------
<div class="foo">
<a>cursor is here</a>
</div>
---------------------
Type '<c-y>k' in insert mode.
---------------------
<div class="foo">
</div>
---------------------
And type '<c-y>k' in there again.
---------------------
---------------------
10. Split/Join Tag
Move the cursor inside block
---------------------
<div class="foo">
cursor is here
</div>
---------------------
Type '<c-y>j' in insert mode.
---------------------
<div class="foo"/>
---------------------
And then type '<c-y>j' in there again.
---------------------
<div class="foo">
</div>
---------------------
11. Toggle Comment
Move cursor inside the block
---------------------
<div>
hello world
</div>
---------------------
Type '<c-y>/' in insert mode.
---------------------
<!-- <div>
hello world
</div> -->
---------------------
Type '<c-y>/' in there again.
---------------------
<div>
hello world
</div>
---------------------
12. Make an anchor from a URL
Move cursor to URL
---------------------
http://www.google.com/
---------------------
Type '<c-y>a'
---------------------
<a href="http://www.google.com/">Google</a>
---------------------
13. Make some quoted text from a URL
Move cursor to the URL
---------------------
http://github.com/
---------------------
Type '<c-y>A'
---------------------
<blockquote class="quote">
<a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
<cite>http://github.com/</cite>
</blockquote>
---------------------
14. Installing emmet.vim for the language you are using:
# cd ~/.vim
# unzip emmet-vim.zip
Or if you are using pathogen.vim:
# cd ~/.vim/bundle # or make directory
# unzip /path/to/emmet-vim.zip
Or if you get the sources from the repository:
# cd ~/.vim/bundle # or make directory
# git clone http://github.com/mattn/emmet-vim.git
15. Enable emmet.vim for the language you using.
You can customize the behavior of the languages you are using.
---------------------
# cat >> ~/.vimrc
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}
---------------------
分享到:
相关推荐
"zencoding-vim" 是一个专为Vim编辑器设计的插件,它引入了Zen Coding的概念,大大提升了前端开发者的工作效率。Zen Coding,后来更名为Emmet,是前端开发领域中一个快速编写HTML和CSS的工具。这个插件将Emmet的功能...
总结一下,"zencoding-vim-master.zip"是一个包含Zencoding插件的文件,它可以帮助Vim用户更快捷地编写HTML代码。用户需要正确安装和配置这个插件,以便在Vim中使用其丰富的快捷命令和功能。通过了解并熟练运用这些...
本文档将详细介绍如何在Vim环境下使用zencoding插件,帮助用户更高效地编写HTML代码。 #### 二、安装与配置 1. **安装**:首先确保您的编辑器或IDE支持zencoding,并按照官方文档完成插件的安装。 2. **配置**:...
【ZenCoding(现更名为Emmet)插件】 ZenCoding是一款强大的前端开发辅助工具,现在被称为Emmet。它极大地提升了HTML和CSS编写的速度。Emmet支持快速输入缩写,然后自动扩展成完整的HTML或CSS代码。例如,输入"div>...
Vim优化各种常用插件的组合安装,调整了字体和背景,加上很好看的语法着色,已经可以成为完整ide环境,对插件的冲突也做了优化,自动补全可使用空格选词,snipmate默认使用Tab,安装zencoding,使用ctrl-e展开,自动匹配符号,...
Emmet,原名Zen Coding,是一种快速、高效的Web开发编辑工具,尤其在编写HTML和CSS时,通过简短的缩写,可以自动生成复杂的代码结构。 首先,让我们了解一下Emmet的基本概念。Emmet的核心在于其强大的缩写系统。...
在Vim中安装zencoding插件后,你可以通过简洁的缩写来生成复杂的HTML结构,例如“div>ul>li*5”会自动生成一个包含五个li元素的div和ul结构。这种方式极大地提高了前端开发者的编码速度,减少了重复劳动。 3. **...
在Vim中,Zen Coding作为一个插件存在,可以通过`:PluginInstall`命令安装。一旦安装完成,用户可以通过特定的快捷键(如`Ctrl-E`和`Ctrl-Y`)触发缩写扩展和其它功能。 8. **自定义设置**: 用户可以根据个人...
Emmet,原名Zen Coding,是由Dmitry芭蕾舞鞋创造的,现已成为前端开发者不可或缺的生产力提升神器。Emmet-Vim将这个功能集成了到Vim中,使得在Vim内也能享受到类似IDE级别的代码补全和自动提示体验。 首先,Emmet的...
在使用这些插件时,你需要将它们安装到你的.vim目录下,或者如果你使用的是像Vundle或Pathogen这样的插件管理器,可以直接将它们添加到相应配置文件中进行管理。安装完成后,根据插件的文档或README文件来配置快捷键...
: zen coding in vim, a tutorial is here vim-airline: awsome statusline Miscellanies Mac + iTerm2 + zsh + vim Caps lock <--> Esc: Reference 解决粘贴时格式混乱:set pastetoggle=,插入模式下按下 F9...
`zencoding.txt` 文件可能是Zen Coding的额外教程或示例,帮助开发者进一步掌握这项技能。通过学习这个文件,开发者可以了解更多的Zen Coding语法和技巧,提高编码效率。 `README.txt` 文件通常包含对压缩包内容的...
Bundle 'mattn/zencoding-vim' Bundle 'Lokaltog/vim-powerline' Bundle 'Shougo/neocomplcache' Bundle 'Shougo/vimproc' "Bundle 'Shougo/neosnippet' Bundle 'Shougo/vimshell' Bundle 'scrooloose/...
5. **Zen Coding**: 一种编辑模式,提供全屏无干扰的编写体验。 6. **选择和重命名**: 快速选择并修改多个相同标签或属性。 **Vim 7.4 配置Emmet的步骤** 1. **安装插件管理器**: 如Vundle或Pathogen,它们可以帮助...
vim/macvim/gvim 配置 + 很棒的插件它有互联网上最棒的vim插件vundle - 最好的 vim ... 标签应该是什么样的emmet - vim 的 zencoding 未受损 - 方便的括号映射其他我喜欢的东西vimux - 轻松 tmux,来自 vim 标签栏 -
1.添加了Zen Coding插件 2.添加模板插件 命令模式:LoadTemplate 文件类型名(如:html/java/c++) 3.html有自动提示功能 4.添加DrawIt插件 能画简单图形 在vim的普通模式下按下 \di 启动 \ds 关闭 PgUp 右上斜线 PgDn ...
Emmet\Zencoding 插件 安装 将ace_vimtura文件夹复制到您的 javascripts 文件夹。 用法 基本 代码 < script src =" lib/require.js " type =" text/javascript " charset =" utf-8 " > </ script > <...
- 代码折叠:ZenCoding或Fold,便于管理长代码。 - 括号匹配:matchit或showmatch,确保括号正确配对。 - 编辑增强:Surround或Text对象,简化文本包围结构的编辑。 - 项目搜索:Ag或CtrlP,快速查找文件。 通过...
这个扩展是基于流行的前端开发工具Emmet(原名Zen Coding),Emmet.io是它的官方网站。Emmet的核心理念是通过简短的缩写来生成复杂的HTML或CSS代码,从而提高开发效率。 Emmet-Vim的关键特性包括: 1. **快速输入*...
zenCoding zenCoding是一种快速的html、css编写方式。默认用tab键. 已经更名为Emmet。 JS Format 一个JS代码格式化插件。默认ctrl+alt+f Sublime Text 3 简体中文设置方法: 按住 Ctrl + Shift + P,输入”install ...