1 Star 0 Fork 0

webdevelop/emmet-vim

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
TUTORIAL.mkd 3.39 KB
一键复制 编辑 原始数据 按行查看 历史
Rick Galbo 提交于 2018-04-22 14:52 . fix a broken markdown heading
# Tutorial for Emmet.vim
mattn <mattn.jp@gmail.com>
## Expand an Abbreviation
Type the abbreviation as `div>p#foo$*3>a` and type `<c-y>,`
```html
<div>
<p id="foo1">
<a href=""></a>
</p>
<p id="foo2">
<a href=""></a>
</p>
<p id="foo3">
<a href=""></a>
</p>
</div>
```
## Wrap with an Abbreviation
Write as below:
```html
test1
test2
test3
```
Then do visual select(line wise) and type `<c-y>,`. Once you get to the 'Tag:' prompt, type `ul>li*`.
```html
<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:
```html
<blockquote>
test1
test2
test3
</blockquote>
```
## Balance a Tag Inward
Just type `<c-y>d` in insert mode.
## Balance a Tag Outward
Just type `<c-y>D` in insert mode.
## Go to the Next Edit Point
Just type `<c-y>n` in insert mode.
## Go to the Previous Edit Point
Just type `<c-y>N` in insert mode.
## Update an <img>’s Size
Move cursor to the img tag.
```html
<img src="foo.png" />
```
Type `<c-y>i` on img tag
## Merge Lines
select the lines, which include `<li>`
```html
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
```
and then type `<c-y>m`
```html
<ul>
<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>
```
## Remove the tag
Move cursor in block
```html
<div class="foo">
<a>cursor is here</a>
</div>
```
Type '<c-y>k' in insert mode.
```html
<div class="foo">
</div>
```
And type '<c-y>k' in there again.
```html
```
## Split/Join Tag
Move the cursor inside block
```html
<div class="foo">
cursor is here
</div>
```
Type '<c-y>j' in insert mode.
```html
<div class="foo"/>
```
And then type '<c-y>j' in there again.
```html
<div class="foo">
cursor is here
</div>
```
## Toggle Comment
Move cursor inside the block
```html
<div>
hello world
</div>
```
Type '<c-y>/' in insert mode.
```html
<!-- <div>
hello world
</div> -->
```
Type '<c-y>/' in there again.
```html
<div>
hello world
</div>
```
## Make an anchor from a URL
Move cursor to URL
```http
http://www.google.com/
```
Type '<c-y>a'
```html
<a href="http://www.google.com/">Google</a>
```
## Make some quoted text from a URL
Move cursor to the URL
```http
http://github.com/
```
Type '<c-y>A'
```html
<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>
```
## Installing emmet.vim for the language you are using:
```sh
cd ~/.vim
unzip emmet-vim.zip
```
Or if you are using pathogen.vim:
```shell
cd ~/.vim/bundle # or make directory
unzip /path/to/emmet-vim.zip
```
Or if you get the sources from the repository:
```sh
cd ~/.vim/bundle # or make directory
git clone http://github.com/mattn/emmet-vim.git
```
## Enable emmet.vim for the language you using.
You can customize the behavior of the languages you are using.
```sh
cat >> ~/.vimrc
let g:user_emmet_settings = {
\ 'php' : {
\ 'extends' : 'html',
\ 'filters' : 'c',
\ },
\ 'xml' : {
\ 'extends' : 'html',
\ },
\ 'haml' : {
\ 'extends' : 'html',
\ },
\}
```
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/webdevelop/emmet-vim.git
git@gitee.com:webdevelop/emmet-vim.git
webdevelop
emmet-vim
emmet-vim
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385