Editör özeti

Editörde öne çıkanlar

Qubyt Studio, web geliştirme için tasarlanmış masaüstü bir kod editörüdür. Bu sayfada uygulama içindeki başlıca özellikleri kartlar halinde özetledik. Ayrıntılı anlatım ve sürüm notları için Özellikler sayfasına bakabilirsiniz.

Tüm özellikler aktif geliştirme altında; iyileştirmeler ve testler devam ediyor.

Live Page

HTML önizleme, Layout Inspector ile önizlemede elemente tıklayıp CSS düzenleme, anlık güncelleme. Çoklu CSS, @media, @import desteği.

Statik HTML/CSS projelerinde en iyi sonuç

Sınırlama: Dinamik elementlerde satır bulunamaz.

Dil Değişikliği (i18n)

Türkçe / İngilizce arayüz. Ayarlar menüsü veya status bar'daki dil göstergesinden geçiş. Menü, status bar, paneller seçilen dile göre güncellenir.

TR/EN dil desteği

Öğrenme Modu

İsteğe bağlı: şablonlar ve Bileşen Galerisi’nde ek açıklamalar ve ipuçları; açıkken öğrenmeye yönelik metinler görünür, kapalıyken arayüz sade kalır.

Deneysel

Sınırlama: İçerik ve davranış geri bildirimle netleşecektir.

Desteklenen Kütüphaneler

Tamamlama & snippet

Alpine.js, htmx, Lodash, dayjs, Axios, Zustand (vanilla ESM), Chart.js, Bootstrap 5 ve Shoelace için tamamlama ve snippet desteği.

HTML

x-, @, hx- öznitelik tamamlamaları; hx-swap, hx-trigger değer önerileri; <sl-*> etiket ve Shoelace öznitelik tamamlamaları.

CDN kısayolları Ctrl+Space

alpine alpine:plugins htmx lodash axios zustand zustand:persist zustand:devtools zustand:selector chart chart:date bootstrap bootstrap:css link:bootstrap shoelace shoelace:dark shoelace:bundle dayjs dayjs:locale dayjs:utc dayjs:timezone dayjs:localizedFormat dayjs:customParse dayjs:isBetween

JS / TS

_. veya lodash., dayjs., dayjs.extend(, axios., Chart. (büyük C, UMD); HTML içi <script> bloğunda da aynı nokta tamamlamaları.

Notlar

Gömülü <style> / <script> içinde Qubyt markup/CDN/path önerileri kapalı. İsteğe bağlı LSP: docs/starter-types/qubyt-globals.d.ts. Yardım menüsü: "Desteklenen Kütüphaneler", "CDN snippet'ları". Kütüphane örnekleri görünümünde kavram tablosu ve akışta satır içi kod parçaları belirgin vurgulanır.

Alpine.js · htmx · Lodash · dayjs · Axios · Zustand · Chart.js · Bootstrap · Shoelace

LSP (Language Server Protocol)

Klasör açıldığında otomatik başlayan IntelliSense. JS/TS: completion, Go to Definition (Ctrl+Click), Find References, Hover, Rename (F2), Code Actions. HTML, CSS, JSON: completion, diagnostics, hover. Error recovery: server çökmesinde otomatik yeniden başlatma.

VS Code ile aynı dil motorları

Sınırlama: Proje dışı tanımlara (node_modules vb.) gidilemez.

CSS Builder

Flexbox veya Grid ile CSS üretin. Görsel kontrollerle display, flex-direction, justify-content, align-items, gap vb. Üretilen CSS önizlemesi, Insert CSS ile editöre ekleme. Live Page ve Layout Inspector'dan bağımsız çalışır.

Flexbox/Grid ile hızlı layout oluşturma

Sınırlama: Sadece Flexbox ve Grid özellikleri; element seçimi yok.

Code Diagram

Mermaid sınıf diyagramı, extends kalıtım okları, metod listesi. AST parse ile görsel sınıf ilişkileri. Zoom desteği.

JavaScript dosyaları için sınıf diyagramı

Sınırlama: Sadece .js, .mjs, .cjs; TypeScript henüz desteklenmiyor.

Debug Tools

Seçili değişken için console.log/warn/error/debug ekleme, Remove All Logs, Toggle Comments. Find Logs ile projedeki tüm console satırlarını listeleme.

Turbo Console Log benzeri

Sınırlama: Sadece editör odaklıyken çalışır; Insert Error Ctrl+Alt+E.

Markup & Style Analyzer

HTML: eksik alt, class kullanımı. CSS: kullanılmayan/tanımsız sınıflar, geçersiz property, boş kurallar. Hatalar/Uyarılar/Bilgiler gruplaması. @import desteklenir.

Deneysel HTML/CSS kalite analizi

Sınırlama: Bazı edge case'lerde false positive/negative olabilir.

Dev Analytics

Kod yazma süresi, seri (streak), dil kullanımı, aktivite heatmap, dosya aktivitesi. Tam ekran dashboard. Tüm veri yerel, gizlilik odaklı.

Deneysel

Sınırlama: Uzun süreli test devam ediyor; heatmap sadece günlük toplam.

Notes

Markdown formatında proje notları. notes/ klasöründe .md dosyaları. Yeni not oluşturma, liste, açma, yeniden adlandırma, silme.

Markdown Preview

.md dosyalarında HTML önizleme, Mermaid diyagramları, göreli img path çözümleme. Kaydetme sonrası canlı güncelleme.

Sınırlama: Sadece .md dosyaları; özel Markdown uzantıları sınırlı.

Theme Creator & Switcher

Dil bazlı renk seçicileri (HTML, CSS, JS, TS), canlı önizleme, özel tema kaydetme. Tema değiştirici ile anında uygulama, oturumlar arası hatırlama.

Bileşen Galerisi & Bloklar

v1.2.1: components/ onboarding, components.json ile kartlar ve klasör grupları. Başlangıç projeleri sekmesi: mini proje kartları, kimlik/detay akışı, oluşturma sonrası bildirim. Bloklar & katalog sekmesi: blocks/, blocks.json, kökte qubyt-insert-catalog.json ile tek tıkla HTML ekleme. Qubyt Theme Version 2 paleti ve galeri tipografisi; kütüphane güvenlik notu kutusu.

v1.2.1 proje bileşenleri ve blok kataloğu

Templates

HTML5 Boş, HTML5+CSS+JS, Tek sayfa şablonları. Hedef klasör seçimi, tek tıkla oluşturma.

Snippets

Kayıtlı kod parçacıkları, yeni snippet ekleme, düzenleme, silme. Dil bazlı gruplama.

Problems

LSP ve ESLint diagnostics birleşik görünüm. Alt panelde Problems ve WARNINGS sekmeleri; hata/uyarı gruplaması, satıra tıklayınca gitme. JS/TS: LSP + ESLint. HTML, CSS, JSON: LSP diagnostics.

LSP + ESLint ile çoklu dil

Sınırlama: ESLint sadece JS/TS; LSP tüm desteklenen dillerde.

Project Map

Dosya yapısı ASCII tree, Import Graph (script, link, import, require), Component Graph (iframe, object, embed). Proje bağımlılıklarını görselleştirme.

Dosya ve import ilişkileri

Explorer

Dosya ağacı, yeni dosya/klasör, sürükle-bırak (dosya/klasör taşıma, Explorer'dan editöre dosya sürükle-bırak). Ağaç odaklıyken F2 yeniden adlandırma, Delete silme (onaylı). Context menü, sekme entegrasyonu, tüm klasörleri kapat. Ana klasör adı başlıkta gösterilir.

Sınırlama: node_modules, .git, .vscode atlanır.

Presentation Mode

Tam ekran kod görünümü. Activity bar, sidebar, menü gizlenir. Font artışı, satır numarası ayarı. Ctrl+Shift+P ile açılır, Esc ile çıkılır.

Sekmeler

Her açık dosya için sekme, kaydedilmemiş işareti, Ctrl+S ile kaydetme. Sekmeleri sürükle-bırak ile sıralayabilirsiniz.

arrow_back Ana Sayfaya Dön Tüm özellikler (uzun anlatım)