這款插件誕生于工作中，在寫大量的前端代碼之后，發現有的工作比較重復，浪費時間，于是想能不能通過工具來解決。起初是拿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 插件介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。