美文网首页工具癖程序员
用VSCode加emmet极速创建网页

用VSCode加emmet极速创建网页

作者: DigiHacker | 来源:发表于2018-09-17 22:14 被阅读42次

Emmet是一个缩写扩展插件,VSCode已经内置,所以不用配置了。 其它文本编辑象vim, pycharm也有相应的插件支持。

下图是一个简单的演示,可以感受下它的威力

image

在创建html文件后,输入html:5 按tab键, 就会创建比较完善的html5框架代码


1.png

它还支持类似jquery的选择器语法,输入div.container 就会创建class为container的div

2.png

还可以用ul>li *5 创建有五个li的ul, 尖括号代码下一级, 星号后面加数字则为连续创建n个前面的元素​

3.png

我们再创建一个略复杂的 table>(tr>td{item$5})5 则会创建一个表格有五行,每行有文本item1到item5的单元格, ()为创建独立分组,表示可以做为一个独立元素,这样我们就可以在后面*5去创建5个分组。而大括号为文本信息,就是单元格里的文本

4.png

这些就足以应付我们平时的大部分重复操作了。另外我们还可以用方括号输入属性值,加号创建同级元素,^创建上级元素,具体使用请百度后食用。

相关文章

网友评论

    本文标题:用VSCode加emmet极速创建网页

    本文链接:https://www.haomeiwen.com/subject/zbbdnftx.html