Brackets

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

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

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

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

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?

Bunları da okuyabilirsin
Yazı hakkındaki yorumun nedir?

34 Yorum
  1. Pinquitte
    3 Şubat 2016 - 22:12
    Cevapla
  2. Seyit Ali
    5 Şubat 2016 - 18:34
    Cevapla
  3. Burak Can KARA
    5 Şubat 2016 - 19:07
    Cevapla
  4. Safa ÇAKI
    5 Şubat 2016 - 19:42
    Cevapla
  5. Moobi
    5 Şubat 2016 - 20:39
    Cevapla
  6. Kozba
    7 Şubat 2016 - 12:37
    Cevapla
  7. Ersin Ataş
    14 Şubat 2016 - 08:46
    Cevapla
  8. Muhammed
    17 Şubat 2016 - 01:22
    Cevapla
    • Usluer
      17 Şubat 2016 - 10:43
      Cevapla
  9. Mustafa
    22 Şubat 2016 - 12:41
    Cevapla
  10. Creafe
    29 Şubat 2016 - 16:19
    Cevapla
  11. Sezer
    2 Mart 2016 - 00:26
    Cevapla
    • Usluer
      2 Mart 2016 - 19:08
      Cevapla
  12. Ahmet
    7 Mart 2016 - 00:56
    Cevapla
  13. Mehtap
    7 Mart 2016 - 22:00
    Cevapla
  14. Selim
    8 Mart 2016 - 22:31
    Cevapla
  15. seams
    9 Mart 2016 - 02:04
    Cevapla
  16. Arzu
    15 Mart 2016 - 04:35
    Cevapla
  17. Eren Keskin
    27 Mart 2016 - 19:18
    Cevapla
  18. Ziya
    8 Nisan 2016 - 17:29
    Cevapla
  19. Ali Yaman
    11 Nisan 2016 - 03:58
    Cevapla
  20. Yasin
    5 Mayıs 2016 - 15:00
    Cevapla
  21. Buğra
    14 Mayıs 2016 - 02:38
    Cevapla
  22. Erdem OFLAZ
    16 Temmuz 2016 - 14:13
    Cevapla
  23. Selim
    6 Ağustos 2016 - 02:06
    Cevapla
  24. Serkan
    8 Eylül 2016 - 18:26
    Cevapla
  25. ercan mercan
    27 Ağustos 2017 - 00:27
    Cevapla
  26. Emre
    17 Ekim 2017 - 20:37
    Cevapla
    • Usluer
      24 Ekim 2017 - 11:41
      Cevapla
      • Selim
        18 Kasım 2017 - 19:43
        Cevapla
        • Usluer
          22 Kasım 2017 - 20:32
  27. Mete Han
    8 Nisan 2018 - 04:46
    Cevapla
  28. Cee
    9 Mayıs 2018 - 17:51
    Cevapla