Vim前端开发神器--Emmet(html编辑插件)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lovewebeye/article/details/79957896
安装步骤
1.下载
  git clone https://github.com/boydos/emmet-vim.git
2.配置
  cd emmet-vim
  cp plugin/emmet.vim ~/.vim/plugin/
  cp autoload/emmet.vim ~/.vim/autoload/
  cp -a autoload/emmet ~/.vim/autoload/
3.重启终端
4.测试
  vim index.html
  输入 html:5

  然后用快捷建 ctrl+y+,

5.效果

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	_
</body>
</html>

嵌套操作符
使用 > 生成元素子节点

<!-- div>ul>li -->
<div>
    <ul>
        <li></li>
    </ul>
</div>


使用 + 生成元素兄弟节点
<!-- div+p+bq -->
<div></div>
<p></p>
<blockquote></blockquote>

操作符 ^ 的作用和 > 刚好相反
用 ^ 可以在父级生成新的节点
<!-- div+div>p>span+em^bq -->
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

用n个 ^ ,就可以在第n父级生成新的节点
<!-- div+div>p>span+em^^^bq -->
<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>


使用 * 生成多个相同元素
<!-- ul>li*5 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


圆括号 () 是Emmet的高级用法,用来实现比较复杂的DOM结构
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>


还可以嵌套使用圆括号 ()
<!-- (div>dl>(dt+dd)*3)+footer>p -->
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>


属性操作
Emmet给元素添加ID和CLASS的方法和CSS的语法类似
<!-- div#header+div.page+div#footer.class1.class2.class3 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

使用[attr]标记来添加自定义属性
<!-- td[title="Hello world!" colspan=3] -->
<td title="Hello world!" colspan="3"></td>
使用 $ 操作符可以对重复元素进行有序编号
<!-- ul>li.item$*5 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

还可以用多个 $ 定义编号的格式
<!-- ul>li.item$$$*5 -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

使用 @ 修饰符可以改变编号的格式
在 $ 后面添加 @- 可以改变编号顺序
<!-- ul>li.item$@-*5 -->
<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

在 $ 后面添加 @N 可以改变编号基数
<!-- ul>li.item$@3*5 -->
<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

还可以组合使用上面的修饰符
<!-- ul>li.item$@-3*5 -->
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>


文本操作
Emmet使用 Text:{} 给元素添加文本内容
a{Click me}--><a href="">Click me</a>
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
<!-- p>{Click }+a{here}+{ to continue} -->

<p>Click <a href="">here</a> to continue</p>


其他例子

<!-- #page>div.logo+ul#navigation>li*5>a{Item $} -->
<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>

Emmet没有预设任何标签名,所以可以使用任何可用名称来生成HTML标签:div → <div></div> 或 foo → <foo></foo>

其他常用快捷键:

<ctrl-y>,    展开简写式
<ctrl-y>d    Balance a Tag Inward(选中包围的标签?)
<ctrl-y>D    Balance a Tag Outward
<ctrl-y>n    进入下个编辑点
<ctrl-y>N    进入上个编辑点
<ctrl-y>i    更新<img>图像尺寸
<ctrl-y>m    合并文本行
<ctrl-y>k    删除标签
<ctrl-y>j    分解/展开空标签
<ctrl-y>/    注释开关
<ctrl-y>a    从URL生成anchor标签
<ctrl-y>A    从URL生成引用文本

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页