评论

让你的微信开发者工具支持Emmet语法,大大提升开发效率

让你的微信开发者工具支持Emmet语法,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

Emmet介绍

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

语法基本规则

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

微信开发者工具安装扩展

  • windows 未测试,仅测试了 mac 版本
  • 下载最新版的微信开发者工具,笔者使用 1.03.2004262
  • 导航栏中选择编辑 => 打开编辑器扩展目录
  • 下载附件并解压,粘贴至目录内
  • 导航栏中选择设置 => 扩展设置 => 编辑器自定义扩展,开启
  • 重启开发者工具

附件

  • 扩展来源:vscode 内置
  • 有 vscode 的朋友也可以右键 vscode 展开包内容 => 在 contents\resources\app\extensions 中找到该扩展

⏬ 百度云网盘 提取码: 5k7p

最后一次编辑于  2020-05-06  
点赞 3
收藏
评论

3 个评论

登录 后发表内容