Web Geliştiricileri için En İyi 10 Yüce Metin Paketi

Her web geliştiricisinin favori bir kod düzenleyicisi vardır. Bazı insanlar Entegre Geliştirme Ortamı'na (IDE) yemin ederken, diğerleri sadece basitlik ister. İkincisini tercih ederseniz, Sublime Text paketlerini beğenebilirsiniz.

Sublime Text'in en çekici yönlerinden biri, oldukça modüler olmasıdır. Saf biriyseniz, düzenleyiciyi olduğu gibi kullanabilirsiniz. Ancak çeşitli paketler, işlevselliğini genişleterek geliştirme iş akışınızı çok daha kolaylaştırabilir. Bu yazıda size en sevdiğimiz on tanesini tanıtacağız!

Sublime Text Paketlerine Giriş ve Nasıl Kurulur

Paketler, Sublime Text'in modüllere veya WordPress eklentilerine eşdeğerdir. Bunlar, platformun birincil işlevselliğini genişletmek ve işinizi kolaylaştırmak için kurabileceğiniz eklentilerdir.

Kod düzenleyici paketleri kavramı yeni bir şey değil. Atom gibi en popüler platformlar da birçok uzantı sunar. Ancak, geniş bir eklenti yelpazesine sahip hafif bir kod düzenleyici istiyorsanız, Sublime Text mükemmel bir seçenek olmaya devam ediyor.

Sublime Text paketlerinin nasıl kurulacağına gelince, süreç çok basittir. Başlamak için, istediğiniz uzantının deposunu ziyaret edin ve indirin:

Bir kez sahip olduğunuzda. zip dosyasını açın, Sublime Text Packages dizininize gidin ve onu genişletin. Bulamazsanız , dizin username/appdata/roaming/Sublime Text/Packages altında olmalıdır. Çoğu uzantı, düzenleyiciyi yeniden başlatmanıza gerek kalmadan klasörü çıkardığınız anda Sublime Text içinde kullanıma hazır olacaktır.

Daha akıcı bir süreç istiyorsanız, resmi Sublime Text Package Control'ü de kullanabilirsiniz . Özetle, bu araç, genel paketlerin bir deposuna göz atmanıza ve basit komutlar kullanarak bunları yüklemenize olanak tanır.

Sublime Text Package Control'ü kurmak için Tools > Install Package Control'e gidin :

Paket Kontrolü kurulduktan sonra Sublime Text konsolu üzerinden kullanabilirsiniz. Açmak için CTRL + ~ tuşlarına basın, ardından kullanabileceğiniz komutların tam listesini görmek için PACKAGE CONTROL: yazın:

Yeni bir paket yüklemek için Paket Kontrolü: Paketi Yükle yazın ve araç, deposundaki tüm genel paketlerin bir listesini açacaktır:

Konsolu kullanarak listeye göz atabilirsiniz. Ancak, herhangi bir şey yüklemeden önce, iş akışınız için en iyisini seçebilmeniz için muhtemelen size sunulan paketler hakkında biraz daha fazla bilgi edinmek isteyeceksiniz.

Web Geliştiricileri için En İyi 10 Yüce Metin Paketi

Aralarından seçim yapabileceğiniz yüzlerce Sublime Text paketi vardır, bu nedenle en çok tercih edilenler listesini düzenlemek kolay bir iş değildir. Bunu akılda tutarak, iş akışınızı mümkün olduğunca basitleştirmenize yardımcı olabileceklere odaklanmaya karar verdik. Bu listedeki seçeneklerin çoğu dilden bağımsızdır, bu nedenle ne tür bir geliştirmeye odaklanırsanız odaklanın, bunlardan çok fazla yol kat edebilirsiniz.

1. Hizalama

Alignment, kodunuzu alan ve onu yapılandırdığınız karakterleri hizalayan basit bir pakettir. İşlevselliği basittir, ancak kodu okumayı çok daha keyifli hale getirir.

Paketi yükledikten sonra, hangi karakterlerin hizalanması gerektiğini yapılandırmanız gerekir. Bunu paketin Ayarlar – Kullanıcı dosyasını açarak yapabilirsiniz:

Dosya açıldığında, aşağıdaki kodu kopyalayıp içine yapıştırın:

{
    "alignment_chars": [
        "(", ":"
    ]
}

Bu pasaj, pakete, uyguladığınız herhangi bir kodda hem '(' hem de ':' karakterlerini hizalamasını söyler. Size bir örnek vermek gerekirse, WordPress'te bir alt tema için stilleri kuyruğa almak için kullanacağınız PHP:

Zaten oldukça organize. Ancak, vurgular ve CTRL + Alt + A Hizalama tuşlarına basarsanız, yeni ayarlarınızı uygulayacak ve bunun sonucunda:

Hangi karakterleri hizalamak istediğiniz size kalmış. Neyse ki, paketi çalışır duruma getirmek için yapılandırdıktan sonra yalnızca birkaç düğmeye basmanız yeterlidir.

2. Emmet

Bir ön uç geliştiriciyseniz veya HTML ve CSS ile çok fazla zaman harcıyorsanız, Emmet araç setinize mutlaka eklenmesi gereken bir eklentidir. Bu paket, dinamik CSS ifadeleri veya 'kısaltmalar' yazmanıza ve bunların tam işlevli koda genişletilmesine olanak tanır.

HTML kullanarak herhangi bir sayfaya sıralanmamış bir öğe listesi eklemek istediğinizi varsayalım. Bu kod şöyle görünebilir:

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
    </ul>
</div>

Tekrarlayan işaretlemeleri elle yazmak oldukça sıkıcı olabilir. Emmet ile aşağıdaki kısaltmayı kullanarak ve bir düğmeye basarak genişleterek gerekli kodu oluşturabilirsiniz:

#page>div.logo+ul#navigation>li*3>a{Item $}

Sözdizimine bir göz atarsanız, kısaltmaların çok mantıklı kalıplar izlediğini fark edeceksiniz. Emmet, kod oluşturmanın ötesinde, ortaya çıkan snippet'lerde gezinmenize, önemli parçaları seçmenize, yeni etiketler eklemenize ve daha pek çok şeye olanak tanır.

Emmet, kutudan çıktığı haliyle o kadar çok kısaltma içeriyor ki, başlamadan önce belgelerine bakmanız neredeyse kesinlikle gerekecek.

3. SFTP

Hemen, bu paketin adı size ne bekleyeceğiniz konusunda bir fikir vermelidir. SFTP'yi kullanarak yerel bir klasörü uzak bir klasöre eşleyebilir veya dosyaları bir sunucudan Sublime Text'de doğrudan düzenleyebilirsiniz.

SFTP aracılığıyla uzak bir sunucuya erişmek basittir. Dosya > SFTP/FTP > Kurulum Sunucusu'na gidin. Burada FTP/SFTP bağlantı ayarlarınızı yapılandırabilirsiniz:

Kimlik bilgilerinizi ayarladıktan sonra, onları uzak sunucunuzla eşleştirmek veya doğrudan ona bağlanmak için kenar çubuğundaki dosyalara sağ tıklayabilirsiniz.

4. JSHint

JavaScript ile çalışıyorsanız, kaliteli bir sözdizimi denetleyicisi sorun gidermeyi çok daha kolay hale getirecektir. JSHint ile kodunuzdaki herhangi bir hataya hızlı bir genel bakış elde edebilirsiniz ve paketin konsolu bir sütundan diğerine atlamanıza olanak tanır.

JSHint'i yükledikten sonra, üzerinde çalıştığınız dosya için konsolu getirecek olan Control + J veya Alt + J tuşlarına basarak etkinleştirebilirsiniz:

JSHint'in bilgisayarınızda çalışması için node.js'ye ihtiyacınız olduğunu unutmayın. Aksi takdirde, bir dosyada hata ayıklamaya çalıştığınızda paket bir hata verebilir.

5. Otomatik DosyaAdı

AutoFilename, bulabileceğiniz en basit Sublime Text paketlerinden biridir. Ancak, kullanmaya başladığınızda, geri dönmek zor olabilir.

Otomatik DosyaAdı yüklendiğinde, bir href etiketi kullanarak bir dosyaya bağlanmayı denerseniz, Control + Space tuşlarına basabilirsiniz ve otomatik olarak üst öğeyle aynı düzeyde bulunan dosya ve dizinlerin bir listesini gösterecektir. İmlecinizi veya klavyenizi kullanarak kolayca göz atabilir ve istediğiniz herhangi bir dosyayı seçebilirsiniz. Paket otomatik olarak yolunu ekleyecektir.

Bunun ötesinde, görüntü yollarını eklemek için Otomatik Dosya Adı'nı kullanırsanız, paket bunların boyutlarını da belirleyecek ve yükseklik ve genişlik niteliklerini dolduracaktır.

İşlemi daha da kolaylaştırmak istiyorsanız, Otomatik Dosya Adı'nı Control + Space tuşlarına basmanıza gerek kalmadan tetiklenecek şekilde yapılandırabilirsiniz. Bunu yapmak için Kullanıcı Ayarları dosyanızı açın ve aşağıdaki kodu ekleyin:

"auto_complete_triggers":
[
  {
     "characters": "<",
     "selector": "text.html"
  },
  {
     "characters": "/",
     "selector": "string.quoted.double.html,string.quoted.single.html, source.css"
  }
]

Bu kodu kaydettiğinizde, Otomatik Dosya Adı, her eğik çizgi yazdığınızda tetiklenir ve size birkaç tuş vuruşundan tasarruf sağlar.

6. Canlı Yeniden Yükleme

Sonuçları görmek için yerel bir dosyada her değişiklik yaptığınızda tarayıcınızı yenilemekten nefret ediyorsanız, LiveReload sizin için mükemmel bir paket olabilir. Yerel dosyaları favori tarayıcınızla senkronize etmenizi sağlar, böylece değişiklik yaptığınızda ve kaydettiğinizde anında görüntülenirler.

LiveReload'ın çalışması için iki şey yapmanız gerekir:

1. Ctrl + Shift + P tuşlarına basarak ve livereload.js komut dosyası ekle seçeneğini belirleyerek (aşağıda gösterilmiştir) LiveReload komut dosyasını , üzerinde çalıştığınız HTML dosyasına ekleyin .
2. Kullanmakta olduğunuz yazılım için ilgili uzantıyı yükleyin.

Yerel dosyanıza gerekli komut dosyasını eklediğinizde ne görmeniz gerektiğine dair hızlı bir görünüm:

Komut dosyasını aldıktan sonra Safari, Chrome veya Firefox kullanıyorsanız bir uzantı ayarlamanız gerekir. Yapılandırdıktan sonra, komut dosyasını herhangi bir dosyaya ekleyebilecek ve tarayıcınız aracılığıyla açtığınızda değişiklikleri canlı olarak görebileceksiniz.

7. Dosya Farkları

Bazen, son değişiklikleri veya başka birinin yaptığı değişiklikleri bulmak için uzun kod dizileri arasında gezinmeniz gerekir. Ancak çıplak gözle arama yapmak verimsiz olabilir. Belirli bir dosyanın önceki veya ayrı bir sürümüne sahipseniz, tutarsızlıkları size göstermek için FileDiff'leri kullanabilirsiniz.

FileDiff'leri kurduktan sonra, menüsüne erişmek için proje başlığında veya dosyanın içinde herhangi bir yeri sağ tıklayabilirsiniz:

Paket, mevcut dosyanızı karşılaştırmak için size birçok seçenek sunar. Örneğin, farklı bir sekmedeki bir dosyayı veya panonuzun içeriğini seçebilirsiniz. Bir seçim yaptığınızda, FileDiffs vurgulanan farklılıkları içeren yeni bir dosya oluşturacaktır:

Yukarıdaki ekran görüntüsünde, iki kısa kod parçacığı arasındaki vurgulanan farkları görebilirsiniz. Uğraştığınız dosyalar ne kadar karmaşıksa, FileDiff'ler size o kadar fazla zaman kazandırabilir.

8. Küçültücü

Bir web sitesinin performansını iyileştirmeye çalışıyorsanız, küçültme harika bir uygulama olabilir. Genellikle kodunuzu küçültmek için üçüncü taraf araçları kullanırsınız, ancak doğru paketle bunu Sublime Text içinde yapabilirsiniz.

Minifier, hem JavaScript hem de CSS dosyalarını işlemenizi sağlar. Tek yapmanız gereken paketi kurmak ve şu iki düğme kombinasyonundan birini kullanmak:

• CTRL + Alt + M : Mevcut açık dosyayı doğrudan küçültür.
• CTRL + Alt + Shift + M : Mevcut açık dosyayı küçültür ve çıktıyı yenisine kaydeder.

Bu örnekte, bir . Başlangıçta bir düzineden fazla satırı kaplayan ve onu küçülten css dosyası:

İşlem yalnızca birkaç saniye sürecek ve daha sonra performans optimizasyonu sırasında size önemli ölçüde zaman kazandıracaktır.

9. Yapılacaklarİnceleme

Üzerinde çalışmanız veya geri dönmeniz gereken görev kodunuz boyunca hatırlatıcılar bırakma eğilimindeyseniz, TodoReview'ı seveceksiniz. Özetle, paket projelerinizde bulunan yorum listelerini derler ve bunları aşağıdaki gibi yeni bir dosyaya çıkarır:

Varsayılan paket yapılandırması yalnızca TODO yorumlarını tanır. Ancak, paketin yapılandırma dosyasını değiştirerek kolayca yeni desenler ekleyebilirsiniz:

"patterns": {
    "TODO": "TODO[\\s]*?:[\\s]*(?P<todo>.*)$",
    "URGENT": "URGENT[\\s]*?:[\\s]*(?P<urgent>.*)$",
}

Bu örnekte, paketin tanıması için yeni bir model türü oluşturduk (acil!). İstediğiniz kadar kurabilirsiniz.

10. Tüm Otomatik Tamamlama

Varsayılan olarak, Sublime Text, üzerinde çalıştığınız dosyadaki kodu otomatik olarak tamamlamaya çalışacaktır. Bu iyi bir başlangıç ​​ama ya birden fazla dosya içeren bir proje üzerinde çalışıyorsanız?

Tüm Otomatik Tamamlama, Sublime Text'in temel otomatik tamamlama işlevini genişletir ve tüm açık dosyalardaki eşleşmeleri bulmanıza yardımcı olur. Geliştirme iş akışınızı hızlandırabilecek küçük ama önemli bir farktır.

Paketin yapılandırmasında ince ayar yapmak veya belirli dosya türleri için devre dışı bırakmak istiyorsanız, aşağıdaki kodu kullanarak ayarlarını kolayca değiştirebilirsiniz:

"exclude_from_completion": [
    "css",
],
"min_word_size": 5, // don't show completions for words with fewer than this many chars many chars

Bu örnekte, hariç tutuyoruz. css dosyalarının otomatik olarak tamamlanması ve daha kısa kelimeler için işlevselliğin devre dışı bırakılması. Bu şekilde paket, rahatsız edici veya rahatsız edici bir sıklıkta tetiklenmez.

Çözüm

Sublime Text, otomatik tamamlama, sözdizimi vurgulama, kod katlama ve çok daha fazlası dahil olmak üzere kutudan çıktığı gibi birçok kullanışlı işlevsellik sunar. Ancak bunlar, bugünlerde temelde her kod düzenleyicinin içerdiği özelliklerdir. Onu gerçekten farklı kılan şey, devasa paket kütüphanesidir.

Hangi Sublime Text paketlerini kullanmanız gerektiğine gelince, bu sizin benzersiz iş akışınıza bağlıdır. HTML ve CSS kullanıyorsanız, Emmet olmazsa olmazlardandır. Otomatik Dosya Adı ve Tüm Otomatik Tamamlama gibi diğer paketler, ne tür bir geliştirme yaptığınızdan bağımsız olarak genellikle birincil seçeneklerdir.

Sublime Text paketleri hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!

Makale küçük resmi, MchlSkhrv / Shutterstock.com tarafından