A smart Visual Studio Code extension that helps you visually trace and verify paired HTML tags (like <div>) with stable numbering. Designed to simplify debugging, teaching, and editing complex HTML structures.
- 🔢 Visual numbering: Each opening tag gets
↑n, and its matching closing tag gets↓n - ❌ Error detection: Unmatched tags are marked in red (
↑✘,↓✘) - 📚 Smart pairing algorithm: Automatically maps tags while minimizing pairing errors
- 🧠 Manual override via
data-tag="n"for precision editing - 🧩 Currently supports: Only ,
, , , , , , - 🛠️ WIP (Work In Progress): Actively developed and being improved
- Download or clone the extension.
- Run it via VS Code Extension Host (or package as
.vsix) - Open an
.htmlfile — numbered tags will appear automatically. - (Optional) Add
data-tag="5"to manually assign a tag pairing.
<div data-tag="1"> <div data-tag="2"> Content </div> </div>- Support for other HTML tags
- Improved manual pairing UI
- Support for XML, JSX, Vue templates
- Advanced conflict resolution for tag structure changes
Made by Rijal Saepuloh
Built with care to assist educators, developers, and HTML learners.
Ekstensi Visual Studio Code yang membantu Anda melihat dan memverifikasi pasangan tag HTML seperti <div> secara visual dengan penomoran yang stabil dan mudah dibaca.
Cocok untuk debugging, mengajar, dan menyunting HTML yang kompleks.
- 🔢 Penomoran visual: Tag pembuka diberi
↑n, dan tag penutupnya↓n - ❌ Deteksi kesalahan: Tag yang tidak berpasangan akan ditandai merah (
↑✘,↓✘) - 📚 Algoritma pairing cerdas: Meminimalkan error saat menandai pasangan tag
- 🧠 Kontrol manual dengan
data-tag="n"untuk pengaturan yang lebih tepat - 🧩 Saat ini hanya mendukung: Tag ,
, , , , , , - 🛠️ Status: WIP (Work In Progress) — masih dikembangkan aktif
- Unduh atau clone ekstensi ini.
- Jalankan dari host ekstensi VS Code (atau jadikan
.vsix) - Buka file
.html— nomor tag akan langsung muncul. - (Opsional) Tambahkan
data-tag="5"untuk mengatur pasangan tag secara manual.
<div data-tag="1"> <div data-tag="2"> Konten </div> </div>- Dukungan untuk tag HTML lainnya
- UI pairing manual yang lebih interaktif
- Dukungan untuk XML, JSX, dan template Vue
- Resolusi konflik lanjutan saat struktur tag berubah
Dikembangkan oleh Rijal Saepuloh
Dibuat dengan semangat untuk membantu pengajar, pengembang, dan pelajar HTML.