Tavsiye, 2024

Editörün Seçimi

Gerçekten İhtiyacınız Olan 10 Harika Parantez Uzantısı

Brackets.io, sürüm 1.2’yi yakın zamanda yayımladı, bloglarında okuyabileceğiniz bazı yeni harika özellikler. Her bir uzantı için eksiksiz talimatlarla birlikte, orada en iyi ve en kullanışlı Parantez uzantılarından 10'unun bir listesini (belirli bir sıra ile değil) derledik.

Parantez Uzantıları

1.Kod Katlama

Diğer birçok IDE ve kod editörünün aksine, Braketler varsayılan olarak mevcut bir kod katlama seçeneğine sahip değildir. Kod Katlama ile, kodunuzun büyük bölümlerini tek bir satıra kolayca daraltabilirsiniz. Kod Katlama uzantısı Github'da ve Konsollar uzantı yöneticisinden edinilebilir.

Nasıl kullanılır

Yuvalanmış herhangi bir etiketi katlamak için, üst etiketin sol tarafındaki aşağı oka tıklayın. Javascript veya başka bir format için aynı prensip. Tüm iç içe ifadeleri tek bir satıra katlamak için ana öğenin solundaki aşağı oka tıklayın. Genişletmek için, sadece artı işaretine tıklayın.

Katlanmış çizgilerin satır numaraları gizlenir, böylece koda konsantre olduğunuzda katlanmış çizgileri bulmak kolaydır.

2. Lorem Pixel

Yer tutucu metni oluşturmanın birçok yolu vardır, ancak ön uç web geliştiricileri genellikle yer tutucu görüntülere ihtiyaç duyar. Boş bir yer tutucu görüntü oluşturmaya çalışmak yerine, Lorem Pixel uzantısını kullanın. İstediğiniz boyutta muhteşem yer tutucu görüntüler eklemenizi sağlar. Lorem Pixel'in en güzel yanı, resim istediğiniz kategoriyi seçmenize izin vermesidir.

Bu yeterince iyi değilse, sayfayı yeniden yerleştirdiğinizde yer tutucu görüntüleri değişmeye devam eder! Görüntüler sık ​​sık renk şemalarını altüst edebilir, bu nedenle Lorem Pixel ayrıca yalnızca s / b yer tutucu görüntüleri kullanmak için 'gri tonlamalı' bir seçenek sunar. Bu uzantı lorempixel.com tarafından desteklenmektedir ve Brackets eklenti yöneticisinden edinilebilir.

Lorem Pixel Kullanımı

Nasıl kullanılır

Lorem Pixel uzantısını yüklediğinizde, uzatma bölmesinde (kontrol edilen kare) Lorem Pixel logosu (sağdaki bölmede Canlı Önizleme düğmesinin bulunduğu bölme) görünür. Bir ayar kutusu getirmek için logoya tıklayın. İstediğiniz resim boyutunu ve tercih ettiğiniz resim kategorisini ayarlayın. Gri tonlamalı görüntüler istiyorsanız, gri tonlama seçeneğini işaretleyin. Bağlantıyı panoya kopyalayın ve gerektiği gibi kullanın veya mevcut imleç konumuna yerleştirin.

3. Otomatik Düzeltici

Kodunuza satıcı önekleri eklemek çok zor. Autoprefixer eklentisi size zaman kazandırabilir (ve çok fazla iş!) Çünkü gerekli satıcı öneklerini otomatik olarak kodunuza ekler. Herhangi bir konfigürasyona ihtiyaç duymaz ve kodunuzu her kaydettiğinizde öneklerinizi günceller. İsterseniz, kodu seçip otomatik önek de seçebilirsiniz.

Nasıl kullanılır

Autoprefixer'ı kullanmak için, sadece öneksiz kod yazmaya başlayın. Uzantı, kaydettiğiniz anda otomatik olarak ön ekli kod ekleyecektir. Seçilen bazı kodları otomatik öneklemek için önce kodu, ardından Düzenle sekmesini ⇒ Otomatik önek seçimi.

Autoprefixer, ayarlarına özel önekler eklemenizi de sağlar. Uzantı ayarlarına gitmek için: Düzenle Otomatik Düzeltici Ayarları.

Güzel, basamaklı, ön ekli kod için, uzantı ayarlarında Görsel basamaklı seçeneği etkinleştirin.

4. Markdown Önizleme

Markdown, kolayca HTML'ye çevrilebilen sevimli düz metin biçimlendirme dilidir. Markdown Preview, metin sürümünün hemen altında oluşturulan Markdown'ı verir. İki farklı stil arasından seçim yapmanızı sağlar, Github Flavored Markdown ve Standard Markdown.

Önizleme penceresi için seçebileceğiniz üç tema vardır - Açık, Koyu ve Klasik. Markdown Preview ayrıca bir kaydırma senkronizasyon seçeneğine de sahiptir (varsayılan olarak etkindir). Uzantı, Github'dan veya Parantez uzantı yöneticisinden indirilebilir.

Nasıl kullanılır

Bir .md veya .markdown dosyasını açın. Markdown Preview'u yüklediyseniz, sağda M ↓ düğmesi görünmelidir. Tıkladığınızda Markdown'ı oluşturduğunu göreceksiniz. Temayı değiştirmek veya kaydırma senkronizasyonunu devre dışı bırakmak için, İşaretleme Önizleme bölümünün sağ üst köşesindeki dişli simgesine tıklamanız yeterlidir.

5. Parantez Simgeler

Kod düzenleyicinizi dosya simgeleriyle renklendirmek her zaman eğlencelidir. Parantez Simgeleri, kenar çubuğunda listelenen tüm dosyalara, dosya türüne göre renkli simgeler ekler. Çoğu dosya türü için simgeleri vardır ve Github sayfasına simge istekleri gönderebilirsiniz.

Bonus İpucu:

Parantez Simgeleri, Ionicons projesinden simgeler kullanır. Ayrıca, Font Awesome projesindeki simgeleri kullanan Dosya Simgeleri uzantısını (Parantez Simgeleri projesinin bir çatalı) da kontrol edebilirsiniz. Sonunda kişisel tercihine kaynar.

Nasıl kullanılır

Sadece eklentiyi kurun ve Parantez'i (F5) tekrar yükleyin.

6. Belgeler Araç Çubuğu

Parantezler sekmelerden yoksundur. Sade ve basit bir gerçek. Belgeler Araç Çubuğu uzantısı bu işlevselliği ekler. Kenar çubuğunun 'etkin' bölümünde bulunan tüm dosyalar bu uzantıda sekmeler olarak görünür. Kenar çubuğunu da gizleyebilir ve hoş bir arayüz için sadece Belgeler Araç Çubuğunu kullanabilirsiniz.

Nasıl kullanılır

Uzantıyı takın ve Destekleri (F5) yeniden yükleyin.

7. Parantez Git

Her şey bugünlerde Git ile bütünleşmeye çalışıyor; bugüne kadar en popüler Sürüm Kontrol Sistemi (VCS). Parantez Git, benzer Parantez Uzantıları arasında kolayca en iyisidir. İhtiyacınız olan tüm git özelliklere sahiptir. Parantezlerin içinden kolayca değişiklik yapabilir, tek bir tıklamayla değişiklikleri itebilir ve çekebilir, dosya geçmişini ve toplam işlem geçmişini görüntüleyebilirsiniz. Git konusunda iyiyseniz, bu Eklenti ile ilgili herhangi bir sorun bulamazsınız.

Not: Brackets Git'i kullanmak için, Git'in bilgisayarınızda yüklü olması gerekir. Uzantıyı yükledikten sonra Git yürütülebilir dosyanızın yolunu girmeniz gerekebilir (varsayılan yol değilse).

Nasıl kullanılır

Brackets Git kullanarak dosya gönderme

Parantez Kullanma Git oldukça yalındır. Yerel Github repo klasörünüzü proje klasöründe Parantez içinde yapın. Ardından bir dosyayı açın, bazı değişiklikler yapın ve kaydedin. Ardından devam edip sağdaki Git simgesine tıklayabilirsiniz ve bu, alttaki Brackets Git bölmesini açar. Dosyalarınızda yaptığınız değişiklikleri listeler.

Hangi dosyaları işlemek istediğinizi kontrol edin ve ardından Teslim Et düğmesine tıklayın. Bu, yapılan değişiklikleri listeleyen bir açılır pencere açar. Taahhüt mesajınızı girin ve Tamam'a tıklayın. Ve Git'e direkt olarak Dirseklerden bir dosya gönderdiniz!

Taahhüt ettikten sonra sadece butona tıklayın (yukarıdaki GIF'te görüldüğü gibi, senkronize edilmemiş komisyonların sayısını da gösterir).

Ayarları Yapılandırma

Brackets Git bölmesini açın ve Ayarlar düğmesine tıklayın (sağdan ikinci). Brackets Git'i istediğiniz şekilde yapılandırmaktan çekinmeyin.

Dosya ve Teslim Geçmişini görüntülemek için

Güzel bir şekilde listelenen Dosya Geçmişinizi ve Teslim Geçmişinizi görüntülemek için ilgili butonlara tıklayın. Avatarı, siyah beyaz bir avatar, renkli bir avatar veya Gravatar'ınız olarak değiştirebileceğinizi mi belirttik?

Geçmişi Tamamla

8. TÜM Şeyler Lint

TÜM şeyleri tiftik. Her şey. Bu eklenti tüm dosyalarınızı tek seferde sıralar. Çok sayıda bağlı dosya içeren büyük bir projeniz olduğunda çok yararlıdır. Tüm hav bırakmayan hatalar bir bölmede iyi gözüküyor.

Nasıl kullanılır

Lint ALL Things'i kullanmak için, Görünüm sekmesine gidip Tüm projeyi Lint tıklamanız yeterlidir.

9. Konsollar Todo

Parantez Todo, tüm TODO yorumlarını temiz bir liste biçiminde gösteren düzgün bir eklentidir. Varsayılan olarak, 5 etiketi destekler - TODO, NOTE, FIXME, CHANGES ve FUTURE. Ayrıca yorumları Bitti olarak da işaretleyebilirsiniz. Görünüm seçeneklerinde, yorumları etiketlere göre filtreleyebilirsiniz. Parantezler Todo, yorumlarınızla daha yaratıcı olmak istemeniz durumunda, kendi etiketlerinizin yanı sıra etiketler için özel renkler tanımlamanıza olanak tanır.

Büyük bir proje üzerinde çalışıyorsanız ve birden fazla dosyadan gelen yorumları takip etmeniz gerekiyorsa, Brackets Todo'nun aramasının kapsamını değiştirebilirsiniz. Satıcı klasörleri gibi bazı dosya ve klasörleri dışlamak mı istiyorsunuz? Telaşa gerek yok. Sadece dışlama listesine yolu ekleyin. Kök proje dizinine bir .todo dosyası ekleyerek her proje için ayarları özelleştirebilirsiniz.

Github dokümantasyonundaki tüm ayar seçeneklerine göz atabilirsiniz.

Nasıl kullanılır

Parantez Todo kullanmak için kodunuza bir etiket ekleyin. Etiket adı büyük harfle yazılmalı ve ardından iki nokta üst üste (:) ile yazılmalıdır. Tüm Todo'ları görüntülemek için, sağdaki uzatma bölmesindeki Todo simgesine tıklamanız yeterlidir.

yapılandırılması:

  • Todo'nun HTML yorumlarına izin vermesi için: Ayarları açmanız yeterlidir - Todo simgesine → Ayarlar'a tıklayın (dişli simgesi) - ve .todo dosyasını açmak için tıklayın. Bu dosyaya şu kodu ekleyin:
     {"regex": {"ön ek": "(? :)"}} 

    Yapılacaklar ayarları menüsü nasıl görünüyor?
  • Arama kapsamını değiştirmek için: Bu kodu .todo dosyasına ekleyin:
     {"search": {"kapsam": "projem"}} 
  • Herhangi bir dosya / klasör / dosya uzantısını arama kapsamından çıkarmak için : Bu kodu .todo dosyasına ekleyin:
     {"search": {"kapsam": "projem", 

    “ExcludeFolders“: [“klasörünüz“]

     "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}} 

10. Güzelleştirmek

Güzelleştirmek kodunuzun iyi görünmesini sağlar. Boşlukları, girintileri ve satırları düzeltir.

Nasıl kullanılır

Beautify'ı kullanmak çok kolay. Tek yapmanız gereken bazı kodları seçmek > Sağ Tıkla > Güzelleştirmek .

Alternatif olarak, Düzenle sekmesine gidip ' Güzelleştir'i tıklayın.

Top