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

原创 2018年04月16日 14:12:49
安装步骤
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生成引用文本

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lovewebeye/article/details/79957896

前端开发从0到就业之HTML

-
  • 1970年01月01日 08:00

vim 安装Emmet插件

最近说好的要学做移动App,想来想去,还是先从基础搞起,先把失散多年的html捡捡。Emmet是vi的一个插件,它可以让我等更方便的编辑html。...
  • fansongy
  • fansongy
  • 2015-01-26 17:02:21
  • 6559

Emmet:HTML/CSS代码快速编写神器(Sublime)

使用Sublime有一段时间了,但是此前基本都是简单使用,插件没时间多弄。刚好最近有时间,百度研究了一番。 过程中,发现一些插件的确很有意思,特此总结记录。 一、安装过程: 1.Gith...
  • ALEX0815
  • ALEX0815
  • 2017-08-17 15:54:03
  • 342

ATOM基础教程一使用前端插件emmet(16)

emmet简介emmet的前身是大名鼎鼎的Zen coding,从事Web前端开发的工程师对该插件并不陌生,emmet使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。 ...
  • zsl10
  • zsl10
  • 2016-07-19 16:09:21
  • 2870

notepad++ Emmet插件开发html、css。

本文主要介绍notepad++用来开发html的插件--Emmet的安装和使用方法
  • ywjatjd
  • ywjatjd
  • 2016-02-29 13:08:02
  • 3854

Vim html自动填充 emmet

http://blog.csdn.net/hpu_zyh/article/details/48069159 自动填充 用法control + y 再加上, (逗号)  三个键组合,用法跟在v...
  • awawfwfw
  • awawfwfw
  • 2017-12-28 13:43:50
  • 85

Linux 下为sublime Text2 安装HTML5快速开发 emmet插件

Linux安装emmet插件时遇到了不少坑,网上资料不一致,现在记录一下 1. 打开sublime ,View --> show console 弹出 输入框 2. 按照博客提供的方法先安装p...
  • samcasa
  • samcasa
  • 2017-07-05 14:25:18
  • 370

(webstorm的css编写插件)Emmet:HTML/CSS代码快速编写神器

http://m.mamicode.com/info-detail-1187968.html mmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌...
  • weixin_39407457
  • weixin_39407457
  • 2017-11-11 16:05:58
  • 459

Visual Studio 2017使用Emmet风格编写Html--ZenCoding

一、ZenCoding插件简介 在VS Code中默认支持Emmet插件,可以方便快捷编写HTML代码。 ZenCoding插件可以使您在Visual Studio中也使用Emmet风格快速编写H...
  • u011127019
  • u011127019
  • 2018-02-07 17:27:00
  • 310

打造Vim作为前端IDE

参考 1.将你的Vim 打造成轻巧强大的IDE 2.从零搭建和配置OSX开发环境 3.Using Vim as a JavaScript IDE 4. vim 树形目录插件NERDTree安装...
  • q617610589
  • q617610589
  • 2016-10-11 08:38:16
  • 2633
收藏助手
不良信息举报
您举报文章:Vim前端开发神器--Emmet(html编辑插件)
举报原因:
原因补充:

(最多只允许输入30个字)