tidy css 介绍

起因:

使用vscode 写页面,特别是遇到重构的时候css代码有很多已经废弃,但还是会高亮显示出来，这些代码如果一个个手动注释会很麻烦，而且一些通用的css可能会再次使用，所以为了以后开发方便编写了tidy css来进行css整理。

vscode 插件列表

image.png

项目git地址 : tidy css
vsCode 插件地址 : tidy css

演示示例

tidy css

工具介绍:

1.一键注释未使用的css。
2.注释的css被使用，一键取消注释。
3.仅支持.vue/html文件。
4.执行方式，鼠标右键或Ctrl+Shift+T.

原理浅析：

首先命令输入挂载函数。获取当前操作的源码。

image.png

调用tidyReBody对源码字符串进行解析。

image.png

解析完成后返回标识好的css,调用tidyCss传入原html字符和标识的css列表。

image.png

结果输出新的文件源码，就是注释反注释的过程。

最后替换原文件。

image.png

过程中大量使用了正则表达式,如果你有更好的写法，欢迎指出。
欢迎修正、扩展。
遇到的问题欢迎提issuse。

最后已知问题汇总:
一些功能可能无法完成支持，欢迎提分支。
yes 代表不久后会修复，no代表不支持的，除非你提分支。

1. #号定义的css无法被正常解析.(yes) #在新版已被支持!
2. 多层嵌套只以第一层为准,未解析后面内容。(no)
3. 只支持单文件，不支持多级引用。(no)

以上完毕!