是否有一个支持HTML属性的代码折叠的编辑器？

Question

我最近一直在编写原子CSS，HTML模板可能会变得很嘈杂：

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

有没有可用于折叠某些HTML属性（如class）的编辑器或编辑器插件？

我认为在理想情况下，class会自动折叠，并且当我的光标突出显示某个特定元素时，其class属性就会扩展。

<div class="...">
  <div class="md:flex-shrink-0">
    <img class="..." src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="...">
    <div class="...">Marketing</div>
    <a href="#" class="...">Finding customers for your new business</a>
    <p class="...">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

反正这样-甚至可能完全隐藏class。

如果它不存在，有人可以给我一些如何编写这样一个插件的提示吗？