html的find框架,VS Code HtmlFindClass 插件介绍

这款插件诞生于工作中,在写大量的前端代码之后,发现有的工作比较重复,浪费时间,于是想能不能通过工具来解决。起初是拿Java写的,但是它不利于推广,因为很多前端同学不掌握Java。以至于是一直我自己在使用。

后来很长时间之后,我自己再用还得查一查以前的使用文档。这还得了,瞬间就有一个想法,搞一个插件出来。

于是一下午时间加足马力写出了这个插件并发布了出来。

插件的作用

现在的工作常常在写小程序,写小程序页面的过程是:

页面骨架结构 >> 填充class属性 >> 在css文件中创建对应的class结构 >> 开始调试样式 >> css样式填充css文件

插件省下了最中间的步骤,不需要将定义好的class属性再一个个复制到css文件。

比如Html文件中有这么些class:

50dd50b23bc1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

在这里插入图片描述

现在可以通过该插件一键生成:

50dd50b23bc1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

在这里插入图片描述

插件图示:

50dd50b23bc1?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

在这里插入图片描述

Features

在插件支持的文件中,单击右键->选择HtmlFindClass。如若选中的文件格式正确,则会在选中文件的所在目录输出一个以"文件名+.css"的文件,右下角会提示生成文件的路径。这样就省去了单独拷贝class样式的时间。

目前支持的文件格式有:html、vue、wxml。

如果需要生成id或者其它选择器,欢迎大家上手完善这个插件。

Known Issues

暂时没有收到问题反馈,静待更新。

Release Notes

1.1.0

去除冗余依赖库

去除冗余命令

去除冗余输出日志

完善输出结果内容

降低最低兼容版本号

增加对html,wxml,vue文件的支持

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值