网站首页 > 开源技术正文

前端开发神器Emmet，让你的代码输入效率瞬间翻倍

wxchong 2024-10-15 16:57:59 开源技术 10 ℃ 0 评论

你还在一个字符一个字符的敲代码吗？如果是那你就太OUT了，现在什么都流行自动化，当然敲代码也不能落后啊。这款emmet神器，让你的代码输入效率瞬间翻倍！我们还是先看效果图：

怎么样，是不是很酷，快来学习一下吧。

Emmet，前身是大名鼎鼎的Zen Coding，借助css语法来提高输入html/css代码效率。Emmet作为一款插件被广泛运用在代码编辑器中，如sublime,webstrom,notepad++等都默认安装的有，如果没有可自行百度安装。

基本使用：输入Emmet命令，按Tab键即可。

一、快速生成html代码

1.生成html文档

html文档一般包括<html><meta><head><body>标签等,这些固定标签可以通过Emmet一键生成。

2.生成html标签

Emmet可以自动补全标签，只需输入尖括号内的标签名然后按下Tab键，一个完整闭合的标签就生成了。另外我们可以使用">"生成子元素，使用"+"生成同级元素，使用"^"返回上一层父级元素，使用"*"生成重复元素，使用"()"进行组合操作。

3.标签中添加类、id、文本和属性

Emmet使用"#"和"."来生成id和class属性,使用"[]"进行自定义属性，使用"{}"来定义标签内包含的内容。如果标签是div的话可以直接省略div。

4.自动生成编号

Emmet支持自动生成连续的编号，使用"$"符号快速生成相关属性的编号。如果需要生成多位的数字编号，可以组合使用多个"$"符号。如果需要指定反向编号，可以使用"$@-"符号。当然如果输出从某个编号到某个编号也是可以的，自己去探索吧。

二、快速生成css代码

1.快速生成css属性和值

书写css是枯燥无味的事情，Emmet可以帮你简化这个过程。生成的属性值默认是px，当然也可以生成其他单位，那就请记住下面几个符号：

"p"表示"%","e"表示"em","x"表示"ex"。

2.自动添加前缀

css一些属性经常要兼容各个浏览器而添加一大堆后缀，有了Emmet，一切烦恼轻松解决。例如下面生成圆角和渐变，太给力了。

三、其他功能

在Emmet中可以快速生成占位文字：

lorem<Tab键> 或者 lipsum<Tab键>

如果需要生成重复的Dummy文字，可以使用如下命令：

p*4>lorem

并且支持模糊输入，如下：

ul>lorem25.item*3<Tab>

这里就不贴效果了，自己去体验吧。

四、总结

大概介绍了Emmet的功能，是不能很强大很酷炫！学会之后只需敲入命令就可以瞬间生成一个网页，当然我不建议使用太复杂太长的命令。平常敲代码再也不用输入尖括号了，爽歪歪！赶紧动起手，体验开发的乐趣！

如果喜欢，欢迎订阅收藏，我是竹风，每天都有前端干货，带你玩转前端！