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

安装步骤
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.效果


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>title>
head>
<body>
	_
body>
html>

嵌套操作符
使用 > 生成元素子节点



   

           

  •    



使用 + 生成元素兄弟节点





操作符 ^ 的作用和 > 刚好相反
用 ^ 可以在父级生成新的节点



   


   


用n个 ^ ,就可以在第n父级生成新的节点



   





使用 * 生成多个相同元素


       

  •    

  •    

  •    

  •    



圆括号 () 是Emmet的高级用法,用来实现比较复杂的DOM结构


   

       

               

  •            

  •        

   

   

       


   



还可以嵌套使用圆括号 ()


   

       

       

       

       

       

       

   



   




属性操作
Emmet给元素添加ID和CLASS的方法和CSS的语法类似




使用[attr]标记来添加自定义属性


使用 $ 操作符可以对重复元素进行有序编号


       

  •    

  •    

  •    

  •    


还可以用多个 $ 定义编号的格式


       

  •    

  •    

  •    

  •    


使用 @ 修饰符可以改变编号的格式
在 $ 后面添加 @- 可以改变编号顺序


       

  •    

  •    

  •    

  •    


在 $ 后面添加 @N 可以改变编号基数


       

  •    

  •    

  •    

  •    


还可以组合使用上面的修饰符


       

  •    

  •    

  •    

  •    



文本操作
Emmet使用 Text:{} 给元素添加文本内容
a{Click me}-->Click me

clickhere

clickhere

Click here to continue


其他例子



   
   

Emmet没有预设任何标签名,所以可以使用任何可用名称来生成HTML标签:div →

或 foo →

其他常用快捷键:

,    展开简写式
d    Balance a Tag Inward(选中包围的标签?)
D    Balance a Tag Outward
n    进入下个编辑点
N    进入上个编辑点
i    更新图像尺寸
m    合并文本行
k    删除标签
j    分解/展开空标签
/    注释开关
a    从URL生成anchor标签
A    从URL生成引用文本

你可能感兴趣的:(Linux)