vim插件--emmet-vim

最新推荐文章于 2024-01-27 03:31:32 发布

Flutter&Python&Test

最新推荐文章于 2024-01-27 03:31:32 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： python vue html js css

本文链接：https://blog.youkuaiyun.com/MidSummer411/article/details/111957473

本文介绍如何利用Emmet-Vim插件简化HTML页面编写过程，通过快速指令生成HTML结构，提升开发效率。教程包括安装方法、基本规则演示及个性化快捷键设置，适用于熟悉Vim环境的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写html页面,使用插件是免不了的,纯手写html的感觉谁写谁知道 : ) .
这里有一个非常好用的vim插件:emmet-vim

简易说明:

新建一个html文件后,输入html:5,然后按control+y,再按,即可生成:

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

 </body>
 </html>```

---
#####基本规则:
1. E 代表HTML标签
2. E#id 代表标签E有id属性
3. E.class 代表E有class属性
4. E[attr=foo] 代表某个特定属性
5. E{info} 代表标签E包含的内容是info
6. E>N 代表N是E的子元素
7. E+N 代表N是E的同级元素
8. E^N 代表N是E的上级元素

举例:

输入p.class#id，生成：<p id="id" class="class"></p>
输入h1{foo}，生成：<h1>foo</h1>
输入h1+h2, 生成： <h1></h1>
　　　　　　　　　　 <h2></h2>
输入img^a, 生成： <img src="">
　　　　　　　　　　 <a href="" alt=""></a>
输入h1>h2, 生成： <h1>
　　　　　　　　　　　　　　<h2></h2>
　　　　　　　　　 </h1>
输入(.foo>h1)，生成：<div class="foo">
　　　　　　　　　　　　　　　　<h1></h1>
　　　　　　　　　　　 </div>
输入div.item，生成： <div class="item">
　　　　　　　　　　　 </div>
或者直接输入 .item，生成： <div class="item">
　　　　　　　　　　　　 </div>
输入ul>li*3，生成： <ul>
　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　</ul>
输入ul>li.item$*3，生成： <ul>
　　　　　　　　　　　　　　　　　<li class="item1"></li>
　　　　　　　　　　　　　　　　　　<li class="item2"></li>
　　　　　　　　　　　　　　　　　　<li class="item3"></li>
　　　　　　　　　　　　　　　 </ul>

----
>使用F2+,修改默认的快捷键:
打开.vimrc, 输入```let g:user_emmet_leader_key = '<F2>' "设置快捷键为F2+, 使用 emmet```

---
如果要限制只对html,css文件使用的话:
```let g:user_emmet_install_global = 0
autocmd FileType html,css EmmetInstall```

---
对于vim的不同模式,可以在.vimrc有不同配置:
```let g:user_emmet_mode='n'    "only enable normal mode functions.
let g:user_emmet_mode='inv'  "enable all functions, which is equal to
let g:user_emmet_mode='a'    "enable all function in all mode.