vim + Emmet 快速编辑html

Posted by

Emmet 是一款编辑器的插件,很多编辑都支持。可以用来快速的书写html,css。这里总结一下在编辑器vim中如何使用 Emmet。

vim中使用Emmet 需要两个步骤

操作是在编辑模式下进行的

  1. 按照Emmet的语法书写字符串
  2. 按下执行的快捷键 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>

命令的解释

  1. V3j 进入可视化模式,然后向下移动三行,这样就全部选中了。
  2. <C-y>, 然后底部出现一个 tag: 提示输入内容
  3. ul>li* 表示使用 ul li* 进行包围

编辑点的快速跳转

比如 <li>@</li><a href="@">@</a>@ 处都是编辑点。
编辑点的跳转是 <ctrl-y>n

更多关于 Emmet 的语法可以查看官网

https://docs.emmet.io/abbreviations/syntax/

Leave a Reply

电子邮件地址不会被公开。