Geliştirici aracıCanlı

Formatter Hub: beş biçimlendirici, tek çalışma tezgâhı

Formatter Hub, JSON, CSS, HTML, SQL ve YAML için bir araç seti. Beş ayrı ekran yerine tek bir tezgâh kurdum; veri tarayıcıdan çıkmıyor.

Siteyi ziyaret et Tüm projeler

Müşteri

Kendi ürünüm

Yıl: 2026

Rolüm

Tasarım ve geliştirme

Hizmetler

Web uygulaması (Next.js)
Biçimlendirme motorları
Arayüz ve tasarım sistemi
Test altyapısı

Teknolojiler

Next.jsReactTypeScriptTailwindCSSVitestPlaywright

Öne çıkanlar

5 biçimlendirici, 1 tezgâh
Hata satır ve sütunla gösterilir
Veri tarayıcıdan çıkmaz

Problem

Çevrimiçi biçimlendiriciler genelde reklam, gereksiz adım ve belirsiz hata mesajlarıyla geliyor; yapıştırdığın verinin nereye gittiği de belli olmuyor.

Hedef; yapıştır, anında sonucu gör, hata varsa nerede olduğunu bil ve verinin tarayıcıda kaldığından emin ol şeklinde çalışan bir araçtı.

Çözüm

Beş aracı tek bir çalışma tezgâhında birleştirdim: solda giriş, sağda çıktı, ortadaki ayırıcı sürüklenebiliyor. Biçimlendirme için Prettier, sql-formatter ve yerel JSON kullanıyorum; her biçimlendirici yalnızca ilgili sayfada yükleniyor.

Yazarken biçimlendirme; isteyen kapatıp Ctrl/⌘ + Enter ile çalıştırıyor
Hatalar satır ve sütunla gösteriliyor, editörde ilgili satır işaretleniyor ve tek tıkla oraya gidiliyor
JSON için daraltılabilir ağaç görünümü, anahtar sıralama; CSS için özellik sıralama; SQL için anahtar kelime büyük harf seçeneği
YAML'dan JSON'a çevirme
Dosya açma, editöre sürükleyip bırakma, panodan yapıştırma, kopyalama, indirme ve çıktıyı girişe taşıma
Girdi ve ayarlar yalnızca bu cihazda hatırlanıyor; telefonda Giriş ve Çıktı sekmeleri

Sonuç

Eski sürümdeki beş kopya ekranı ve düzenli ifadelerle yazılmış biçimlendiricileri sade bir mimariyle değiştirdim. Araç canlıda ve veri tarayıcıdan çıkmıyor.