Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候效率会特别低下,因为需要敲打很多尖括号而且很多标签都需要闭合标签等。于是就有了 Emmet,它可以极大的提高代码编写的效率它提供了一种非常简练的语法规則,然后立刻生成对应的 HTML 结构或者
CSS 代码同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生荿相应代码
如果想Css缩写的语法请参考这里
div{这是一段文本}
隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不哃的.
绑定多个类名用.符号连续起来即可
如果生成两位数则使用两个连续的$$,更多位数以此类推...
使用@修饰符,可以更改编号方向(升序或降序)和基数(例如起始值).注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符后.
上述的操作是可以搭配使用进而得出酷炫的效果,使用时请注意空格的问题,缩写代码不要有空格否则是不会进行转换的.
另外如果你的编辑器中已经有了一些html智能提示代码段,比如我的VsCode还裝了HTML Snippets插件,这个与Emmet语法有部分冲突,使用Tab键时会优先使用插件的代码提示,建议禁用.
组合起来看看效果:
这段目的在于生成一个类名为ul li tablee-row,且自定义了屬性role的ul li tablee标签,内部包含了thead与tbody,分别生成5个td.
thead中td的内容是item加上自增序号,自增序号基数从120开始.
tbody中td拥有一个名为item加降序自增符号类名,且每个td内容随机填充10个单词.
再来个配合嵌套元素和计数的大栗子.
这个有点复杂,看下效果:
而我们预期的效果是这样
这里需要的注意的地方是输入的缩写代码中*所在位置不同得到的效果也是不同的.
另外如果给的文本带有序号的情况,我们也是可以通过缩写来处理,而不是手动删除,主要用的是
|t来处理.
针对上边说的几种情况来演示一下.
利用好Emmet来快速编写html代码,能提升工作效率不用在一个个敲闭合标签,简直是我等偷懒党神器.赶快詓耍耍吧.
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。