Editör Gibi Editör Brackets

Uzun yıllardır Notepad++ kullanan biri olarak her zaman alternatif bir editör aramışımdır. Her ne kadar Notepad++ işimi görse de bundan öteye gidemiyor. Diğer editörlere baktığımda gerek arayüz bakımından gerek sağladıkları kolaylık bakımından daha iyi editörler mevcut. (Brackets, Sublime Text vb.) Bu yüzden de kullandığım editörü değiştirmenin vakti gelmişti. Şunu belirtmeliyim ki Notepad++’tan vazgeçemememin sebebi FTP’deki dosyaları anlık olarak düzenlemeye yarayan NppFTP eklentisiydi.

İlk olarak alternatif editörlerden Sublime Text‘i kullanmaya karar verdim. Fakat bir türlü ısınamadım. Ayrıca NppFTP’nin yerini doldurabilecek de bir eklenti bulamadım. Ardından Brackets kullanmaya başladım. Tabi baktığım ilk şey NppFTP eklentisinin yerini doldurabilecek bir eklenti olup olmamasıydı. Bunun için Brackets’ta işimi görecek bir eklenti bulunca Brackets’ı kullanmaya devam ettim. Bu yazımda da hem bu kullandığım eklentilerden hem de Brackets’ın nimetlerinden bahsetmeyi düşünüyorum.

Brackets’tan kısaca söz etmek gerekirse Adobe tarafından geliştirilen ve HTML, CSS ve JavaScript ile yazılan açık kaynak kodlu bir kod editörü diyebiliriz. Pek çok işe yarar özelliği mevcut fakat ben sürekli kullandıklarımın birkaçından bahsetmek istiyorum.

Hızlı CSS Düzenleme

Herhangibir css sınıfını düzenlemek istediğinizde sınıfın üzerine gelip CTRL+E yapmanız yeterli. Bu sayede o sınıfı düzenlemek için css dosyasını açıp, düzenlemek istediğiniz yeri bulup, düzenledikten sonra tekrar diğer dosyaya geçmenize gerek kalmıyor. Tüm bu işlemleri hızlı bir şekilde halledebiliyorsunuz.

Canlı Önizleme

Görselin sağ üst tarafında kırmızı ile belirttiğim butona tıkladığınızda bir Chrome tarayıcısı açılıyor. Bu tarayıcıda kodlarda yaptığınız değişikleri tarayıcı sayfasını yenilemeden görebiliyorsunuz. Bu özellik çift monitör kullananlar için büyük bir nimet.

Hızlı Görüntüleme

Bu özellik sayesinde görsellerin veya renklerin üzerine geldiğinizde küçük bir pencere açılıyor ve bu pencerede görselin veya rengi görebiliyorsunuz.

Brackets’ta Kullandığım Eklentiler

Beautify

Eğer kodlarınızın düzensiz olduğundan muzdaripseniz bu eklenti kodlarınızdaki düzensizliğe çare oluyor. Yapmanız gereken tek şey CTRL+SHIFT+L kısayolunu kullanmanız. HTML, CSS ve JavaScript kodlarınızı bu şekilde düzenleyebilirsiniz.

Brackets Icon

Sol taraftaki çalışılan dosyalar bölümünde bulunan dosyalarınızın başına dosyalar uygun icon ekleyerek hangi dosyalarda çalıştığınızı belirgenleştirebilirsiniz. Ayrıca daha estetik bir görüntü katıyor. Desteklediği dosya uzantılarını ise buradan öğrenebilirsiniz.

Lorem Pixel

Bazı zamanlarda herhangibir proje üzerinde çalışırken çeşitli görsellere ihtiyacımız oluyor. Birkaç görsele ihtiyacımız olduğunda internetten bir şekilde buluyoruz. Fakat çeşitli boyutlarda bir çok görsele ihtiyacımız olduğunda bu baya bir vaktimizi alıyor. İşte bu eklenti de tam burada imdadımıza yetişiyor. İstediğimiz boyutlarda görseli projemizde kullanabiliyoruz. Eklentiniz bize sunduğu görselin her sayfa yenilenişinde değişmesi de ayrı bir güzellik tabi. Ayrıca siyah beyaz görseller de kullanabiliyoruz.

eqFTP

Notepad++’ı bırakamamamın sebebinin NppFTP eklentisi olduğunu söylemiştim. İşte eqFTP eklentisi de Brackets’ta bu işi görüyor. FTP hesabınızı bağlayıp editör üzerinden FTP’deki dosyalarınızı açıp düzenleyerek kaydedebiliyorsunuz. Bu sayede dosyayı FTP’den indirip düzenleyip tekrar FTP’ye atmanıza gerek kalmıyor. Eklentiye yeni bir bağlantı oluştururken automatization sekmesinde set automatization seçeneklerinden classic, alt kısımdan da dosya kaydedildiğinde yükle seçeneğini işaretlemeyi unutmayınız.

Emmet

Severek kullandığım herkese de kullanmasını tavsiye ettiğim, yararlı eklentilerin en başında gelen bir eklenti. Eklentinin temel amacı sizin kod yazmanızı hızlandırmak. Bunu en güzel, örnek vererek açıklayabilirim sanırım.

<div id="usluer">
    <div class="ust"></div>
    <div class="orta">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reprehenderit id maiores dolore, odio, aliquid officiis adipisci odit quam dolorem animi, sed, amet pariatur iusto aspernatur in deleniti voluptates veniam?</p>
    </div>
    <div class="alt">
        <ul>
            <li class="siralama"><a href="">Sıra - 1</a></li>
            <li class="siralama"><a href="">Sıra - 2</a></li>
            <li class="siralama"><a href="">Sıra - 3</a></li>
            <li class="siralama"><a href="">Sıra - 4</a></li>
            <li class="siralama"><a href="">Sıra - 5</a></li>
        </ul>
    </div>
</div>

Yukarıdaki kodları tek tek yazmak biraz zamanımızı alacaktır. Özellikle büyük bir projeyi düşündüğümüzde neden zamandan kazanmayalım? Aşağıdaki kodları yazıp CTRL+ALT+ENTER tuşlarına bastığımızda bize yukarıdaki kodları otomatik olarak oluşturuyor.

#usluer>.ust+.orta>(p>lorem)^.alt>ul>li.siralama*5>a{Sıra - $}

İlk başta baktığınızda bu kodlar karmaşık gözükebilir fakat bu sizi aldatmasın. Birkaç alıştırmadan sonra artık ne kadar hızlı kod yazdığınızın farkına varacaksınız. Ayrıca tüm bu kısaltmalara eklentinin buradaki sayfasından, nasıl yazacağınıza da buradaki sayfasından ulaşabilirsiniz.

Bana kahve ısmarlamak ister misin? ☕