首页 > 系统服务 > 详细

Vim Emmet插件使用

时间:2021-03-30 19:31:36      阅读:23      评论:0      收藏:0      [点我收藏+]

安装

使用plug-vim
Plug ‘mattn/emmet-vim‘

使用

  1. 展开

键入 div>p#foo$*3>a 然后按快捷键 , – 表示 后再按逗号,不妨把 Ctrl-y看成 emmet 指令的启动,就像 Vim 的 : 表示进入命令行模式。

  1. 外部包住

如下内容:

test1
test2
test3
按大写的 V 进入 Vim 可视模式,“行选取”上面三行内容,然后按键 ,,这时 Vim 的命令行会提示 Tags:,键入 ul>li*,然后按 Enter,结果如下:

  • test1
  • test2
  • test3

而假如输入的 tag 是 blockquote’,则结果会变成下面这样:

test1 test2 test3
  1. 插入模式下根据光标位置选中整个标签

d

  1. 插入模式下根据光标位置选中整个标签内容

D

  1. 跳转到下一个编辑点

插入模式下按 n

  1. 跳转到上一个编辑点

插入模式下按 N

  1. 更新图片大小

移动光标到 img 标签。

技术分享图片

然后按 i,结果如下:

技术分享图片 注:仅适用本地图片,互联网上的图片并无法取得其大小。
  1. 合并行

选择下面的所有 <li>

然后按 m,结果如下:

  1. 移除标签对

首先,移动光标到块中

然后在插入模式下按 k,结果如下:

再次按 k 则上面代码块中连 div 标签块都会被移除。

  1. 分割/合并标签

首先,移动光标到块中

cursor is here

在插入模式下按 j:

再次按 j:

  1. 切换注释

首先,移动光标到块中

hello world

插入模式中按 /:

再按 / 则恢复:

hello world
  1. 从 URL 地址生成锚

将光标移至 URL

http://www.google.com/
a

  1. 从 URL 地址生成引用文本

移动光标到 URL

http://github.com/
A


...

http://github.com/

配置

	" 使用emmet
	Plug ‘mattn/emmet-vim‘
	" 仅html/css文件加载emmet插件
	autocmd FileType html,css EmmetInstall
	" 重新配置触发键和补全键
	"let g:user_emmet_leader_key = ‘<C-Z>‘
	"let g:user_emmet_expandabbr_key = ‘<Tab>‘

参考

Emmet.vim 教程(https://www.cnblogs.com/wuhua1/p/6848960.html)
Emmet官方文档翻译 (https://www.cnblogs.com/matchless/tag/emmet/)

Vim Emmet插件使用

原文:https://www.cnblogs.com/muen2020/p/14597957.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!