VSCODE编辑器快速编写生成HTML代码教程

 浆糊之家   2018-11-03 16:16   377 views 热度值

一、Emmet简述

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

请注意在VsCode版本中启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值

 

语法基本规则如下:

 

二、基础用法

  • 元素(Elements)
    您可以使用元素的名称,如div或p来生成HTML标签。Emmet没有一组可用的标签名称,可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.
    形如:

 

  • 文本操作符(Text)
    如果想在生成元素的同时添加文本内容可以使用{}

 

  • 属性操作符(Attribute operators)
    属性运算符用于修改输出元素的属性.

    • Id和Class (elem#id and elem.class )

     

  • 隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的.

    绑定多个类名用.符号连续起来即可

    • 自定义属性使用 [attr1='' attr2='']

  • 嵌套操作符(Nesting operators)
    嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.

    • 子级:>
      通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写
    • 同级:+
      +字符表示生成兄弟级元素.
    • 父级:^
      ^用于生成父级元素的同级元素,从这个^字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

       
  • 分组操作符(Grouping)
    分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.

  • 乘法(Multiplication)
    使用N即可自动生成重复项.N是一个正整数.在使用时请注意N所在位置,位置不同生成的结果不同.

  • 自动计数(numbering)
    这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.

如果生成两位数则使用两个连续的$$,更多位数以此类推...
使用@修饰符,可以更改编号方向(升序或降序)和基数(例如起始值).注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符后.

上述的操作是可以搭配使用进而得出酷炫的效果,使用时请注意空格的问题,缩写代码不要有空格否则是不会进行转换的.
另外如果你的编辑器中已经有了一些html智能提示代码段,比如我的VsCode还装了HTML Snippets插件,这个与Emmet语法有部分冲突,使用Tab键时会优先使用插件的代码提示,建议禁用.
组合起来看看效果:

这段目的在于生成一个类名为table-row,且自定义了属性role的table标签,内部包含了thead与tbody,分别生成5个td.
thead中td的内容是item加上自增序号,自增序号基数从120开始.
tbody中td拥有一个名为item加降序自增符号类名,且每个td内容随机填充10个单词.

再来个配合嵌套元素和计数的大栗子.

这个有点复杂,看下效果:

三、进阶高级用法

  • 模拟文本/随机文本
    在开发时经常要填充一些文本内容占位,Emmet内置了Lorem Ipsum功能来实现.loremN或者lipsumN,N表示生成的单词数,正整数.可以不填.

  • 包装文本
    听起来可能有点绕,通俗点解释就是把一段指定的文本包装成我们想要的结构.注意这个功能需要编辑器的支持,举个大栗子:
    比如PM给了这样一段文本

  1. 选中文本,按下ctrl+shift+p打开命令窗口输入ewrap
  2. 选择Emmet:使用缩写进行包装(Wrap with Abbreviation)选项
  3. 输入缩写字符nav>ul>li*按下回车键即可看到效果.
    当然也可以在菜单=>编辑=>Emmet(M)..然后输入.

    这里需要的注意的地方是输入的缩写代码中*所在位置不同得到的效果也是不同的.

另外如果给的文本带有序号的情况,我们也是可以通过缩写来处理,而不是手动删除,主要用的是|t来处理.
比如:

针对上边说的几种情况来演示一下.

 发表评论


表情