Emmet 是一款编辑器的插件,很多编辑都支持。可以用来快速的书写html,css。这里总结一下在编辑器vim中如何使用 Emmet。
vim中使用Emmet 需要两个步骤
操作是在编辑模式下进行的
- 按照Emmet的语法书写字符串
- 按下执行的快捷键
ctrl + y
和,
示例
插入模式写下 html:5
然后 ctrl + y
最后 点下 ,
html:5<C-y>,
生成的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
示例2 快速写一个导航
ul#nav>li*4>a
生成的代码
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
示例3 可视化的操作
one
two
three
光标定位在One的O上, 然后执行
V3j<C-y>,ul>li*
生成的html
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
命令的解释
V3j
进入可视化模式,然后向下移动三行,这样就全部选中了。<C-y>,
然后底部出现一个 tag: 提示输入内容ul>li*
表示使用 ul li* 进行包围
编辑点的快速跳转
比如 <li>@</li>
和 <a href="@">@</a>
中 @
处都是编辑点。
编辑点的跳转是 <ctrl-y>n
更多关于 Emmet 的语法可以查看官网
https://docs.emmet.io/abbreviations/syntax/