Brackets Editörü için Eklentiler - Kodlama Kalitenizi Artırın

Herkese merhabalar. Bugün sizlere Brackets editörü için kullanılabilecek çok güzel eklentilerden bahsedeceğim. Böylece hem kodlama hızınızı artırırsınız hem de Brackets editöründen en üst düzey verimi alırsınız.

Eğer Brackets editörünün ne olduğunu merak ediyorsanız öncelikle şu yazıyı tavsiye ederim:

Web Tasarımı ve Kodlaması Yaparken Kullanılan Editörler

Bu yazıda yer alan eklentiler:

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

Emmet Eklentisi

Beautify Eklentisi

Brackets Icons Eklentisi

Lorem Pixel Eklentisi

Brackets Editörü için Eklentiler - Kodlama Kalitenizi Artırın

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

Öncelikle Brackets editörü için nasıl eklenti yükleyebileceğimizi hızlıca anlatayım.

Eğer kodlama yaparken 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 şu butondur:

Brackets eklenti yöneticisi

Bu butona bastıktan sonra karşınıza şöyle bir ekran çıkacaktır:

Brackets Eklenti Yükleme

Bu ekranda Search (Arama) 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'in güzel özelliklerinden birisi :)

O zaman şimdi de işinize yarayabilecek eklentilere göz atalım.

Emmet Eklentisi

Emmet eklentisi, birçok web geliştiricisinin kullandığı bir eklentidir. Özellikle HTML ve CSS kodlama dilleri için bize büyük bir hız avantajı sağlar. Emmet eklentisinin amacı zaten kodları yazan kişiye büyük oranda zaman kazandırmasıdır.

Emmet eklentisinin güzel yanı birçok kod editöründe sorunsuz çalışabilmesidir. Brackets, Sublime Text 3, Notepad++ gibi birçok kodlama editöründe rahatlıkla kullanabilirsiniz.

Emmet eklentisinin kullanımına örnek vermek gerekirse şöyle bir örnek verebilirim.

 

Bu kodlar çok uzun olmasa da bundan daha uzun kodlar yazmamız gerekebilir. Bunu kısaltmanın yolunu bu örnek üzerinden vereyim.

Kodlama editörüne şu komutları yazarak yukarıdaki kodları elde edebilirsiniz.

div>a*5

Bu komutu yazdıktan sonra Tab tuşuna basmanız gerekmektedir. Tab tuşuna bastıktan sonra göreceksiniz ki bu kodlar gelmiş.

Emmet eklentisi bunun gibi kısa yolları bize sağlıyor. Çok uzun kodları bin zahmetle yazmaktansa böyle kısaca yazmak oldukça güzel :)

Ama şunu unutmayın ki önce kodlama diline hakim olmazsanız Emmet eklentisinden çok medet ummayın. HTML dilini iyice öğrenin sonra pratiğe dökün. Yoksa size kişisel olarak bir katkısı olmayacaktır.

Not: Başka bir yazımda yakında Emmet Eklentisi için harika bir rehber hazırlayacağım. Linki buraya bırakırım.

Beautify Eklentisi

Eğer kodlarınızı hızlı yazayım derken kodlar düzensiz oluyorsa bundan rahatsız oluyor olabilirsiniz. Birçok kişi kodlarının düzensiz olmasından çok fazla rahatsız olabiliyor.

Veya diyelim CSS kodlarınızı sıkıştırdınız ama bir yeri düzenlemeniz gerekiyor. Ama sıkıştırılmış kodlar arasında bulmak ve düzenlemek çok zordur. Bu nedenle bu kodları alıp Beautify Eklentisi ile kodları düzenli hale getirip gereken düzenlemeyi yapabilirsiniz.

Beautify eklentisi anlayacağınız üzere kodları düzenli bir hale getirmeye yarıyor. Ve bu özellik sayesinde aradığımız kodu karmaşıklıktan kurtarıp düzenleyebiliriz.

Beautify eklentisi birçok kodlama dili için geliştirilmiştir. HTML, CSS, C dilleri gibi birçok dilde düzenleme sağlar. Ayrıca birçok editörde kullanılabilir.

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

Windows için: Ctrl-Shift-L

Mac için: Cmd-Shift-L

Ayrıca kodlarınızı kaydederken de otomatik düzenleme yaptırabilirsiniz. Bunun için üstteki menülerden Edit (Düzenle) kısmından Beautify on Save kısmını aktif hale getirebilirsiniz. Böylece kodları kaydederken otomatik olarak düzenler.

Eğer bir örnek vermek gerekirse şöyle bir örnek verebilirim.

        <div>
                            <a href=""></a>
                <a href=""></a>
        <a href=""></a>
                    <a href=""></a>
        <a href=""></a>
</div>

İşte bu düzensiz kodları Beautify eklentisi kullanarak bu kodları şöyle bir hale getirebiliriz:

<div>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
    <a href=""></a>
</div>

Gördüğünüz gibi artık düzenli kodlarımız var. Çok hoş değil mi :)

Brackets İcons Eklentisi

Brackets editöründe normalde dosyaların yanında bir icon olmaz. Bu iconlar bence olması gereken bir özellik. Bir işe yaradığından değil de daha çok hoş durduğu için :)

Bunun için güzel bir eklenti aradım ve karşıma bu eklenti çıktı. Brackets editöründe onlarca kod dosyası için farklı iconlar var. Her dosyanın sol tarafında güzel küçük bir icon bulunması hoş bir hava katıyor.

Brackets icons eklentisi

Gerek var mı derseniz, gerekte yok. Sadece estetik bir görüntü için kullanıyorum. Siz de isterseniz kullanıp editöre hoş bir hava katabilirsiniz.

Lorem Pixel Eklentisi

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

Lorem Pixel, bu sorunu ortadan kaldırarak size istediğiniz boyutta resim sağlar. Böylece uygun boyuttaki resimleri uzunca aramak yerine 1 dakikada projeniz için örnek bir resim ekleyebilirsiniz.

Kullanımı ise oldukça basit. Brackets için sağ tarafta 9 tane kareden oluşan bir buton çıkar. Bu butona basınca karşınıza şöyle bir ekran çıkar:

Lorem Pixel

Bu ekrandan boyutları ve temayı seçerek hemen bir resim ekleyebilirsiniz. Oldukça güzel bir eklenti. Böylece resim arama derdinden kurtulursunuz.


Brackets kod editörü için bunun gibi onlarca güzel eklenti vardır. Bunu sadece Brackets editörü için düşünmeyin. Bu eklentilerin bir kısmı başka editörlerde de çalıştırılabilir. Böylece sadece Brackets'e bağlı kalmazsınız.

Evet, bu yazı bu kadardı. Umarım yardımcı olabilmişimdir. 4 tane güzel eklenti tanıttım size. Ara sıra başka eklentiler hakkında da yazılar gelecektir. Bir sonra ki yazıda görüşmek üzere :)

Brackets Editörü için Eklentiler - Kodlama Kalitenizi Artırın | RaBlogin

Raşidin Buğda

Raşidin Buğda

2016-2017 yılından beri web tasarım ve kodlama üzerine çalışıyorum. RaBlogin benim ilk projem ve bu sitede blog yazarak kendimi keşfetmeye ve insanlara yardımcı olmaya çalışıyorum :)

Yorum Yap

Lütfen tüm alanları eksiksiz (Websiteniz yoksa orasını boş bırakın) ve doğru doldurun.

Yorumlar

Bu yazıya yorum yapılmamış. İlk yapan sen olabilirsin.