Brackets Editör ve Eklentiler

Brackets programı, açık kaynak kodlu ve ücretsiz olarak sunulan bir HTML, CSS ve Javascript editörü olarak karşımıza çıktı ve Adobe tarafından resmi olarak sunuluyor.

Adobe uygulamalarının kullanıcı kitlesini düşünerek bir bütünlük ve entegrasyonu sağlamak için özellikle arayüz geliştiricileri hedeflediği editörü Brackets'i yayınladı.

Brackets (Parantezler), minimal ancak güçlü olacak şekilde tasarlanmıştır. Web arayüzü Geliştirme için en iyi ücretsiz araçlardan biridir. Hafif, hızlı ve kullanımı kolaydır.

Brackets HTML, CSS ve JavaScript'te yazılmıştır.

Brackets metin editörü ile çalışmak o kadar kolaydır ki kodlamaya kolayca başlayabilirsiniz.

Brackets MIT Lisansı vardır ve ilk olarak 2014 yılında Adobe tarafından tanıtılmıştır. Şüphesiz en iyi HTML ve CSS Editör'dür. JavaScript desteği bile hızla büyüyor ve JavaScript dosyalarını düzenlemek için iyi miktarda uzantıya sahip.

En son güncellemede, PHP desteği de mevcut ve bu düzenleyiciyi kullanarak PHP kodunuzu da çalıştırabilirsiniz.

Brackets Editörü için Eklenti Nasıl Yüklenir?

Kodlar yazarken size kolaylık sağlayacak eklentiler yüklemek istiyorsanız Brackets'in eklenti yöneticisini kullanabilirsiniz. Eklenti yöneticisi ise editörde sağ tarafta bulunan Eklenti yöneticisi butonuna basın.

Karşınıza şöyle bir ekran çıkacaktır:

Bu ekranda Search kısmına eklenti ismini yazıp yüklemek istediğimiz eklentiyi buluyoruz. Ondan sonrada İnstall butonuna basarak indiriyoruz ve gerekli ayarlamalar otomatik olarak yapılıyor.

Brackets Emmet Eklentisi

Emmet, Html ve CSS iş akışını büyük ölçüde geliştiren, biz web geliştiricilerinin sıklıkla kullandığı, kodları daha hızlı yazıp zamandan tasarruf etmek için tercih ettiğimiz bir eklenti diyebiliriz.

Eklentiler bölümünde search kısmına emmet yazın aratın gelen eklentiyi install butonuna basın kurun.

Emmet eklentisinin kullanımına örnek vermek gerekirse:

div>ul>li*5>a kısaltılmış kodları yazdıktan sonra editörün tamamlaması için klavyenizden TAB tuşuna basmalısınız.

Beautify Eklentisi

Braackets içerisinde Javascript, JSON, CSS, Sass ve HTML kodlarının düzgünleştirilmesi için kullanabileceğiniz güzel bir eklenti.

Kullanımı ise basittir. Örneğin Brackets editöründe sağ tarafta sihirli değnek butonu çıkar. Ona bastığınız anda kodlar düzenlenir. Eğer klavyeden yapmak istiyorsanız şu tuşlara basmalısınız:

Ctrl+Alt+B

örnek vermek gerekirse şöyle bir örnek verebilirim.

Bu düzensiz kodları Beautify eklentisi kullanarak kodları şöyle bir düzenli hale getirebiliriz:

Brackets İcons Eklentisi

En kullanışlı eklentiler arasında bulunan Brackets – Icons eklentisi dosya uzantılarına bağlı olarak dosya isimlerinin yanında simgeler göstererek daha pratik ve göz yormayan bir geliştirme ortamı sağlar. Dosyaları ilk bakışta tanımlayabilmenizi kolaylaştırır.

Lorem Pixel Eklentisi

Web sitenizi kodlamaya başlarken bazı kısımlarda resim kullanmak durumunda olursunuz. Ama uygun boyutta resim bulmak oldukça uğraştırıcı bir iştir.

Lorem pixel eklenti ile ile rastgele resimler elde etme kolaylaşır.

Lorem Pixel eklentisi, istediğiniz boyutta resim sağlar. Böylece uygun boyuttaki resimleri uzunca aramak yerine kolay bir şekilde, örnek bir resim istediğiniz boyutta ekleyebilirsiniz.

Documents Toolbar

Sol tarafda açık olan dökümanların sekme halinde yukarda açık olan dökümanların gözükmesini sağlar.

Bracket Temalar

Renk temaları, Bracket editör kullanıcı arabirimindeki renkleri tercihlerinize ve çalışma ortamınıza uyacak şekilde değiştirmenize olanak tanır.

Tabiki tema şeçerken gözünüzün kodları şeçme ve gözü yormayan temalar seçmenize dikkat edin.

Temaları eklentiler kısmından thema kısmında search kısımına istediğimiz temayı aratıp yüklüyebiliriz.

view (göster) kısmındanda themes kısmında istediğimiz temayı seçebiliriz.

Önereceğim temalar

• Brackets Dark thema
• Deep Ocean
• VsCode Dark
• Galaxy Theme
• Base 16 Ocean Light Theme
• Rainbow
• Dark Spark
• Meterial Color(light)
• CodePen
• Sweet Dark
• Black Metal
• Cobalt 2
• Notepad ++ Theme | Deefault