VS Code HtmlFindClass 插件介绍
这款插件诞生于工作中,在写大量的前端代码之后,发现有的工作比较重复,浪费时间,于是想能不能通过工具来解决。起初是拿Java写的,但是它不利于推广,因为很多前端同学不掌握Java。以至于是一直我自己在使用。
后来很长时间之后,我自己再用还得查一查以前的使用文档。这还得了,瞬间就有一个想法,搞一个插件出来。
于是一下午时间加足马力写出了这个插件并发布了出来。
插件的作用
现在的工作常常在写小程序,写小程序页面的过程是:
页面骨架结构 >> 填充class属性 >> 在css文件中创建对应的class结构 >> 开始调试样式 >> css样式填充css文件
插件省下了最中间的步骤,不需要将定义好的class属性再一个个复制到css文件。
比如Html文件中有这么些class:
现在可以通过该插件一键生成:
GIF图示
插件图示:
Features
在插件支持的文件中,单击右键->选择HtmlFindClass。如若选中的文件格式正确,则会在选中文件的所在目录输出一个以"文件名+.css"的文件,右下角会提示生成文件的路径。这样就省去了单独拷贝class样式的时间。
目前支持的文件格式有:html、vue、wxml。
如果需要生成id或者其它选择器,欢迎大家上手完善这个插件。
我的联系方式:sahadev@foxmail.com
Known Issues
暂时没有收到问题反馈,静待更新。
Release Notes
1.1.0
- 去除冗余依赖库
- 去除冗余命令
- 去除冗余输出日志
- 完善输出结果内容
- 降低最低兼容版本号
- 增加对html,wxml,vue文件的支持
Git项目地址为:https://github.com/sahadev/htmlfindclass ,欢迎大家移步阅览。
在哪可以找到?
在VS code中,选择插件,输入“htmlfind”便可找到,安装重启即可。
VS Code HtmlFindClass 插件介绍相关推荐
- Vs Code中Vue代码格式插件,Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
文章目录 一.插件的介绍与安装 1.Vetur插件 2.ESLint 插件 3.Prettier - Code formatter插件 二.相关文件配置 总结 前面主要先对插件进行介绍和如何安装,之后 ...
- vscode 结束_8 个给前端的顶级 VS Code 扩展插件
翻译:京程一灯 原文:https://1stwebdesigner.com/top-free-extensions-for-vs-code/ 微软的 VS (Visual Studio) Code 是 ...
- 用Code::Blocks Code profiler插件剖析程序性能
用Code::Blocks Code profiler插件剖析程序性能 By QiangHaohao 今天偶然发现Code::Blocks自带代码剖析插件:Code profiler,之前一直命令行来 ...
- vscode 默认初始化_Visual Studio Code(vscode)使用介绍
[TOC] vscode 安装 软件直接在vscode官网(https://code.visualstudio.com/)下载安装. 建议将下图红框中勾选,安装完成后可通过鼠标右键打开vscode. ...
- vscode必备插件_10个必备的Visual Studio Code (VS code)插件
我基本上每天都用vs code,我喜欢的小巧,开源,免费并且非常强大.尤其它非常多的插件可以免费使用.这里我把经常用插件介绍给大家,希望大家留言讨论 我把VS code 插件分两类,一类是处理可视化的 ...
- VS Code 神器插件:代码一键运行,支持超过 40 种语言!
程序员转行学什么语言? https://edu.csdn.net/topic/ai30?utm_source= csdn_bw 记得两年多前,笔者那时还在写 PHP,同时需要写 Python 和 No ...
- VS Code开源软件介绍——史上最优秀的 IDE ?
第一次使用VS Code时你应该知道的一切配置 https://www.cnblogs.com/qianguyihao/archive/2019/04/18/10732375.html 深受C/C++ ...
- Notepad++的第三方插件介绍中文翻译
最近发现Markdown编辑器Typora的内测免费版也过期不能使用了,不过这个问题最后通过下载更早的版本解决了. 但是也因此,我彻底了解了一下各大编辑器对Markdown支持的情况,其中了解了一下N ...
- Visual Studio Code(插件篇):Visual Studio Code 必装的 10 个高效开发插件(扩展)
插件,亦成为 扩展. 使VSCode 如虎添翼. 本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. 相关文章推荐:Visual Studi ...
最新文章
- 下列哪项不属于以太网交换机的特点_网络测试作业题
- Spring Boot下的Tomcat,你真的会用吗?
- 学会python之后-学会Python后,人生简直开挂了!
- java实现分发_关于JAVA中事件分发和监听机制实现的代码实例
- oracle导入java包时出错,Oracle导入导出的常见错误
- boost::io::ostream_joiner模块相关的测试程序
- 多线程 空值线程数_【开发者成长】深入理解多线程编程
- MacBook 如何通过命令终端进入 U 盘内的目录
- 第94课 函数的参数 《小学生C++编程入门》 例94.1
- 听说这家云计算公司要搞事情
- 590. N叉树的后序遍历
- alc662声卡注入id_ALC662驱动方法AppleALC+Lilu+DSDTalc662
- 德芙网络营销策略ppt_德芙网络营销案例ppt采集
- CTSC2016滚粗记 前篇
- 【xlwings api语言参考】Worksheet.Cells 属性
- 玩转Fasttext
- 中烟工业依维柯车型智能传感硬件云控平台
- ant design 预览图片_Ant Design Pro上传图片
- 达内php难吗,深圳达内php教学好吗 说说我学习的经历
- 构建更好Web客户端,Taylor Hughes讲述Skit框架背后的故事