Code-Breadcrumbs, büyük projelerde gezinirken veya hata ayıklarken (debugging) kaybolmanızı önleyen, projedeki tıklama, dosya açma ve kod içi gezinme geçmişinizi dinamik ve görsel bir akış şeması (flow diagram) olarak yan panelde (Sidebar Webview) gösteren bir VS Code eklentisidir.
Görsel gezinme geçmişi akış şeması
🚀 Özellikler
Dinamik Gezinme Takibi: Editörde farklı dosyalara geçtiğinizde veya dosya içinde büyük satır atlamaları yaptığınızda bu hareketleri otomatik olarak kronolojik birer düğüm (node) olarak kaydeder.
Kod Önizleme Tooltipi: Akış şemasındaki herhangi bir adımın üzerine geldiğinizde, o adımdaki kodun ve çevresinin (3 satır) önizlemesini glassmorphic bir tooltip ile gösterir.
Doğrudan Git/Işınlan (Jump-to): Akış şemasındaki bir düğüme tıkladığınızda editör otomatik olarak o dosyaya ve tam olarak o satıra konumlanır.
Symbol Desteği (⚡ Context): VS Code'un Outline API'sini kullanarak o sırada imlecin hangi sınıf/fonksiyon (örn: authController > loginUser) içinde olduğunu tespit eder ve düğümün altında gösterir.
Yön/Düzen Değiştirme (Toggle Layout): Akış şemasını dikey (Vertical) veya yatay (Horizontal) hizalamaya tek tıkla dönüştürebilirsiniz.
Pinleme & Sabitleme: Önemli adımları pinleyerek, geçmiş temizlendiğinde veya sınır aşıldığında silinmesini önleyebilirsiniz.
Zoom & Pan: Fare tekerleğiyle resmi yakınlaştırabilir/uzaklaştırabilir (zoom) ve boş alana tıklayıp sürükleyerek tuvali kaydırabilirsiniz (pan).
🛠️ Nasıl Kullanılır?
Eklentiyi kurduktan sonra VS Code yan panelinde Code-Breadcrumbs ikonuna tıklayın.
Editörde dosyalarınız arasında geçiş yapın ya da kod içerisinde (örneğin 10 satırdan fazla) atlamalar yapın.
Yan panelde gezinme geçmişinizin otomatik ve animasyonlu olarak çizildiğini göreceksiniz.
Bir adıma geri dönmek için düğümün üzerine tıklamanız yeterlidir.
Bir adımı silmek için düğüm üzerindeki X (Delete) butonunu, sabitlemek için Pin butonunu kullanabilirsiniz.
Geçmişi tamamen temizlemek için üst menüdeki Clear Trace butonunu kullanabilirsiniz.
📦 Kurulum & Paketleme (.VSIX)
Eklentiyi yerel olarak paketlemek ve VS Code'a yüklemek için aşağıdaki adımları takip edin:
Eklentiyi test etmek için VS Code'da F5 tuşuna basarak Extension Development Host penceresini açabilirsiniz.
Paketleme (Packaging)
Eklentiyi paketleyip .vsix dosyası elde etmek için:
npm run package
Bu komut esbuild ile kodları minify ederek production için derler ve code-breadcrumbs-1.0.0.vsix dosyasını oluşturur. Bu dosyayı VS Code eklentiler menüsünden "Install from VSIX..." diyerek doğrudan kurabilirsiniz.
