Qubyt

İçeriğiniz hazırlanıyor…

Qubyt Studio Editör Ne Yapabiliyoruz?

Qubyt Studio v1.2.1

Qubyt Studio, web geliştirme için tasarlanmış masaüstü bir editördür. Monaco editör çekirdeği kullanır; HTML, CSS ve JavaScript ile yazarken hızlı ve rahat kod yazmanızı sağlar. Aşağıda, editörü açtığınızda karşınıza çıkacak özellikleri baştan sona, hikaye gibi anlatıyoruz.

Öğrenme Modu (deneysel)

Öğrenme Modu, şablonlar ve Bileşen Galerisi gibi ekranlarda ek açıklamalar ve ipuçları gösteren isteğe bağlı bir deneydir. Açıkken öğrenmeye yönelik metinler ve vurgular görünür; kapalıyken arayüz sade kalır. Davranış ve içerikler geri bildirimle netleştirilecektir.

Kısa yenilikler (özet)

Son geliştirmelerden seçmeler tam sürüm notları yeni sürüm numarasıyla birlikte güncellenir:

  • Explorer: Ağaçta son tıklanan öğe odaktayken F2 ile yeniden adlandırma, Delete ile silme (onay penceresi ile).
  • Şablonlar Başlangıç projeleri: Bileşen Galerisi’nde ayrı sekme; kart ve kimlik/detay sayfası; mini proje oluşturma sonrası kısa bildirim.
  • Mini proje örnekleri (Todo, Fetch vb.): Örnek kodda kalıcı veri, güvenli ağ isteği ve kullanıcıya uygun hata mesajları.
  • Kütüphane örnekleri kataloğu: Sağdaki kavram tablosunda ve akışta, metin içi kod (backtick ile çevrili parçalar) için belirgin vurgu.

Desteklenen diller

İlk adımda hangi dillerle çalışabileceğinizi bilmek önemli. Bu sürümde editör beş dili destekler; dosya uzantısına göre dil otomatik seçilir:

  • HTML .html, .htm
  • CSS .css
  • JavaScript .js, .mjs, .cjs
  • TypeScript .ts, .tsx
  • Markdown .md, .markdown

Renkli sözdizimi (syntax highlighting), tamamlama önerileri ve kısayollar her dil için ayrı çalışır. Böylece hangi dosyada olursanız olun, editör sizi doğru modda karşılar.

Qubyt Theme ve tema özelleştirme

Editörü açtığınızda ilk dikkatinizi çeken, koyu arka planlı Qubyt Theme olacaktır. v1.2.1 ile paketlenmiş tema, Version 2 paletiyle uyumludur (Bileşen Galerisi tipografisiyle tutarlı). Anahtar kelimeler, değişkenler, stringler, HTML etiketleri, CSS özellikleri ve attribute'lar dil türüne göre farklı renklerde gösterilir. Parantez çiftleri de renklendirilir; eşleşen parantezler vurgulanır. İsterseniz kendi temanızı da oluşturabilirsiniz; v1.0.5 ile gelen tema özellikleri şunlardır:

  • Tema Oluşturucu: Activity bar'daki palet ikonu ile açılan tam ekran panelde HTML, CSS, JavaScript ve TypeScript için seçicilerin (etiket, öznitelik, metin, yorum vb.) renklerini değiştirip kendi temanızı oluşturabilirsiniz. Ortak seçiciler sayesinde HTML etiket rengi ile CSS seçici rengi aynı anda güncellenir.
  • Tema kaydetme: Oluşturduğunuz temayı isim vererek kaydedebilirsiniz; temalar userData/themes/ altında JSON olarak saklanır.
  • Tema değiştirici: Üst bar'da "Terminal Çalıştır" butonunun solunda palet ikonu ile tema seçimi yapılır. Qubyt Theme (varsayılan) veya kaydedilmiş özel temalardan birini seçebilirsiniz.
  • Senkronizasyon: Tema değiştiriciden tema seçtiğinizde hem editör hem de Tema Oluşturucu'daki renk seçicileri otomatik güncellenir.

Kod yazarken özellikler

Projeyi açıp ilk satırı yazmaya başladığınızda, editör sizi birçok küçük yardımla karşılar. Bunlar zaman kazandırır ve dikkatinizi kodun mantığına vermenizi sağlar.

Etiketler ve HTML

  • Auto Close Tag: > yazınca kapanış etiketi eklenir, imleç ortada kalır.
  • Auto Rename Tag: Açılış veya kapanış etiketini değiştirince eşleşen etiket otomatik güncellenir.
  • Eşleşen etiket vurgulama: İmleç bir etiket adındayken eşleşen aç/kapa etiketi vurgulanır.
  • Etiketle sar (Wrap): Seçili metni sağ tık menüsünden belirttiğiniz etiketle sarabilirsiniz.
  • HTML5 şablon: HTML dosyasında ! yazıp Tab'a basınca DOCTYPE ve html/head/body iskeleti eklenir.

Parantez ve tırnak

JavaScript veya CSS yazarken parantez ve tırnak işaretleri de sizi yalnız bırakmaz:

  • Otomatik kapanan parantez ve tırnak: (, [, {, ", ' yazınca karşı karakter eklenir, imleç ortada kalır.
  • Parantez renklendirme: (), [], {} çiftleri farklı renkte gösterilir; eşleşen parantez vurgulanır.

Satır işlemleri

Satırları taşımak, kopyalamak veya yorum satırına çevirmek sık yaptığınız işlerdendir. Bunlar da kısayollarla hızlanır:

  • Satır taşıma: Alt+Yukarı Ok / Alt+Aşağı Ok ile satırı taşıyabilirsiniz.
  • Satırı kopyala (Duplicate line): Ctrl+Shift+D ile satırı veya seçimi aşağı kopyalar.
  • Satır ve blok yorum: Seçili satırlara Ctrl+/ ile // veya /* */, HTML'de <!-- --> eklenir.
  • Renkli yorumlar: Yorum satırında özel işaretler ve kelimeler farklı renkte gösterilir:
    • //! Önemli (kırmızı)
    • //* Not / vurgu (yeşil)
    • //? Soru (mavi, italik)
    • TODO, FIXME, XXX, HACK Her biri ayrı renkte (sarı, pembe, mor, turuncu)

Tamamlama ve snippet'lar

Yazarken Tab tuşu sizin en iyi arkadaşınız olur. Her dilde farklı tamamlama önerileri ve snippet'lar devreye girer:

HTML: Etiket adı yazınca tamamlama önerisi gelir; link, script, meta, form, input gibi etiketler için hazır attribute'lu snippet'lar vardır. src=" veya href=" sonrası proje dosyalarından yol önerilir (gömülü <style> veya <script> içinde yol önerileri kapalıdır). Emmet: link:css, .container, ul>li*5, div.container>ul>li*5 gibi basit ve karmaşık kısaltmalar Tab ile genişletilir.

CSS: d:f → display: flex;, m0a → margin: 0 auto;, p0, tac, j:c, a:c, w:100, pos:a gibi kısayollarla tamamlama.

JavaScript: for, forin, forof, function/fn, if, ifelse, arrow, try, addEventListener için Tab ile snippet eklenir.

TypeScript: Tip tanımları, interface, type, const, function ve diğer yapılar için tamamlama ve snippet desteği.

Desteklenen kütüphaneler

Yardım menüsündeki "Desteklenen Kütüphaneler" ile Alpine.js, htmx, Lodash, dayjs, Axios, Zustand (vanilla), Chart.js, Bootstrap 5 ve Shoelace için tamamlama ve snippet desteğini görebilirsiniz. Bu kütüphaneleri projenizde kullanıyorsanız yazmayı kolaylaştırır:

  • Alpine.js: x-data, x-show, @click vb. tamamlama. CDN ve eklenti (Persist, Collapse) snippet'ları. HTML'de x- veya @ yazın; alpine veya alpine:plugins + Ctrl+Space ile CDN.
  • htmx: hx-get, hx-post, hx-swap, hx-trigger, hx-target tamamlama. hx-swap=" içinde innerHTML, outerHTML, beforeend vb. değer önerileri. HTML'de hx- yazın; htmx + Ctrl+Space ile CDN.
  • Lodash: CDN snippet. JS/TS'te _. veya lodash. sonrası yardımcı fonksiyon önerileri (map, filter vb.). HTML'de lodash + Ctrl+Space ile CDN script; iç <script> içinde de nokta tamamlamaları.
  • dayjs: Tarih/saat. Çekirdek + eklenti API önerileri (utc, tz, isBetween, fromNow…); dayjs.extend( ile dayjs_plugin_* globalleri. HTML'de dayjs, dayjs:locale, dayjs:utc, dayjs:timezone, dayjs:localizedFormat, dayjs:customParse, dayjs:isBetween + Ctrl+Space. İsteğe bağlı LSP: docs/starter-types/qubyt-globals.d.ts.
  • Axios: HTTP istemcisi. JS/TS ve HTML içi <script> içinde axios. sonrası tamamlama (get, post, create, interceptors vb.). HTML gövdesinde axios + Ctrl+Space ile CDN script. Örnek: docs/axios-example/index.html.
  • Zustand (vanilla): Küçük durum mağazası. HTML’de zustand veya script:zustand + Ctrl+Space: çekirdek createStore örneği. zustand:persist, zustand:devtools, zustand:selector + Ctrl+Space. Script içinde store.persist. sonrası persist API tamamlaması. React useStore snippet’larda yok; modül önizleme için yerel sunucu veya canlı önizleme önerilir. İsteğe bağlı: qubyt-globals.d.ts içinde zustand/vanilla modül bildirimi. Örnek: docs/zustand-example/index.html.
  • Chart.js: Grafik kütüphanesi (UMD). JS/TS ve HTML içi <script> bloğunda Chart. (büyük C) tamamlama (register, defaults, getChart vb.). HTML gövdesinde chart veya chart:date + Ctrl+Space ile CDN. Örnek: docs/chartjs-example/index.html.
  • Bootstrap 5: CDN snippet. HTML gövdesinde (tercihen <head>) bootstrap, link:bootstrap veya bootstrap:css + Ctrl+Space: jsDelivr 5.3.3 CSS + isteğe bağlı bootstrap.bundle.min.js (Popper dahil). Sınıf adı IntelliSense yok; yalnız stil için bootstrap:css yeterli, modal/dropdown JS için tam bootstrap snippet gerekir. Örnek: docs/bootstrap-example/index.html.
  • Shoelace: Web bileşenleri. HTML'de <sl-*> etiket tamamlamaları; seçili bileşenlerde öznitelik tamamlaması (v1.1.8+). Emmet/CDN: shoelace, shoelace:dark, shoelace:bundle + Ctrl+Space.

Diğer yazma özellikleri

Bunların yanı sıra formatlama, sekme yönetimi ve dosya geçişi gibi günlük işlerinizi kolaylaştıran detaylar da vardır:

  • Belgeyi biçimlendir: Sağ tık → Belgeyi biçimlendir veya Shift+Alt+F. Yapıştırınca (Ctrl+V) ve kaydetmede (Ctrl+S) otomatik format uygulanır.
  • Sağ tık menü: Etiketle sar, Snippet olarak ekle, Kes, Kopyala, Yapıştır, Belgeyi biçimlendir.
  • Satır numaraları ve minimap: Sol tarafta satır numaraları, sağ tarafta minimap. Monaco üst mavi çizgi kaldırıldı; daha sade editör görünümü.
  • Sekmeler: Her açık dosya için sekme; kaydedilmemiş işareti; Ctrl+S ile kaydetme. Sekmeleri sürükle-bırak ile sıralayabilirsiniz.
  • console.log rengi: JavaScript'te console.log teal (#63BFA5) ile vurgulanır.
  • Ctrl+click ile dosya açma: src=" veya href=" içindeki göreli yola Ctrl+click ile o dosyayı açabilirsiniz. Zaten açık dosyaya tıklanınca hata vermeden o sekmeye geçiliyor.

Proje ve dosyalar

Kod yazmanın ötesinde, projenizi düzenlemek de önemli. Explorer paneli ile dosya ağacınızı yönetir, yeni dosya ve klasörler oluşturur, sürükle-bırak ile taşıma yaparsınız. İşte burada neler var:

  • Klasör aç: Tek bir proje kökü açılır, dosya ağacı ağaç görünümünde listelenir.
  • Explorer otomatik açılma: Klasör açıp Tamam'a bastığınızda Explorer paneli otomatik olarak görünür hale gelir.
  • Yeni dosya / yeni klasör: Proje kökü veya seçili klasör altında oluşturulur.
  • Sürükle-bırak: Dosya ve klasör taşıma. Explorer'dan dosyayı editöre sürükleyerek de açabilirsiniz.
  • Bağlam menüsü: Dosyada sağ tıkta sadece Yeniden adlandır, Taşı, Sil (Yeni dosya/klasör gösterilmez). Klasörde veya boş alanda sağ tıkta tam menü: Yeni dosya, Yeni klasör, Yeniden adlandır, Taşı, Sil.
  • Tüm klasörleri kapat: Tek tıkla tüm açık klasörler kapatılır; açık/kapalı durum saklanır.

Yol çubuğu (Breadcrumb)

Editörün üst kısmındaki yol çubuğu, nerede olduğunuzu gösterir ve hızlı geçiş imkânı sunar. Proje kökünden başlayan yol, tıklanabilir parçalara bölünmüştür:

  • Proje kökünden yol: Yol çubuğu sadece proje klasöründen başlar; c:, Users, Desktop gibi sistem yolları gösterilmez.
  • Tıklanabilir segmentler: Yol parçalarına (klasör veya dosya adı) tıklayınca o klasörün içeriği dropdown ile listelenir.
  • Hızlı dosya geçişi: Dropdown'dan bir dosyaya tıklayarak doğrudan açabilirsiniz.
  • İmleç konumu: Satır ve sütun bilgisi yol çubuğunda gösterilir.

LSP (Language Server Protocol)

Klasör açıldığında otomatik başlayan LSP, VS Code ile aynı dil motorlarını kullanır. Proje genelinde akıllı tamamlama, tanım atlama, referans bulma ve hata gösterimi sağlar:

  • JavaScript / TypeScript: Completion (IntelliSense), Go to Definition (Ctrl+Click), Find References (sağ tık), Hover (dokümantasyon), Rename Symbol (F2), Code Actions (Quick Fix), Diagnostics (squiggle).
  • HTML: Etiket ve öznitelik tamamlama, hover, hata gösterimi.
  • CSS / SCSS / Less: Özellik ve değer tamamlama, hover, diagnostics.
  • JSON / JSONC: Schema tabanlı tamamlama, hover, hata gösterimi (package.json, tsconfig.json vb.).
  • Error recovery: LSP server beklenmedik şekilde çökerse otomatik yeniden başlatma; renderer tarafında WebSocket kapanınca yeniden bağlanma.

WebSocket yalnızca 127.0.0.1 üzerinde dinler; CSP ile izin verilen portlar sınırlıdır.

Lint ve hata gösterimi

Kod yazarken hataları erken yakalamak, debug süresini kısaltır. ESLint tabanlı lint sistemi, JavaScript dosyalarınızda yaygın sorunları tespit eder ve hem editörde hem de Problems panelinde gösterir. Şunlara dikkat eder:

  • ESLint tabanlı lint: JavaScript dosyalarında tanımsız değişken (no-undef), kullanılmayan değişken (no-unused-vars), boş fonksiyon (no-empty-function), sabit koşullu döngü (no-constant-condition), erişilemeyen kod (no-unreachable) ve kullanılmayan parametre tespiti. _ ile başlayan parametreler yok sayılır.
  • Squiggle (alt çizgi): Hata ve uyarılar editörde kırmızı/sarı çizgi ile işaretlenir; üzerine gelince mesaj görünür.
  • Problems paneli: Tüm hatalar ayrı bir listede; tıklayınca ilgili satıra gider.
  • Warnings paneli: Uyarılar (örn. kullanılmayan değişken) ayrı sekmede listelenir.
  • Sekme geçişi: Alt panelde TERMINAL, PROBLEMS ve WARNINGS sekmeleri arasında geçiş yapılabilir; her sekmede badge ile sayı gösterilir.

Debug Tools

JavaScript ve TypeScript ile çalışırken console.log eklemek sık yaptığınız bir iştir. Debug Tools, Turbo Console Log benzeri bu işi tek tıkla veya kısayolla hızlandırır. Üst bar'daki böcek ikonuna tıklayın; açılan menüden log ekleyebilir, mevcut logları temizleyebilir veya projedeki tüm log satırlarını listeleyebilirsiniz.

  • Insert Log: Seçili değişken veya imleç altındaki kelime için console.log("[dosya:satır] varName:", varName); formatında satır ekler. Kısayol: Ctrl+Shift+L.
  • Insert Warn / Error / Debug: Aynı mantıkla console.warn, console.error, console.debug ekler. Kısayollar: Ctrl+Shift+W, Ctrl+Alt+E (Error), Ctrl+Shift+D.
  • Remove Logs: Dosyadaki tüm console.log/warn/error/debug/info satırlarını (aktif ve yorum satırı) siler.
  • Toggle Logs: Aktif console satırlarını yorum satırına çevirir; yorum satırı olanları tekrar aktif eder.
  • Find Logs: Projedeki tüm console.* satırlarını listeler; tıklayınca ilgili dosya ve satıra gider.

Bileşen Galerisi ve Bloklar

v1.2.0 ile proje içi bileşenleri ve yeniden kullanılabilir HTML parçalarını tek akışta yönetirsiniz:

  • Bileşen Galerisi: components/ için geliştirilmiş onboarding; components.json ile kart açıklamaları ve klasör grupları. Galeri metin boyutları ve kütüphane örneklerinde güvenlik notu kutusu güncellendi.
  • Bloklar & katalog sekmesi: blocks/, blocks.json ve proje kökünde qubyt-insert-catalog.json ile tanımlanan yollardan tek tıkla HTML ekleme.

Paneller

Activity bar'daki ikonlar, editörün farklı yüzlerini açar. Şablonlardan notlara, Markup & Style Analyzer'dan Live Page'e kadar her panel, belirli bir işe odaklanır. Sol tarafta gezinirken şunlarla karşılaşırsınız:

  • Şablonlar paneli: Proje ve arayüz şablonları; aynı panelde Bileşen Galerisi (proje bileşenleri, bloklar, katalog) ve Başlangıç projeleri sekmesi (mini HTML/CSS/JS şablonları Şablonlar → Mini projeler ile aynı kayıtlar). Ortak kart ve kimlik/detay akışı.
  • Snippet'lar paneli: Kendi snippet'larınızı ekleyip kullanma.
  • Notlar paneli: Activity bar'daki not ikonu ile açılır. Yeni not oluşturma (modal ile isim girişi), notes/ klasöründe çoklu not, sağ tık ile aç/yeniden adlandır/sil. Markdown ile TODO, fikirler ve notlarınızı tutun.
  • Markup & Style Analyzer: Activity bar'daki fırça ikonu ile açılır. HTML ve CSS dosyalarında kullanılmayan sınıf, tanımsız sınıf, eksik alt, geçersiz property ve boş kural tespiti. Sonuçlar Hatalar, Uyarılar ve Bilgiler olarak gruplanır; tıklayınca ilgili satıra gider. Sistem çalışıyor, test ve geliştirme devam ediyor.
  • Markdown önizleme: .md dosyası açıkken breadcrumb'taki Önizleme butonu ile split view; başlıklar, listeler, tablolar, linkler, görev listeleri, Mermaid diyagramları ve yerel resimler desteklenir.
  • Çalıştır: Projeyi yerel sunucu ile tarayıcıda önizleme.
  • Live Page: Editör yanında anlık canlı önizleme. HTML/CSS kaydedilince otomatik yenilenir. Layout Inspector ile önizlemede elemente tıklayıp Display, Layout, Spacing, Typography, Color, Flex gibi özellikleri panelden değiştirirsiniz; değişiklikler doğrudan ilgili CSS dosyasına yazılır. Çoklu CSS dosyası desteği (style.css, components.css vb.), @media ve @supports blokları içindeki kurallar güncellenir. Sistem çalışıyor, test ve geliştirme devam ediyor.
  • Alt panel (Terminal / Problems / Warnings): VS Code tarzı altta panel; üç sekme arasında geçiş. Terminal: npm, npx, node <dosya.js> komutları. Problems ve Warnings: lint hataları ve uyarıları listeler. Sürükleme ile yükseklik ayarı (Explorer ile aynı yapı).
  • Activity bar: Ana sayfa, Explorer, Şablonlar (içinde Bileşen Galerisi), Tema Oluşturucu, Developer Insights, Notlar, Markup & Style Analyzer, Project Map, CSS Builder arasında geçiş.

Developer Insights

Kod yazma alışkanlıklarınızı merak ediyorsanız, Developer Insights tam size göre. Activity bar'daki grafik ikonu ile açılan dashboard; günlük süre, ardışık gün serisi, dil kullanımı ve aktivite heatmap gösterir. Tüm veriler yerelde saklanır; hiçbir şey sunucuya gönderilmez. Dashboard'da:

  • Bugün / Seri / Haftalık: Günlük süre, ardışık gün serisi ve haftalık toplam.
  • Dil kullanımı: HTML, CSS, JS, TS vb. dil süreleri; logolar dosya ikonları ile aynı renklerde (HTML turuncu, CSS mavi, JS sarı vb.).
  • Dosya aktivitesi: Klasör bazlı dosya süreleri; klasör blokları arasında ayırıcı çizgiler.
  • Aktivite heatmap: GitHub katkı grafiği benzeri görselleştirme; son 12 haftanın günlük kod yazma sürelerini renk yoğunluğu (Az → Çok) ile gösterir.
  • Tema değiştirici erişimi: Dashboard açıkken üst bar'daki tema değiştirici her zaman üstte kalır.

Arayüz ve deneyim

Editör, sadece kod yazarken değil; sunum yaparken, bilgi alırken veya birden fazla proje açarken de size eşlik eder. Sunum modu, dil seçimi ve çoklu pencere desteği ile deneyim tamamlanır:

  • Dil değişikliği (i18n): Ayarlar menüsünden veya status bar'daki dil göstergesinden Türkçe / İngilizce arasında geçiş yapabilirsiniz. Menü, status bar, paneller ve arayüz metinleri seçtiğiniz dile göre güncellenir.
  • Sunum modu: Görünüm menüsünden veya Ctrl+Shift+P ile açılır. Menü, üst bar, sidebar, alt panel ve sekmeler gizlenir; sadece editör tam ekran kalır. Font boyutu artışı ve satır numaraları ayarlanabilir. Esc ile çıkılır.
  • Hakkında modalı: Yardım menüsünden erişilen özel koyu temalı Hakkında penceresi; sürüm bilgisi, qubytstudio.com ve GitHub Kaynak Kodları bağlantıları.
  • Hoş geldin sayfası: Proje açılmadığında Hızlı İpuçları, En Son Projeler ve diğer kartlar düzenli bir yerleşimle gösterilir.
  • Çoklu pencere: Her pencere bağımsız kapatılır; bir pencerenin kapatma düğmesi sadece o pencereyi kapatır.
  • Özel Evet/Hayır onay kutusu: Silme onayları (tema silme, dosya silme vb.) editör tasarımına uyumlu Evet/Hayır kutusu ile gösterilir; varsayılan tarayıcı penceresi kullanılmaz.

Ne yapamıyoruz? (Bu sürümde)

Editör şu an HTML, CSS, JavaScript ve TypeScript odaklıdır. Aşağıdakiler bu sürümde yok veya sınırlıdır:

  • Uzantı veya tema mağazası
  • Python, Go vb. dil desteği
  • Debugger (breakpoint, adım adım çalıştırma)
  • npm paket indirme ve script çalıştırma (npm install, npm run build vb.)

Özet

Bu sayfada anlattıklarımızın özeti, sürüm sürüm şöyle ilerledi:

v1.2.1: Öğrenme Modu (deneysel); Explorer’da ağaç odaklıyken F2 / Delete; Bileşen Galerisi’nde Başlangıç projeleri sekmesi ve mini proje örnekleri iyileştirmeleri; kütüphane örneklerinde satır içi kod vurgusu.

v1.2.0: Bileşen Galerisi Proje bileşenleri (components/) için geliştirilmiş onboarding, components.json ile kart açıklamaları ve klasör grupları. Yeni Bloklar & katalog sekmesi: blocks/, blocks.json ve proje kökünde qubyt-insert-catalog.json ile istenen yoldan tek tıkla HTML ekleme. Paketlenmiş Qubyt Theme paleti (Version 2 ile uyumlu). Galeri metin boyutları ve kütüphane örnekleri güvenlik notu kutusu tasarımı güncellendi.

v1.1.8: Shoelace için seçili bileşenlerde öznitelik tamamlaması; Desteklenen Kütüphaneler modalında genişlik/tipografi ve kartlarda “Sınırlar”. HTML <style> içinde Qubyt HTML/CDN/path önerilerinin kapatılması. Chart.js örnek sayfası, gömülü tamamlama test dosyası ve starter types güncellemeleri. Zustand vanilla: HTML zustand CDN snippet, kütüphane kartı ve zustand/vanilla starter types. Bootstrap 5.3 CDN: bootstrap, link:bootstrap, bootstrap:css + Ctrl+Space.

v1.1.7: Desteklenen Kütüphaneler Alpine.js, htmx, Lodash, dayjs, Axios, Chart.js ve Shoelace için tamamlama ve snippet desteği. HTML'de x-, @, hx- attribute tamamlamaları; hx-swap, hx-trigger değer önerileri; alpine, htmx, lodash, axios, zustand, chart (+ chart:date), dayjs (+ dayjs:*), shoelace (+ shoelace:dark, shoelace:bundle) Emmet snippet'ları; Shoelace için <sl-*> etiket tamamlamaları; Chart.js Chart. tamamlamaları. Yardım menüsünden "Desteklenen Kütüphaneler" ve "CDN snippet'ları" ile detaylar.

v1.1.6: i18n TR/EN dil desteği (menü, status bar, paneller). Tab sürükle-bırak ile sekme sıralama. Monaco üst mavi çizgi kaldırıldı. Explorer'dan editöre dosya sürükle-bırak.

v1.1.5: LSP Faz 6 JSON Language Server eklendi (package.json, tsconfig.json vb. için completion, diagnostics, hover). Error recovery: LSP server çökmesinde otomatik yeniden başlatma; WebSocket kapanınca renderer yeniden bağlanır. LSP bağlantı düzeltmesi: editor-ready ile klasör açılışında zamanlama (race condition) sorunu giderildi.

v1.1.4: Kaydedilmemiş değişiklik uyarısı (uygulama kapatılırken). Explorer'da ana klasör adı başlıkta. CSS Builder paneli Flexbox/Grid ile CSS üretimi. Live Page ve Markup & Style Analyzer @import desteği.

v1.1.3: Project Map sistemi eklendi Activity bar'daki harita ikonu ile dosya yapısı (ASCII tree), Import Graph (script, link, import, require) ve Component Graph (iframe, object, embed, SSI) görselleştirmesi. Status bar ve Hakkında penceresinden "Powered by Electron" metni kaldırıldı; arayüz sadeleştirildi.

v1.1.2: Terminal panel tab geçişi düzeltmesi (TERMINAL, PROBLEMS, WARNINGS tab'ları her zaman tıklanabilir).

v1.1.0: Live Page editörün en önemli sistemlerinden biri. HTML/CSS kaydedilince anlık canlı önizleme; Layout Inspector ile önizlemede elemente tıklayıp Display, Layout, Spacing, Typography, Color, Flex özelliklerini panelden değiştirme; değişiklikler doğrudan ilgili CSS dosyasına yazılır. Çoklu CSS dosyası desteği (style.css, components.css vb.), @media ve @supports blokları içindeki kurallar güncellenir. Markup & Style Analyzer iyileştirmeleri (bileşik seçiciler, boş kural mesajları).

v1.0.9: Markup & Style Analyzer, ESLint genişletmesi, Sunum modu (Ctrl+Shift+P), Aktivite heatmap.

v1.0.8: Not Sistemi, Debug Tools, Markdown önizleme (Mermaid, görev listeleri), Developer Insights dashboard.

Özetle: Proje yönetimi, snippet/şablon, ESLint lint, terminal, tarayıcı önizleme, tema özelleştirme, Problems ve Warnings panelleri ile VS Code benzeri bir deneyim. Live Page ile canlı önizleme ve Layout Inspector ile görsel düzenleme; "Web için tek odaklı" bir editör olarak geliştirilmektedir.

arrow_back Ana Sayfaya Dön