İşte Beklediğiniz Ayrıntılı Adobe Brackets İncelemesi

WordPress veya genel olarak web siteleriyle çalışan herkesin er ya da geç bir kod düzenleyiciye ihtiyacı vardır. İster hızlı ve kirli CSS korsanlığı, ister sayfa şablonlarını değiştirme veya oluşturma veya bir alt tema (örneğin, bir Divi teması için) oluşturma olsun, normal metin editörlerinin basitçe kesmediği pek çok fırsat vardır.

En iyi kod editörlerini bulmak için devam eden arayışımızda, Atom ve Sublime Text'i derinlemesine inceledik. Her ikisi de mükemmel seçenekler. Buradan başka bir popüler seçeneğe geçiyoruz: Brackets by Adobe.

Aşağıdaki makalede, bu kod düzenleyici hakkında bilmeniz gereken her şeyi öğreneceksiniz. Kurulum ve ilk izlenimlerden en iyi özelliklerine ve yetersiz kaldığı alanlara kadar. Hadi eğlenelim, olur mu?

Kurulum ve İlk İzlenimler

Brackets resmi web sitesinden ücretsiz olarak indirilebilir ve kurulumun tamamlanması sadece bir dakika sürer. Bundan sonra, Brackets sabit sürücünüzde yaklaşık 120 MB yer kaplar. Bu, Atom'un ihtiyaç duyduğunun yaklaşık yarısı, ancak Sublime Text'in birkaç katı büyüklüğünde. Aynı şey, iki rakip arasında bir yerde bulunan başlangıç ​​zamanı için de geçerlidir.

Brackets'in iyileştirme için düzenli aralıklarla anonim sağlık raporlarını Adobe'ye göndereceğine dair bir ipucu var. Daha fazla bilgiye ihtiyacınız varsa, bağlantıyı tıklayın ve sizi daha fazla ayrıntı içeren bir sayfaya götürecektir (raporların nasıl kapatılacağı dahil).

Bir HTML dosyası olarak yazılan giriş, sıcak bir karşılama, editörle ilgili ayrıntılar, öne çıkan özellikler ve ilk adımları içerir. Chrome'u yüklediyseniz, Google'ın tarayıcısında otomatik olarak açmak için sağ üst köşedeki şimşek simgesine tıklamak isteyebilirsiniz.

Bu, okumayı çok daha kolaylaştırır (aşağıda görebileceğiniz gibi). Bu özellik hakkında daha fazla bilgi aşağıdadır.

Kendi projenizi başlatmak istiyorsanız, Dosya > Klasörü Aç yoluyla normal yoldan gidebilir veya soldaki Başlarken yazan yerdeki açılır menüyü kullanabilirsiniz. Bu düğmeyi aktif projeler arasında geçiş yapmak için de kullanabilirsiniz.

Bunun dışında her şey oldukça standart. Dosyalar ve dizinler sol tarafta görüntülenir ve dosyalar tıklandığında sağ tarafta açılır. Çift tıklama veya düzenleme, onları yukarıya, Çalışma Dosyaları bölümüne taşır.

Buraya kadar net mi? Tamam, o zaman kod düzenleyicinin özellik açısından neler sunabileceğini görmek için Parantez başlığının altına göz atalım.

Adobe Brackets – Profesyoneller

Bu bölümde, Brackets'i diğerlerinden ayıran ve onu çalışmak için harika bir araca dönüştüren özelliklere bir göz atacağız.

Açık Kaynak ve Çapraz Platform

Brackets Mac, Windows ve Linux için mevcuttur ve Adobe tarafından başlatılan ve sürdürülen bir projedir. Ancak, ticari bir ürün değil, MIT lisansı altında lisanslanmış açık kaynaklı bir yazılım parçasıdır.

Editör nispeten genç (sürüm 1.0 2014'te yayınlandı) ve Github'da tutuluyor. Bir açık kaynak çabası olarak, herkes hem çekirdeğe hem de kendi uzantılarını göndererek katkıda bulunabilir. Projenin bir parçası olmak istiyorsanız Wiki'ye bakın.

Tabii ki, kullanıcılar için en büyük fayda: Brackets'in kullanımı tamamen ücretsizdir.

Katı Standart Özellikler

Kod düzenleyici, modern bir yazılım parçasından bekleyeceğimiz bir dizi standart özellik ile birlikte gelir.

İlk olarak, kod tamamlama var. Yazarken, Brackets, geçerli girişinize uyan kod öğeleri önerecektir. Teklifi, her şeyi tamamen yazmak için güzel bir kısayol olan bir düğmeye dokunarak kabul edebilirsiniz.

Ne yazık ki, bir ön uç düzenleyici olarak Brackets yalnızca HTML, CSS ve JavaScript için yerel desteğe sahiptir (ancak uzantılar aracılığıyla daha fazlası eklenebilir).

Kod vurgulama ise Python, Perl, C, C++ ve daha pek çok dilde mevcuttur. PHP de çalışıyor, bu WordPress kullanıcıları için harika bir haber. Kod katlama, kodunuzu daha okunaklı hale getirmek için paketi tamamlar.

Brackets ile birlikte gelen bir diğer ortak özellik, ana penceresini iki parçaya (hem dikey hem de yatay olarak) bölme yeteneğidir. Bu şekilde, kullanıcılar aynı anda birden fazla dosyayı görüntüleyebilir ve düzenleyebilir.

Tabii ki, bul ve değiştir de mevcuttur. Hiçbir kod editörü olmadan olmamalıdır.

Son olarak, ön işlemci kullanıcıları Brackets'in kod tamamlama dahil olmak üzere SASS, LESS, SCSS ve daha fazlasını tam olarak desteklediğini duymaktan memnun olacaklardır. Aslında, *.less dosyanızı kaydederken düzenleyici onu otomatik olarak CSS'ye kaydeder. İyi şeyler.

Hızlı Düzenleme

Parantezlerin ilk benzersiz özelliği hızlı düzenlemedir. Herhangi bir HTML öğesini işaretlediğinizde ve Cmd/Ctrl + E tuşlarına bastığınızda, Brackets bu öğeyle ilişkili tüm CSS'leri geçerli pencerede satır içi olarak açar.

Buradan ihtiyacınız olan düzenlemeleri yapabilirsiniz. Kapattığınızda, tüm değişiklikler bu öğeyle bağlantılı stil sayfasına otomatik olarak uygulanacaktır. Temiz, ha?

Buna ek olarak, hangi hex kodunun hangi rengi temsil ettiğinden emin değilseniz veya anında değişiklik yapmak istiyorsanız bu özellik bir renk seçiciyle birlikte gelir. Aynı işlev, düzenlemekte olduğunuz dosyada en çok kullanılan renkleri size gösterecektir.

Hızlı düzenleme, JavaScript işlevleriyle de çalışır. Ayrıca Brackets, kaydettiğinizde JavaScript kodunuzu kontrol edecek ve sorunları ekranın alt kısmında görüntüleyecek JSLint desteğine sahiptir. Buna ek olarak, hızlı düzenleme işlevini daha da geliştirmek için uzantılar var. Daha fazlası yakında.

Canlı önizleme

Bu şık özelliği zaten en başında gördük. Canlı önizleme düğmesine (yıldırım sembolü, hatırladınız mı?) tıklandığında, Parantezler mevcut dosyayı Google Chrome'da otomatik olarak açacaktır.

Ancak, sadece bu değil. İmleci düzenleyici içindeki bir HTML öğesinin içinde hareket ettirdiğinizde, tarayıcıda da vurgulanacaktır.

Hepsi bu değil. Kod tabanında bir şeyi değiştirdiğinizde, otomatik olarak ön uca da aktarılacaktır. Sayfayı yeniden yüklemenize gerek yok, Brackets hepsini kendi başına yapıyor.

Bu özellik, özellikle birden fazla ekranla çalışıyorsanız harikadır. Şu anda yalnızca Chrome'da ve HTML ve CSS için çalışır. Bununla birlikte, Brackets'in yapımcıları, gelecekte JavaScript'i ve tüm büyük tarayıcıları kapsayacak şekilde genişletme sözü verdiler.

Son Derece Uzatılabilir

Brackets editörü HTML, CSS ve JavaScript ile oluşturulduğundan, tamamen hacklenebilir ve genişletilmesi kolaydır. Pek çok geliştirici bu durumdan yararlandı ve kayıt defterinde veya doğrudan düzenleyicinin içindeki uzantı yöneticisi aracılığıyla bulabileceğiniz uzantılar oluşturdu.

İkincisi, sağ üst köşede veya Dosya > Uzantı Yöneticisi altında bulunur.

Açıldıktan sonra, yönetici mevcut tüm Braket uzantılarını listeleyecektir. Aradığınızı bulmak için arama işlevini kullanın. Pencere yüklendikten sonra, arama çok hızlıdır ve Yükle düğmesine tıklandıktan sonra uzantılar süper hızlı indirilir.

Buna ek olarak, daha önce indirdiğiniz uzantıları alana sürükleyip bırakarak veya yüklenecek bir URL sağlayarak yükleme seçeneğiniz vardır.

Üst çubukta, tema yüklemeye de geçebilirsiniz. Bunlar Görünüm > Temalar altında değiştirilir (Parantezler kutudan çıktığı anda yalnızca biri karanlık, biri açık olmak üzere iki temayla gelir) ve genel kullanıcı arayüzünün yanı sıra kod görüntüsünü de değiştirir.

Yüklü sekmesi altında, daha önce yüklediğiniz tüm uzantıları ve temaların yanı sıra bunları devre dışı bırakma ve kaldırma seçeneğini göreceksiniz. Yararlı Parantez uzantıları koleksiyonu için bu makaleye bakın.

Çoklu İmleçler

Son olarak, Brackets, Sublime'ın oyun kitabından bir sayfa çıkardı ve bir özellik olarak birden fazla imleç ekledi. Bu, kullanıcıların aynı dosyadaki birkaç yeri aynı anda düzenleyebileceği anlamına gelir.

İmleçleri yerleştirmek veya kod parçalarını istediğiniz yere işaretlemek için Ctrl düğmesini basılı tutun. Bundan sonra, aynı anda her yerde düzenleme yapmak için yazmaya başlayın.

Tümünü bul ve seç seçeneğiyle birleştiğinde, bu çok kullanışlıdır ve çok fazla zaman ve emek tasarrufu sağlar.

Adobe Brackets – Eksileri

Harika şeyler, değil mi? Yine de, Brackets'in daha iyi yapabileceği şeyler de var.

Ön Uç Odaklı

Brackets ne kadar havalı olursa olsun, uygulamasında biraz sınırlıdır. Kod düzenleyici, çoğunlukla HTML, CSS ve JavaScript ile ilgilenen ön uç çalışanlar için açıkça yapılmıştır.

Bunu son derece iyi yapsa da, sunucu tarafı diller gibi başka bir şeyle çalışıyorsanız, Brackets sizin için en iyi seçenek olmayabilir. Ancak, WordPress'e özgü kod için bile bu eksikliği giderecek uzantılar vardır.

Uzantı Yönetimi Daha İyi Olabilir

Brackets'in uzantılar açısından sunacağı çok şey vardır ve bunları yüklemek hızlı ve kolaydır. Ancak, genel olarak tüm bu alan biraz iş kullanabilir.

Her şeyden önce, resmi uzantı kaydı biraz kafa karıştırıcıdır. Her şey, herhangi bir filtreleme seçeneği veya kategorisi olmadan büyük bir listede.

En azından uzantı yöneticisinde uzantılar ve temalar arasında bir ayrım vardır. Yine de, genel olarak her şey arama işleviyle ilgilidir. Ancak, uygun bir aday bulduğunuzda, ek bilgi için yine de Github'a tıklamanız gerekir.

Bu, açıkça olması gerekenden daha karmaşık ve Brackets, sürecin nasıl iyileştirileceğine dair ilham almak için WordPress ve Atom'a baksa iyi olur.

Özetliyor

Adobe Brackets, en iyi editör arayışımızda değerli bir adaydır. Nispeten hafiftir, kaygandır, kullanımı kolaydır ve kullanıcıların modern bir kod düzenleyiciden bekleyebilecekleri işlevselliklerin çoğuna sahiptir.

Bunun dışında, Adobe'nin açık kaynak projesi, şimdiye kadar başka hiçbir yerde görülmeyen bazı olağanüstü özelliklerle birlikte geliyor. Hızlı düzenleme ve canlı önizleme gerçekten kullanışlıdır ve ön uç çalışmasını çok daha kolaylaştırır.

Buna ek olarak, uzantı yöneticisi ve geniş eklenti seçenekleri, kullanıcıların Brackets'i tam olarak ihtiyaç duydukları geliştirme ortamına dönüştürmelerine olanak tanır.

Tabii ki, Brackets eksiklikleri olmadan değildir. Bununla birlikte, hızlı gelişimi ile gelecekte ele alınma ihtimalleri yüksektir. Eğer öyleyse, Brackets kod editörü endüstrisinde lider bir pozisyon almaya hazır.

Şimdi sana geçti. Bracket'i daha önce kullandınız mı? Eğer öyleyse, en çok neyi sevdiniz ve nerede iyileştirme alanı görüyorsunuz? Lütfen aşağıdaki yorum bölümünde bize bildirin, böylece diğerleri deneyiminizden yararlanabilir.

Adobe Brackets'in github sayfası / MIT Lisansı aracılığıyla grafiklerden yapılan öne çıkan görüntü