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:

brackets extension

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.

brackets emmet extension

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.

brackets beatufiy extension

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

brackets beatufiy extension

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.

brackets icon extension

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.

brackets lorem pixel extension

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.

brackets document toolbar extension

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

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

6133

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
  • HTML ARKAPLANA MÜZİK EKLEME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.