Brackets Editörü İçin Önerilen Eklentiler

Brackets, Masaüstü için sublimetext editör’den sonra bence en iyi ve en başarılı editör özellikleri bakımından brackets editor’dur makalenin devamında brackets editor’e ait kendi özellikleri ve daha çok özellik katabileceğiniz bazı eklentileri sizlerle paylaşmaya çalıştım.

Brackets Editörü İçin Önerilen Eklentiler

Öncelikle Brackets nedir özellikleri nelerdir diyenler için kısa ve anlaşılır bir tanıtım video’su.Code

Kullandığım ve yararlı gördüğüm bazı brackets eklentilerini aşağıda sizler için paylaştım. Eklenti yüklemek için menüden Dosya(File) > Extension Manager(Eklenti Yöneticisi) ve açılan pencereden Avaible sekmesine geçerek yükleyeceğiniz eklentiyi arayabilirsiniz yüklemek için ise Install(Yükle) butonuna tıklayın yüklü eklentiler için ise Installed sekmesini kullanmalısınız silmek için ise Remove(Kaldır) butonunu kullanınız.

Bootstrap 3 Skeleton

Bootstrap
Bootstrap ile ilgili iskelet yapısı ve örnek bazı kodlar ile bir HTML sayfası şablonu oluşturmaktadır tek yapmanız gereken menüden Dosya(File) > Eklenti yöneticisi(Extension Manager)’dan Bootstrap 3 Skeleton adlı eklentiyi yükleyip ardından CTRL+N tuş kombinasyonları ile yeni bir dosya oluşturup sonrasında menüden Dosya(File) > New Bootstrap 3 Document seçeneğine tıklamak olacaktır sonuç olarak baştada belirttiğimiz gibi bootstrap css, js’leri dahil edilmiş ve jquery kütüphanesi dahil edilmiş örnek bazı bootstrap kodları eklenmiş olarak bir şablon oluşturacaktır.

Brackets Icons

Sol tarafta yer alan proje dosyalarınız ve açık olan dosyalarınızın uzantısına göre çıkacak olan iconlar ile daha belirgin bir şekilde çalışabilirsiniz dosyalarınızla.

Bracktes Icon

Desteklediği dosyaların listesi

  • JavaScript
  • JSON
  • TypeScript
  • CoffeeScript
  • LiveScript
  • HTML
  • SVG
  • XML
  • PHP, SQL
  • Java
  • Ruby, Embedded Ruby, RDoc, Cucumber Feature files
  • CSS, SASS, Less, Stylus
  • Shell script, Batch
  • Jade
  • TXT
  • Log
  • Markdown
  • PNG, JPG, JPEG, TIFF, ICO
  • GIF
  • MP4, WebM, OGG
  • MP3, WAV
  • EOT, TTF, WOFF
  • GitIgnore, GitModules
  • NPMIgnore
  • HTAccess, HTPasswd, Conf
  • YAML
  • Project, Jscsrc, Jshintrc, Csslintrc, Todo, Classpath
  • Zip, Rar, 7z, Tgz, Tar, Gz, Bzip

Brackets Rezymer

Rezymer
HTML DOM yapısını kullanarak rahatça arama işlemeri veya diğer DOM işlemlerini gerçekleştirebilirsiniz aşağıdaki animasyon olarak kısa bir özetini görebilirsiniz eklentinin DOM yapısnı bilenler hemen ne işle yaradığını anlayacaklardır.

HTML Skeleton

Bootstrap Skeleton gibi bir html şablon oluşturmaktadır fakat bu eklentinin farkı hiçbir link, script etiketi tanımı yapılmamış içerik olmayan düz bir html şablonu oluşturmaktadır tabi iskeleti oluşturmak için çıkacak pencerede bazı seçenekleri işaretleyerek link, script ve img etikerlerinide isteklet oluşturma sırasında gerçekleştirebilirsiniz.

Lorem Ipsum

Lorem Ipsum, masaüstü yayıncılık ve basın yayın sektöründe kullanılan taklit yazı bloğu olarak tanımlanır. Lipsum, oluşturulacak şablon ve taslaklarda içerik yerine geçerek yazı bloğunu doldurmak için kullanılır. eklentiyi yükledikten sonra lorem yazıp tab tuşuna bastığınızda sizin için rastgele anlamı olmayan kelimelerden oluşan bir cümle oluşacaktır eğer ne işime yarayacak diyorsanız web projelerinizde tasarımınızı denemek açısından bazı metinlere ihtiyac duyarsınız işte bu metinlere kolayca ulaşmak için kullanabilirsiniz.


Themes for Brackets

Eklentinin adından’da anlaşıldığı üzere Brackets uygulaması için onlarca tema yüklemektedir.

Response for Brackets

Responsive tasarımlarınızı canlı olarak brackets üzerinde test etmek için yapmanız gereken Response for Brackets adlı çok kullanışlı olan eklentiyi yüklemelisiniz..
Alttaki video ile aracın tam olarak ne işe yaradığını ve neler yapabildiğine gözatabilirsiniz.

Code Folding

Code Folding
Özellikle Visual Studio’da sıkça kullanmış olduğum bu açma kapama özelliği ile sadece işiniz olan bölgeye odaklanmanız açısından çok kullanışlı olduğunu düşünüyorum aynı özelliği bu eklenti sayesinde brackets editörüne kazandırabilirsiniz.

Brackets 1.3 versiyonu ile beraber dahili olarak gelmektedir.


Lorem Pixel

Pixel
Web tasarım ile uğraşırken farklı farklı görsellere ihtiyacımız olduğu oluyor hemen internetten proje amacına uygun olacak görsel aramaya başlıyoruz veya boyutuna göre ama her seferinde zaman kaybına dönüşebiliyor bu görsel arama işi, Görsel işini url ile otomatik değişen bir şekilde saniyeler içerisinde ayarlamak için tek yapmanız gereken başlıkda belirtilen eklentiyi kurmak ve görsel opsiyonlarını seçmek.

Autoprefixer

Prefixer
CSS kodu yazarken kullandığınız özelliklerin farklı tarayıcılardada çalışması için ön ekli bir biçimde yazılması gerekebilir örnek transfrom ile rotasyon işlemlerinin yapabildiğimizi biliyoruz fakat transform özelliğinin internet explorer uyumluluğu için -ms, chrome ve safari gibi webkit motoru kullanan tarayıcılar içinde -webkit ön ekli şekilde tranform özelliğini ayrı olarak tanımlanması gerekiyor bazen bu ön ekler 3-5’e kadar çıkıyor bu dertten kurtulmak için yapmanız gereken başlıkda belirtilen eklentiyi yüklemek. Siz standart olarak css kodunu yazın ardından kod yazımı bittiğinde otomatik olarak ön ekli hallerini oluşturacaktır.

Brackets için bootstrap otomatik tamamlama kısayolları ile bootstrap temelli bir uygulama geliştiriyorsanız ve çok fazla aşina değilseniz bootstrap’a o zaman bu eklenti ile dökümantasyona ihtiyaç duymadan bootstrap dökümantasyon sitesindeki neredeyse tüm örneklere kısayol snippetları ile kolaylıklar oluşturup kullanabileceksiniz.
acb-bootstrap-snippets
4.2/5 - (10 votes)

Murat Öner sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et