Sublime Text 3 İncelemesi ve En İyi 33 Eklenti

Giriş

Bir geliştirici olarak zamanımızın büyük bir kısmını kod editörleri ile geçiriyoruz. Hal böyle olunca da, ister istemez onlarla duygusal bir bağ kurmak da kaçınılmaz oluyor. Peki bu araçlarla yeteri kadar ilgilenip onlara kıymet veriyor muyuz?

İşini severek yapan biri olarak kullandığım editöre gerçekten saygı duyuyor, onunla daha iyi iletişime geçebilmek için bazen kod yazmayı bırakıp saatlerce onunla vakit geçiriyorum. Editörle olan duygusal bağım, birbirimizi daha iyi anladıkça pekişiyor ve birbirimizden beklentilerimizi karşıladığımız müddetçe de perçinleniyor.

İşimizi ne kadar iyi yaptığımızı bir kenara bırakırsam eğer, ne kadar hızlı yaptığımız da sonraki en önemli şey olsa gerek. Günde 3 defa yaptığım ve her birinde 5 saniyemi alabilecek bir işi otomatize etmek adına; bazen 1 saat boyunca araştırma ve geliştirme için uğraşıyorum. Örnek vermek gerekirse eğer, yayımlanmaya hazır bir javasript kodunun içindeki konsol kayıtlarını silmek adına; regexp yazmak, macro oluşturmak ve bu macro'ya kısayollar atamak için günümün yarım saatini feda edebiliyorum. Zaman bir geliştirici için en önemli şeylerden biri ve bunu bir kez yaptıktan sonraki tüm bu iş için harcayacağınız zaman yanınıza kar kalıyor. Tıpkı benzer ve tekdüze projeler yaparken hevesimizi kaybettiğimiz gibi, bu gibi minik işleri her seferinde yapmak da farkında olmadan bizden çok şey götürüyor.

Hız bizim için çok önemli ve güçlü bir editör de bu parametereye etki edecek en büyük faktörlerden biri. Umarım hala işin egosuna takılıp da "Ben her şeyi kendim yazarım" deyip Notepad++ ile arayüz geliştirmeye çalışan insanlar yoktur. Sanki Sublime Text ile ya da herhangi bir IDE ile kod yazarken biz yazmıyormuşuz da editör kendi kendine yazıyormuş gibi.

Bu makalede şahsi kanaatimce en güçlü gördüğüm editör olan (en azından arayüz geliştiriciliği için) Sublime Text'in artılarını, eksilerini, başka editörler ile olan kıyaslamalarını ve "işin ameleliği" olarak nitelendirdiğimiz işleri hızlandırmak için gerekli olan eklenti ve araçlardan bahsedeceğim.

Kod Editörlerine giriş

Web dünyası genişledikçe, kod yazmamızı kolaylaştıracak platformlar da günden güne gelişiyor. Her ne kadar çoğu arayüz geliştiricinin tercihi -ben de dahil- Sublime Text olsa da, Sublime Text’e alternatif olarak bulunan güzel editörler de mevcut. Sosyolojik bir çıkarım olmakla beraber; çoğu geliştiricinin alışkanlıklarından bir türlü vazgeçmek istemediğini gördüğümden, bu editörlerin de göz ardı edildiğini düşünüyorum. Çoğu geliştirici kendi yazdığı dilin, kendi kullandığı editörün ve kendi kullandığı işletim sisteminin en iyisi olduğunu düşünüyor. Apple ve Android fanatiklerinin atışmalarında olduğu gibi, çoğu zaman ben de Sublime Text ile diğer editörlerin kıyaslamasının yapıldığı tartışmalar içinde buluyorum kendimi. Her bir editörü yüklemiş, kullanmış ve hakkkında çokça araştırma yapmış biri olarak; kendi karakterime ve stilime en uygun olan Sublime Text'ten bahsedeceğim.

Sublime Text 3 hakkında

Öncelikle Sublime Text’in kod editörü olmadığını, text editörü olduğunu hatırlatayım. Yani sıkça gördüğünüz IDE (Integrated Development Environment, wikipedia’daki karşılığı ile Tümleşik Geliştirme ortamı) kategorisine Sublime Text Editor dahil değil. Eğer adil bir kıyaslama ve karşılaştırma yapmak istiyorsanız, Sublime Text’i en iyi ihtimalle Notepad ile, Notepad++ ile ya da Text Mate (İkisi de Python tabanlı, hatta eklentileri bile birbirine rahatlıkla uyarlanabiliyor) ile kıyaslamalısınız.

Sublime Text’in avantajları

Sublime Text her ne kadar bir text editor olsa da, eklentileri ve desteklediği onlarca dil ile birlikte; gelişmiş IDE’ler ile bile kıyaslanabilir bir seviyeye gelebiyor.

Cross Platform Desteği

Sublime Text; Windows, Linux, ve Mac platformlarının tümünde çalışabiliyor.

Özelleştirilebilir olması

Sublime Text ile yapılabilecek ince ayarların hiçbir sınırı yok. Yalnızca kullanıcı arayüzü üzerinden değişebilecek ayarlara oranla (IDE’lerin Seçenekler penceresindeki ayarlardan bahsediyorum), Sublime Text'in on yüzlerce değiştirilebilir ayarı var ve tüm ayarlar json ve xml formatındaki dosyalarda tutuluyor.

Şimdi size bu aralar Angular JS framework'u ile kodladığım bir projenin html kodlarının ekran görüntüsünü paylaşacağım. Bu ekran görüntüsünde dikkatinizi çekmek istediğim Sublime Text özelliği ise, syntax highlight özelliğinin ne kadar özelleştirilebilir ve geliştirilebilir olduğu. Ben Sublime Text içinde var olan HTML diline ait syntax dosyasını düzenledim ve bazı özel öğelerin daha dikkat çekici olması için birkaç değişiklik yaptım.

Sublime Text'in kendi içinde bulunan orijinal temalarından Monokai'nin geliştirilmiş versiyonu olan Monokai Extended renk şemasının alt yapısını kullanarak, kendi ihitiyaçlarıma göre bazı tag attribute'lerine ait değişiklikler ve eklemeler yaptım. Normal şartlar altında, bir tag’e ait bütün attribute’ler (class, id, title, href) aynı renkte gözüküyor. (Bu temada açık yeşile yakın) Bu ekran görüntüsünde ise dikkat ettiyseniz bazı elementlere farklı renkler atanmış. Angular JS ile kodladığım bu projede ng-*** ile başlayan nitelikler sarı renkte, class nitelikleri daha koyu yeşil renginde, id niteliği koyu sarı renginde, data-*** ile başlayan nitelikler pembeye yakın ve son olarak da input ve form elementleri için kullanılan name değerleri mavinin bir varyasyonu şeklinde görülüyor. İnsan aklının algıda seçiciği ile alakalı olarak, ekran görüntüsündeki sadece sarı renkteki ng-*** attribute'lerine odaklanmak isterseniz, ilginç bir şekilde sadece sarı renkteki Angular JS attribute’lerini görüyorsunuz. Aynı eylemi class, name, data-*** değerleri için de denerseniz eğer, sonuç değişmeyecek. Adeta sihir gibi. Böylece; bu gibi karmaşık tag ve attribute değerlerine sahip bir projeyi yazarken, aynı renklerdeki attribute’ler arasında bulmak istediğiniz şeyler için vakit kaybetmiyorsunuz. Bu düzenlemeyi gereksiz ya da uğruna bir saat dahi harcanmayacak kadar önemsiz bir geliştirme olarak görüyorsanız eğer, kod yığınları arasında aradığınızı bulamadığınızda kaybettiğiniz motivasyon ve odak kayıplarını hafife alıyorsunuz demektir.

Eklenti, Tema ve dil çeşitliliği

Diğer IDE’lerde bulunan ekstra özelliklerin hepsini kapatamasa da; Sublime Text’in eklenti, tema ve desteklediği dil çeşitliliği bakımından çok fazla kaynağı mevcut. FTP dosya aktarımından Git entegrasyonuna, en ücra köşede kullanılan bir framework’un kod snippet’larından (kendi başınıza yapabilmeniz de bir o kadar kolay bu arada) Markdown derleyicilere kadar (bu blog postunu Sublime üzerinden derlenebilen entegre Markdown derleyici ile yazıyorum) yüzlerce seçenek mevcut. Sadece kullanıcı arayüzü üzerinden sınırlandırılmış özelleştirilmelere oranla, json formatı ile yüzlerce ince ayar yapabiliyor olmak da; Sublime Text’i eşsiz kılan özelliklerden biri.

Proje, Dosya ve satırlar arasında hızlı geçiş yapması

Sublime Text python tabanlı bir editör ve diğer IDE’lere oranla, dosyalar arasında çok daha hızlı ve kolay geçiş yapabiliyor. Sadece bir kaç klavye kısayolu ile başka bir dosyadaki belirli bir sınıfa ait bölüme ya da satıra saniyeler içinde atlayabiliyorsunuz. Projeden projeye geçiş yapmak, aynı anda birkaç projeyi açmak ve hızlı bir şekilde bir diğerine atlamak (Windows kullanıcıları için WindowTabs uygulaması proje geçişlerinde büyük hız kazandırıyor) binlerce dosya içinde hızlı bir şekilde arama (Regex de dahil) yapabilmek, değiştirmek ya da silmek diğer editörlere oranla oldukça hızlı. (Yazar burada Dreamveawer'ın proje içindeki dosyalarda arama yapıp, belirli bir attribute'e sahip tag'ın bütün içeriğini seçip değiştirebilme ya da silme özelliğini anıyor.)

Çoklu seçim özelliği

Sublime Text ile birlikte 2007 yılında çoklu imleç seçimiyle tanıştık. Şu an neredeyse bütün editörler de aynı özellikle kendilerini güncellediler. Editör dünyasında devrim olarak gördüğüm bu özellikle birlikte, Sublime Text kendini duyurmayı başardı ve en çok kullanılan editörlerden biri oldu.

Sublime Text’in eksiklikleri ve dezavantajları

Her ne kadar eklentilerle ve üçüncü parti kütüphanelerle çoğu eksiklik giderilse de, Sublime Text’e bütünleşik olarak gelebilecek birkaç özellikten bahsedilebilir.

Sublime Text’in proje başlangıç paketlerinin olmaması

Gönül isterdi ki, WebStorm’da olduğu gibi Sublime Text ile de hangi dili kullanarak proje dosyalarını oluşturabileceğimizi, bu dile ait kütüphaneleri ve iskeletleri seçebileceğimiz bir seçenek olsaydı. Örneğin WebStorm’da yeni bir proje oluştururken Node.js ile yazılacak bir proje başlatmak, ya da “Google’un HTML5 boilerplate’ını kullanarak LESS ya da SASS kütüphaneleri ile arayüz geliştirme projesi açmak istiyorum” diyebiliyorsunuz.

Bu yöndeki eksikliği kapatmak için Yeoman kullanılabilir. Hem tekil kullanıcılar tarafından farklı özelliklerde paketler oluşturulabiliyor, hem de WebStorm ile tümleşik olarak gelen paketlere oranla çok daha geniş bir yelpazesi mevcut. Bir önceki paragrafta kurduğum “Google’un HTML5 boilerplate’ını kullanarak LESS ya da SASS kütüphaneleri ile arayüz geliştirme projesi açmak istiyorum” örneğine denk olacak şekilde, Yeoman kullanarak şöyle bir cümle kurabilirsiniz mesela:

Angular Js’ın 1.4.3 versiyonunu kullanarak, Angular Route, Angular Animate, Angular Sanitize, Angular UI Bootstrap eklentilerini dahil ederek, stillerimi LESS / Stylus / SASS kütüphanelerinden birini kullanarak yazacak şekilde, Bootstrap / Foundation CSS frameworklerinden birinin altyapısı üzerine kurarak ve testlerimi de Karma ile birlikte Mocha ya da Jasmine ile yapabileceğim, otomasyonunu ise Grunt / Gulp ile gerçekleştirebileceğim bir proje başlatmak istiyorum.

IDE olarak WebStorm, Visal Studio Code, Atom, Brackets ya da Editör olarak Notepad++ kullanıyor olsanız bile, yine de Yeoman’e göz gezdirmekte fayda var. Front-end ya da Back-end developer da olsanız, Yeoman generator’larından uygun paketler bulamamak pek de olası değil. Üstelik tüm paketlerde klasör ağaçlarının (çoğu zaman kendi tarzıma göre değiştiriyorum) ve birçok otomasyonun (Grunt ya da Gulp ile sanal sunucu oluşturma, sıkıştırma, derleme ve birleştirmeden bahsediyorum) otomatik olarak ayarlanmış olması da inanılmaz zaman kazandırıyor.

Sublime Text ve Git entegrasyonu

Geçtiğimiz aylarda Microsoft’un Visual Studio’nun Lite versiyonu olarak tanımladığı VS Code piyasa sürüldü. İçinde tümleşik olarak gelen Node.js sınıfları, Angular JS tanımlamaları ve Git entegrasyonu gerçekten kayda değer özellikler. Sublime Text ile Git entegrasyonunu çeşitli eklentiler ile sağlayabilseniz de, hala bazı eksiklikler göze çarpıyor. Visual Studio Code ile, hatta Git’in komut istemi haricinde kullanabileceğiniz Git Shell ile kıyaslayınca dahi Sublime Text ile aynı özelliklerde Git kullanımı yakalayabiliyorsunuz. Örneğin Git Gutter eklentisi ile değişen, eklenen ve silinen satırları pencerenin sol tarafından renklendirilmiş ikonlarla takip edebiliyorsunuz. Git eklentisi ile dosya eklemek, commit etmek, açıklama girmek ve sunucu dosyalarıyla lokal dosyalarınız arasındaki değişiklikleri görmek oldukça basit. Sadece birkaç harf girerek ya da atayabileceğiniz kısayollar ile onlarca Git komutundan istediğinize ulaşabilmeniz mümkün. Sublime Text ile Git entegrasyonunun tek sıkıntısı ise değişikliklerinizi karşıya push ederken yaşanıyor. Eğer HTTPS kullanıyorsanız, repository url’inizin başına kullanıcı_adı:sifrenizi bu formatta yazarak (bunu yapmak da ne kadar güvenli bilimiyorum) bir şekilde halledebiliyorsunuz. Ama çoğu geliştirici gibi daha güvenli olan SSH kullanıyorsanız, günün sonunda komut isteminden git push yazmanız kaçınılmaz oluyor. Ben denediğim kadarıyla Visual Studio ile de push etmeyi beceremedim. Bu yüzden diğer IDE'lerin Git konusunda Sublime Text'ten daha iyi olduğunu söyleyemeyeceğim.

Sublime Text ile class, fonksiyon, obje ve değişken tamamlama

Sublime Text’in IDE kategorisinden çok Text Editor kategorisinde olmasının en büyük dezavantajı bu olsa gerek. Farz edelim ki javascript dosyamızda yukarıda bir yerde tanımladığımız bir değişkeni yeniden kullanmak istiyoruz. Sublime Text daha ilk harfi yazmaya başlamanızdan itibaren değişkenin adını küçük bir popup penceresinde size sunuyor. Fakat bu değişkenin fonksiyon mu, obje mi, ya da string değeri taşıyan bir değişken mi olduğunu söylemiyor. Satırlar artmaya başladıkça oluşturduğunuz değişkenlerin adını karıştırmaya, veri tiplerinin hangisi olduğu konusunda ikilemlere düşmeye başlıyorsunuz. Eğer gün içinde birden fazla proje üzerinde çalışıyorsanız eğer, kendi yazdığınız kodları hatırlamamanız oldukça mümkün ve kesinlikle utanılacak bir şey değil.

Sublime Text’in desteklediği değişken tamamlaması sadece aynı dosya içerisinde tanımlanmış bir değişken ise mümkün olabiliyor. Artık Javascript’in modüller üzerine kurulduğunu ve dosyalarımızı ne kadar parçalarsak o kadar kolay kontrol edilebildiğimizi de göz önüne alırsak, tek bir dosya içine bütün kodlarımızı yazdığımız günler çok çok geride kaldı. Bir micro site ya da landing page kodlamıyorsak eğer, bu ihtimal pek de olası değil. Bu yüzden ister istemez başka dosyalarda oluşturduğumuz değişkenlere, sınıflara ve değerlere ihtiyaç duyuyoruz.

Farz edelim ki Sublime Text’te bir obje tanımladık, ve bu objenin de belirli alt nitelikleri var. Sublime Text’te hiçbir eklenti kullanmadan bir objenin alt niteliklerine ulaşabilmek mümkün değil. Sublime Text bu konuda diğer IDE’leri oranla oldukça geri kalıyor. VS Code, Brackets, WebStorm gibi IDE’lerde ise obje adını yazıp nokta koyduğunuz an, size objenin tüm alt niteliklerini otomatik tamamlama içinde çıkarıyor.

Sublime Text’e alışan ve IDE kullanmamış geliştiriciler için sınırlı bir tamamlama mekanizması devrim gibi gözükse de, gerçek bir IDE kullanan kişiler için gerçekten olmazsa olmaz bir özellik. Örneğin Visual Studio kullanan .NET geliştiricileri, sadece mouse imlecini gezdirerek bir sınıfa ait tüm niteliklere ve değerlere ulaşabiliyor. Sublime Text haricindeki IDE’lerin çoğunda da, bir fonksiyonun argümanları üzerine mouse imlecini yerleştirerek veri tipini görebilmek, tek bir tıklama ile fonksiyonun ya da değişkenin tanımlandığı dosyaya atlamak oldukça kolay.

Sublime Text’te daha gelişmiş bir tamamlama sistemi için SublimeCodeIntel eklentisini kullanabiliriz. Bu eklenti Javascript, PHP, Ruby, Python gibi dillerin SDK’ları sisteminizde mevcutsa eğer; klasör yollarını belirttiğiniz takdirde hepsini tarayıp size sunabiliyor. Örneğin Javascript’in native komutlarından .substr(), toLowerCase() ya da Math fonksiyonlarını otomatik olarak tamamlayabiliyorsunuz.

HTML ve CSS class ya da id’leri yine HTML ya da CSS içinde tamamlayabiliyorsunuz. Başka bir dosyada tanımladığınız bir fonksiyonu ya da objeyi çağırabiliyor, fonksiyonun aldığı argümanların listesini de fonksiyonu yeniden kullanmak istediğinizde getirebiliyorsunuz. Aynı şekilde alt tuşu ile değişkene tıklandığında, değişkenin tanımlandığı dosyanın satırlarına da geçiş yapabilmek mümkün. Kendi oluşturduğunuz objelerin ya da native sınıfların alt nitelikleri de, projeniz indexlendiği müddetçe tamamlanıyor.

Örneğin Math. yazdığınızda size floor, ceil, round gibi fonksiyonları bir popup içinde getirebiliyor. Fakat bunların yanında alakasız bir şekilde başka metodlarınızı da size sunuyor. Yani Math sınıfı ile birlikte sadece kendi alt sınıflarını kullanabilecekken, Sublime Text bu farkı anlayamıyor ve size önceden tanımladığınız modalOpen fonksiyonunu da çağırabiliyor. Yine de; WebStorm ve Visual Studio Code'da olduğu gibi, Javascript native fonksiyonlarını getirirken bu fonksiyonların aslında tam olarak ne iş yaptığını açıklayan bir mekanizması olsa çok daha iyi olurdu. Maalesef bu eksikliği eklentilerle kapatamıyoruz.

Webstorm tamamen web dillerine (Node, HTML, CSS, Javascript) odaklandığından, özelleştirme yapmaktan hoşlanmayan arayüz geliştiricileri için Sublime Text’ten daha mantıklı bir seçim olarak görülebilir. Eğer "Ben suya sabuna karışmam, bana Notepad++ de yeter" diyorsanız, WebStorm sizin uygun seçenek olabilir. Tamamlama mekanizması gerçekten üst düzeyde ve kendi içinde terminal komutları çalıştırabiliyor.

WebStorm, VS Code ve Brackets özellikleri

Webstorm & Sublime kıyaslaması

WebStorm, Sublime Text ile ya da diğer IDE’ler ile kıyaslandığında tamamlama mekanizması ile kıyaslanmayacak bir sınıfa yükseliyor. Tabii ki bunu sadece arayüz geliştiriciler için ya da Node.js geliştiricileri için söyleyebiliriz.

WebStorm’da tırnaklar arasında istediğiniz dil için kodlar yazabiliyorsunuz. Örneğin Javascript içinde HTML markup atayabileceğimiz bir değişken oluştururken, tırnakların içerisinde iken tek bir komutla birlikte html dosyasına yazıyormuşcasına özelliklere kavuşuyorsunuz.
Sublime ile farklı bir tab açarak istediğimiz HTML kodlarını oluşturup, daha sonra Javascript dosyasındaki tırnaklar içerisine kodlarımızı yapıştırıyoruz çoğu zaman.

WebStorm’un tamamlama, referans ve yardım mekanizmalarının yanında, Angular JS geliştirmesi yapan biri olarak en sevdiğim özelliklerinden biri tümleşik olarak gelen Karma test platformu. Aynı zamanda Node.js yazıyorsanız eğer, debug özelliği ve breakpoint’ler ekleyebilme avantajınız da var.

Sublime Text ile henüz böyle bir şey mümkün olmasa da, hatta bir text editor olduğunu göz önüne alırsak eğer hiçbir zaman mümkün olmama ihtimali oldukça yüksek olsa da, yine de komut istemi üzerinden karma kodlarını çalıştırabilmek ve cevaplar alabilmek mümkün. Grunt ya da Gulp için, Karma için ya da herhangi bir komut istemi uygulaması için; Sublime Text’in cmd komutlarını çalıştırdığı ve cevapları konsol ekranına yazdırdığı birçok eklenti var.

Ben bu satırları yazarken Sublime Text’in 3102 eklentisi, WebStorm’un ise 392 eklentisi vardı. Eklenti çeşitliliği, katkı sağlayan yazar sayısı (Sublime Text’te 2400), ve günlük etkileşim istatistikleri (Sublime’da günlük 50bin eklenti indiriliyor) göz önüne alırsak, Sublime Text daha geniş bir kullanım alanına hitap ediyor.
WebStorm Linux platformunda ise henüz yok.

Brackets & Sublime Text kıyaslaması

Brackets Adobe’un Javascript tabanlı kod editoru ve açık kaynak olarak geliştiricilere sunuluyor. Brackets aynı zamanda Sublime Text gibi cross platform; Mac, Linux ve Windows platform fark etmiyor.

Brackets’ın en önemli özelliği, Photoshop ile etkileşime girebilmesi. Tıpkı bu videoda olduğu gibi, psd dosyasını Brackets içinde referans gösterip, psd üzerinden imajları proje alt klasörlerine çıkartıp (Creative Cloud Extract özelliği) layer parçalamakla uğraşmıyorsunuz. Hatta metinler için fontları import edip, stillerini de kendisi çıkartabiliyor. Tabii ki her ikisinin de Adobe ürünü olduğunu düşünürsek, bir çeşit “Hemşehrisini kayırıyor” durumu olarak da düşünebiliriz.

Makale ve incelemeleri okuduğum kadarı ile Brackets büyük projeler ile baş edemiyor. Dosyalarınız ne kadar artarsa; arama fonksiyonu, tamamlama ve geçiş komutları bir süre sonra cevap vermemeye, ya da çok geç cevap vermeye başlıyor.
Brackets’in an itibarı ile 835 eklentisi var. Sublime Text ise 3100 civarlarında. Stackoverflow'da Sublime Text başlığını içeren 10 bin kayıt varken, en yakın takipçisi olan WebStorm'a ait 3 bin küsür konu açılmış.

Visual Studio Code ve Sublime kıyaslaması

Visual Studio Code için, Visual Studio'nun sadeleştirilmiş versiyonu diyebiliriz aslında. Editör aynı zamanda C# dilini destekleyip, debug gibi özellikleri de kapsıyor. İçinde tümleşik olarak gelen Node.js sınıfları ve aynı zamanda TypeScript tamamlamarı da var. Microsoft'un var olan bir şeye desktek vermekten ziyade kendi ürününü çıkarmadığı nadir durumlardan biri olsa gerek bu istisna. Aynı şaşkınlığı Node.js'e olan desteklerini gördüğümde de yaşamıştım.

Visual Studio Code açık kaynak olarak piyasa sürüldü ve sadece Windows platformunda olacağını beklerken, Mac OS ve Linux ortamında çalışabilmesi ile beni şaşkınlığa uğrattı. İçinde tümleşik olarak gelen Git entegrasyonu var ve komut istemiyle uğraşmadan değişikliklerini görebiliyor, dosyaları karşılaştırabiliyor ve commit yapabiliyorsunuz. Belki benim becereksizliğimden olsa gerek, ben yine de ssh sertifikası ile push edebilmeyi başarabilmiş değilim. Editör olarak baktığımda tamamlama mekanizmaları oldukça iyi ve hem üst düzey, hem de giriş seviyesi geliştiriciler için oldukça güzel motora sahip.

Henüz yeni olduğundan tema çeşitliliği az ve eklentileri de bir o kadar sınırlı. Daha önce Adobe'un Brackets ile Sublime Text'i tahtından indirmeye çalıştığını ve başarısız olduğunu düşünürsek eğer, arayüz geliştiriciler için Visual Studio Code'un piyasaya sürülmesinin pek de cezbedici bir gelişme olacağını düşünmüyorum.

Sublime Text 3'teki yeni özellikler

• Sublime Text bu versiyonla birlikte Python 3 kullanmaya başladı ve bunun da editörün hız performansını artırdığını ve daha stabil olduğunu söyleyebiliriz.
• Sublime Text 3 ile birlikte artık eklentilerin çoğu paket halinde geliyor. Bir önceki versiyonda ise bütün eklentiler ayrıştırılarak yükleniyordu. Böylelikle Sublime Text 3, yüklenen eklentilerle ilgili tercih ya da özelleştirme yapmak istediğimizde, bize bunu kullanıcı klasöründe (Windows için {{ kullanıcı_adı }}\AppData\Roaming\Packages\User) yeni ayar dosyaları oluşturarak yapmaya zorluyor. Bu şekilde sonradan yüklediğimiz eklentileri ya da Sublime Text'in kendisini güncellediğimizde, daha önceden yaptığımız ince ayarlar korunuyor.
• Sublime Text 3'e ait bazı tümleşik özellikler de mevcut. Örneğin bir önceki versiyonda çeşitli eklentilerle bu özelliği elde etsek de, bu versiyonda Clipboard Manager özelliği default olarak geliyor.
• Sidebar'da bulunan klasörlere ya da dosyalara ait iconlar artık özelleştirilebiliyor.
• Sublime Text artık sidebar içindeki imaj dosyalarına tıkladığınızda, kendi içinde önizleme olarak gösterebiliyor.

En iyi 33 Sublime Text Eklentisi

Sublime Text'i daha efektif kullanabilmek için ayar ve özelleştirmelerden çok eklentilere ihtiyacımız var. Bu listede en çok kullandığım popüler veya henüz keşfedilmeyen Sublime Text eklentilerini sıraladım. Ben Sublime Text 3 versiyonunu kullansam da, sizlere Sublime Text 2 ile de çalışan alternatifleri sunacağım.

Sublme Text'e eklentilerimizi, eklentinin github sayfasından dosyalarını indirip kullanıcı klasörüne (Windows için: {{ Kullanıcı Adı }}\AppData\Roaming\Subllime Text {{version}}\Packages\ ) atarak yükleyebiliyorsunuz. Bir de daha kısa yol olan Package Control üzerinden yükleme seçeneği var. Linke tıklayarak kendi versiyonunuza ait package Control kodunu kopyalayın ve Sublime Text konsoluna (ctrl+") yapıştırıp çalıştırın. Package Control yüklemesi tamamlandıktan sonra Sublime Text'i yeniden başlatmanız gerekiyor. Daha sonra komut listesinden (ctrl + shit +p) Package Control: Install Package komutu ile eklentileri yükleyebilirsiniz.

Yüklediğiniz eklentilere ait ayarlar yaparken, eklentiye ait orijinal ayar ( {{eklenti adı}}.sublime-settings ) dosyasını düzenlemekten kaçının. Sublime Text 3 çoğu eklentiyi paketlenmiş olarak yüklüyor ve orijinal ayar dosyasını değiştirmenize izin vermiyor olsa da, hala bazı eklentiler ayrıştırılarak geliyor ve ikinci versiyonda tamamen kullanıcı iznine açık durumda. Mümkün olduğunca eklentilerin User dosyalarında değişiklik yapın. Eğer Preferences / Packages / {{ Eklenti adı }} menüsünün altında User seçeneği ile belirten menü öğeleri yoksa, User klasörünüzde  (Windows için: {{ Kullanıcı Adı }}\AppData\Roaming\Subllime Text {{ version }}\Packages\User\{{ Eklenti adı }} ) aynı hiyerarşik dizinde bir dosya daha oluşturup, ayarlarınızı aynı formatta buraya girin. Böylelikle eklentileriniz güncellendiğinde ya da Sublime Text'in kendisini güncellediğinizde, yaptığınız hiçbir değişikliği kaybetmeyeceksiniz. Bu ayrıntı, ileride başınızın ağrımaması için gerçekten çok önemli.

Eklentiler hakkında açıklama yaparken, ya da sunduğum video ön izlemelerinde kısayollar göstermekten özellikle kaçındım. Sublime Text'e ait yüzlerce klavye kısayolu var ve yüklenen eklentiler hem sublime Text'in default kısayolları ile, hem de kendi aralarında çakışabiliyor. Olmaz demeyin çünkü her eklenti yazarı en güzel kısayolları atamaya çalışıyor. Size tavsiyem, yüklediğiniz her eklentiyi kullanmaya başlamadan önce kullanma sıklığınıza göre ve ait olduğu fonksiyon sınıfına göre yeni kısayollar atayın. Örneğin nadir kullandığım bir eklentiye ctrl+alt+k, ctrl+alt+m kısayolunu atayabiliyor, ya da belirli bir sınıfa ait fonksiyonlar silsilesini ctrl+alt+g, ctrl+alt+*** ile başlayacak şekilde düzenliyorum. Sıkça kullandığım kısayolları ise (örneğin Emmet) ctrl+shift+*** ile başlatıyorum. Kısayollar atadıktan hemen sonra ise, yeni kısayolları post-it'ler üzerine yazıp monitor etrafına konumlandırıyorum. Yeni bir kısayol atamadan hemen önce, Sublime Text'in konsol ekranına (ctrl+" kombinasyonu ile açılıyor) sublime.log_commands(True) komutunu girin ve tuş kombinasyonunu girip boş olup olmadığına bakın. Böylelikle önceden oluşturduğunuz kısayolların üzerine yazmamış olursunuz.

Şimdi En iyi Sublime Text eklentilerini sıralayalım.

AdvancedNewFile

AdvancedNewFile, adından da anlaşabileceği üzere Sublime Text'te yeni dosyalar ve klasörler yaratabilimenizi sağlıyor. Windows Explorer'a gerek kalmadan, ya da herhangi bir dosyanın içeriğini boşaltarak farklı kaydetmek ile uğraşmadan, istediğiniz seviyede klasör ve dosya yaratabiliyorsunuz. Kendi içinde absolute ve relative path seçeneklenin yanında, default olarak dosya uzantısı da ayarlayabiliyorsunuz.

Alignment

Alignment eklentisi ile kodları hizaya getiriyoruz. Örneğin Javascript'te bir objeye ait alt sınıfları : ile ayırırken, okunabilirlik adına hepsini aynı hizaya getiriyoruz. Bu şekilde yaparak çoklu seçim ile rakamsal değerleri değiştirmek istediğimizde de işimiz kolaylaşıyor.

AngularJS

Angular JS ile projeler kodluyorsanız eğer, SublimeCodeIntel ile birlikte ihtiyacınız olan tek eklenti bu olabilir. SublimeCodeIntel, javascript dosyalarının içinde bulunan tırnaklar arasındaki module ve controller isimlerini, aynı zamanda html attribute'leri içerisindeki adları string değeri olarak gördüğünden tamamlama olarak getiremiyor. Bu eklenti ile birlikte projenizi düzenli olarak index'leyerek; module, controller, factory ya da service değişkenlerinizi otomatik olarak tamamlıyorsunuz. Eklenti aynı zamanda ng-*** ile başlayan bütün Angular JS attribute'lerini, javascript kısmında $http, $filter gibi onlarca snippet'i de tamamlayabiliyor. Angular JS ile uygulamalar yazıyorsanız eğer, olmazsa olmaz bir eklenti.

Auto Semi-Colon

Adından anlaşılacağı üzere, AutoSemiColon CSS ve Javascript'te satır ve nitelik sonlarına koyduğumuz noktalı virgülü ; otomatik olarak koyuyor. Sıkıştırma sonrası hata almak istemiyorsak, daha da önemlisi temiz kod yazmak istiyorsak noktalı virgülü es geçmemek gerekiyor. Örneğin Less ile CSS yazarken noktalı virgülü unuttuğumuzda stiller compile edilmiyor.

AutoFileName

AutoFileName gün içinde en çok kullandığım eklentilerden biri. Dosya adlarını otomatik olarak tamamlıyor. Ister href etiketlerinde, ister stillerde background-image atarken, ya da herhangi bir tırnak arasında bize relative olarak aynı seviyedeki dosya isimlerini ya da klasörleri getiriyor. Ayarlardan ana klasörünüzü absolute ve relative olarak, ya da proje ana dizini olarak ayarlamak mümkün. HTML içinde  <img /> etiketine ait yolu tamamlarken, imaja ait width ve height özniteliklerini de getirebiliyor isterseniz. Normalde tırnaklar arasında otomatik olarak yolları getirebiliyor olsa da, ben bir tuş kombinasyonu ile çalışacak şekilde ayarladım. Böylece imleç tırnak arasında konumlanmışken her seferinde dosya yollarını araştırmıyor, aynı zamanda tamamlamak istediğim diğer değerler arasında dosya isimlerini görmüyorum.

ApacheConf.tmLanguage

Bu eklenti ile .htaccess dosyalarına syntax highlight özelliği kazandırıyoruz. Eklenti aynı zamanda commment-out özelliği de taşıyor.

BracketHighlighter

Sublime Text'in en sevdiğim eklentilerinden biri. Adından anlaşılacağı üzere bracket'larınızı highlight ediyor. Yani parantezler arasında (köşeli, süslü, normal) ya da tırnaklar içinde (tek, çift) fare imleciniz varken, bu alanın başını ve sonunu belirgin hale getiriyor. Karışık bir matematik dizisi yazarken, ya da iç içe geçmiş (nested) fonksiyon ve stiller yazarken, Javascript dosyasında tam olarak hangi fonksiyon içinde olduğunuzu anlamaya çalışırken gerçekten çok yardımcı oluyor. İşin görsel boyutundan çok, bu eklentinin seçim fonksiyonu işimize yarıyor diyebilirim. Parantez arasını, tırnaklar arasını seçmek, parantezler ile birlikte içeriği seçmek, ya da imleci parentezin sonuna ya da başına getirmek istiyorsak eğer BracketHighlighter ile fareye dokunmadan bunu yapabiliyoruz. Eklenti aynı zamanda parantezler arasında değişimler yapmanızı (süslü parantezi köşeli paranteze çevir gibi), belirli bir seçimi parantezler içine almayı, tek tırnak ve çift tırnak arasında değişimi de gerçekleştiriyor. Kısayollarınızı ayarladıktan sonra ne kadar hız kazandığınızı fark edeceksiniz.

Case Conversion

Hepimizin kendine ait değişken isimlendirme metodu var. Hatta çoğu zaman farklı dile ya da dile ait sınıfları tanımlarken farklı isimlendirme metodları kullanıyoruz. Örneğin PascalCaseMetodu, camelCaseMetodu, snake_case_metodu ve kabab-case-metodu gibi. Case Conversion eklentisi ile bu metodlar arasında hızlıca geçiş yapabiliyoruz. Ya da tamamen bağımsız bir şekilde "Herhangi bir kelime dizisini" herhangiBirKelimeDizisi formatına getirebiliyoruz. Eğer birden çok isimlendirme metodunuz varsa eğer, mutlaka sahip olmanız gereken eklentilerden biri.

Color Highlighter

Eğer geliştirici olmanın yanında aynı zamanda tasarımcı değilsek, hex kodlarına bakarak hangi renkleri çağrıştırdığını (bunu yapabilen de çok az) anlayamıyoruz. Aynı değerlere sahip RGB formatı belki bir şeyler çağrıştırsa da, yine de kodlara bakarak renkleri tahmin etmeye çalışmak bir hayli zor. ColorHighlighter eklentisi ile renk kodlarının altına aynı renkte çizgi çekebilir, ya da dolgu rengini değiştirebilir, aynı zamanda tek bir kısayol ile renk değiştirme paletini çağırabilirsiniz. Eklenti aynı zamanda renk kodu atanan less ve sass değişkenlerini de belirgin hale getirebiliyor. Sublime Text için olmazsa olmaz eklentilerden biri.

Console Wrap for JS

Sublime Text'in en çok göz ardı edilen eklentilerinden biri. Harika bir özgüveniniz yoksa eğer, tam olarak neler döndüğünü anlayabilmek için, ya da debug yaparken hangi aşamada hata aldığınızı görebilmek adına değişkenleri konsola yazdırıyoruz. Bu eklenti ile Javascript değişkenlerini seçerek, ya da fare imleciyle değişkenin üzerine geldikten sonra tek bir kısayol ile console.log("degisken", degisken); formatında bir alt satıra ekletiyoruz. Bu eklentiyi çok önceleri biraz modifiye edip değişkenleri window'a bağlıyordum bir zamanlar fakat artık değişkenlerimizi window'a bağlamak gibi tükaka şeyler yapmıyoruz. (İlgili Makale: Global namespace Pollution in Javascript)

CSS Extended Completions

Sublime Text'e dair en sevdiğim ve stil yazma aşamasında en çok kullandığım eklentilerden biri. CSS Extended Completions eklentisi ile belirli bir klasördeki css, less ve scss dosyalarını tarayarak; bütün sınıfları, fonksiyonları ve id'leri belleğine alıp otomatik tamamlama olarak sunuyor. Belleğe alınmış bir css sınıfını html içinde emmet ile tag oluştururken dahi çağırabiliyor, ya da başka bir css dosyasındaki bir sınıfı yeniden tamamlayabiliyorsunuz. Her ne kadar SublimeCodeIntel de bunu yapabiliyor olsa da, CSS Extended Completions ile Less ve Sass fonksiyonlarını argümanları ile birlikte getirebiliyorsunuz. Eğer CSS Preprocessor kullanıyorsanız ve stillerinizi önceden oluşturduğunuz fonksiyonlar aracılığı ile yazıyorsanız, bu eklenti gerçekten inanılmaz zaman kazandırıyor. CSS Preprocessor kullanan ya da kullanmayan herkesin kesinlikle ihtiyacı olacağı bir eklenti.

Eğer benim gibi her projede sürekli olarak kullandığınız yardımcı stil dosyaları ya da Less/Sass fonksiyonlarınız varsa eğer, ya da tüm stillerinizi css/ klasöründe toplamayı alışkanlık haline getirdiyseniz; eklenti ayarlarından default klasörleri belirtip Sublime Text açılışında her projede otomatik olarak taramasını söyleyebiliyorsunuz. Eklenti aynı zamanda, html içindeki <link rel="stylesheet" type="text/css" href="" /> etiketlerini tarayarak css yollarını bulup indexleyebiliyor. Default olarak bu seçenek kapalı olarak geliyor, bunun için birkaç ayar yapmanız gerekmekte.

DocBlockr

DocBlockr eklentisi ile kod bloklarımıza dökümantasyon oluşturuyoruz. Örneğin parametreler alan bir Javascript, PHP, Less, Sass fonksiyonunuz varsa eğer, aldığı değişkenlere ve fonksiyonun kendisine ait açıklamalar giriyorsunuz. Böylelikle takım arkadaşlarınız ya da siz, fonksiyonun tam olarak ne iş yaptığını ya da argümanlarının ne olduğunu anlayabilmek için vakit kaybetmiyorsunuz. Yine de, mantıklı değişken isimlendirme metodları ve değerleri kullanarak, kendiliğinden dökümantasyonlanmış kod yazma taraftarıyım.

Emmet

Emmet; Package Control'u saymazsak eğer, şu an Sublime Text'in 2,2 milyon ile en çok indirilen eklentisi durumunda. HTML ya da CSS ile uğraşan herhangi birinin mutlaka ama mutlaka yüklemesi gereken bir araç. Bir zamanların Zen Coding'inin yerine geçen Emmet'i, kurallı ifadelerle karmaşık tag hiyerarşileri oluştururken tanıdık. ( header#header>nav>ul.nav>(li>a[href=index-$.html])*5 )

Emmet; kısayollar ile html içinde class, id ve çeşitli css özelliklerini kolay bir şekilde oluşturuyor. Efektif olarak kullanırsanız eğer, neredeyse her CSS sınıfı için kısayollar ile stiller yazabiliyorsunuz. Örneğin; mb10-25p yazıp tab tuşuna bastığınızda, size margin-bottom: 10px 25%; niteliğini veriyor.

Emmet aynı zamanda matematiksel fonksiyonları gerçekleştiriyor, bir tag blogunu başka bir tag içine alıyor, tagları birleştiriyor, tek bir tuşla parent tag'ı kaldırıp indent'leri yeniden ayarlıyor, imaj yolları belirtilen img tagleri için data-uriler oluşturuyor, width ve height niteliklerini dolduruyor, prefix ile yazılmış bir css niteliğinde yaptığınız değişikliği diğer satırlara yansıtıyor ve klavye kısayolları ile rakamsal ifadeleri 0.1'er, 1'er, 10'ar aralıklara artırıp eksiltebiliyor. Emmet'e ait tüm özellikleri keşfedebilmek için, Emmet Dökümantasyonu'na mutlaka göz gezdirin.

Gist

Eğer Github kullanıyorsanız eğer, kendi kod bloklarınızı sakladığınız servisi olan Gist'i de mutlaka kullanıyorsunuz demektir. Bu eklenti ile birlikte birkaç kısayol ile Gist dosyalarınıza ulaşıyor, var olanları güncelliyor, private ya da public olarak yenilerini oluşturabiliyorunuz.

Grunt

Grunt Javascript tabanlı bir task runner sistemi. Node.js altyapısını kullanan bu sistem ile dosyalarınızı birleştirebilir, css ve js dosyalarınızı sıkıştırabilir ya da birleştirebilir, sanal sunucu oluşturabilir, css preprocessor'ları tetikleyip stillerinizi compile edebilir, komut istemine komutlar aktarabilir, Livereload ile etkileşim sağlayabilir, ya da belirli bir klasörü izleyip değişen dosyalar ile ilgili istediğiniz işlemleri (kendi lokal versiyon sisteminiz kurmak da dahil) yapabilirsiniz. Hele ki işin içine komut istemi girdiği vakit, yapabileceklerinizin gerçekten sınırı yok. Örneğin imagemagick kütüphanesi ile, belirli bir klasördeki imajları sıkıştırabiliyor, formatını değiştirebiliyor ya da watermark ekleyebiliyorum. Grunt içinde buna benzer eklentiler olsa da, komut istemcisinden de sıkça kullandığım bu kütüphaneyi Grunt ile entegre etmeyi tercih ettim ben.

Sublime Grunt eklentisi ise, normalde grunt komutlarına ulaşabilmek için komut istemcisini açıp komutlar girmek yerine, Sublime Text içinde bu komutları çalıştırabilmenizi ve Sublime Text'in konsol ekranından cevapları alabilmenizi sağlıyor. Eğer Grunt kullanıyorsanız, mutlaka yüklemeniz gereken bir eklenti.

HTML Nest Comments

HTML içinde sıkça commentler kullanıyorsanız eğer, pek de bilinmeyen ama gerçekten işinize yarayacak bir eklenti daha. Sublime Text diğer IDE'lere oranla, bir tag'ın açılış ve kapanışlarını indentlere dikkat ederek yazsanız bile bazen doğru tahmin edebilmekte zorlanıyor. Eğer ki HTML içinde .NET, PHP ya da diğer dillere ait değişkenler yazdırıyorsanız eğer, HTML taglarının başını ve sonunu tahmin edebilmek çoğu zaman Sublime Text için eziyet haline geliyor. Bunun önüne geçebilmek için, kendi yazdığım bir makro ile (videoyu izlerseniz anlayacaksınız) div kapanışlarına id ya da class değerlerini yazdırıyorum. Peki Sublime Text ile içinde comment bulunan bir kod blogunu comment-out yapmaya çalıştığınızda ne oluyor? Sublime Text seçili olan blok içindeki commentleri es geçip, sadece seçimin başlangıç ve sonuna comment ekliyor. Böylelikle de aralardaki comment başlangıç ve son karakterleri, kodun saçma sapan bölümlerini comment içine alıyor.

HTML Nest Comments ile, seçili blok içindeki comment karakterleri regexp ile değiştirilip, karışıklığın önüne geçiyorsunuz. HTML ile uğraşan ve düzenli kod yazmak isteyenlerin mutlaka kullanması gereken bir araç.

HTML5

Bu eklenti ile HTML5'e ait yeni tag'leri tamamlıyorsunuz. section, main, header, footer, figure bunlardan birkaçı. Emmet ile istediğiniz string'i tag haline getirebilseniz de, Sublime Text'in bütünleşik HTML dili bunların çoğunu desteklemiyor.

Inc-Dec-Value

Sublime Text'in pek bilinmeyen nimetlerinden biri daha. Sadece arayüz geliştiricileri için değil, herhangi bir dilde hatta sadece düz yazı yazıyor olsanız bile mutlaka yüklemeniz gereken bir eklenti. Inc-Dev-Value eklentisi ile tıpkı Emmet'in yaptığı gibi rakamsal değerleri 0.1'er, 1'er, 10'ar, 100'er olarak artırıp eksiltebiliyorsunuz. HEX formatında renk değerlerini rgb, rgba, hsl, hsla gibi birçok formata çevirebiliyor. Bu eklentinin en sevdiğim özelliği ise, önceden oluşturduğunuz kelime dizileri arasında hızlı bir şekilde geçiş yapabiliyor olması. Ben Javascript'e ve CSS'e ait bütün karşıt değerleri kullanıcı dosyasına dize olarak ekleyip, istediğim zaman bir diğerine geçebiliyorum. Örneğin fadeIn / fadeOut, true / false, show / hide, static / relative / absolute / fixed ya da next / prev gibi terimler arasında hızlıca geçiş yapabiliyorsunuz. Eğer videoyu izlerseniz, ne demek istediğimi daha iyi anlayacaksınız.

jQuery

Javascript'in en yaygın kütüphanelerinden biri olan jQuery'nin fonksiyonlarını otomatik tamamlama ile getiren en yaygın eklenti bu ve yaygın olmasının hakkını da veriyor. Birçok fonksiyon callback seçenekleri ile birlikte geliyor.

LESS

CSS Preprocessor olarak Less kullanıyorsanız eğer, bu eklenti ile Less için gelişmiş syntax highlight özelliklerine kavuşuyorsunuz. Eklenti ile aynı zamanda Less.js'in built-in fonksiyonlarını da (fadein, darken, desaturate, data-uri) tamamlayabiliyorsunuz.

Local History

Sublime Text'in en sevdiğim eklentilerinden biri. Eğer versiyon kontrol sistemi kullanmıyorsanız, ya da dosyalarınız bad sectorlerin azizliğine uğruyorsa; Local History eklentisi hiç beklemediğiniz anda hayat kurtarıyor. Bu eklenti ile düzenlediğiniz dosyaları kaydettiğinizde, daha önceden belirttiğiniz bir klasöre hdd sürücüsü yolundan başlayarak (Örneğin: D:\Sublime Backups\C\Projeler\desktop\proje1\js\main.js gibi) yedekler alıyor. İşin güzel yanı dosya isimlerine tarih ve saat damgası atıyor ve aynı zamanda eski versiyonlarla değişen satırları kıyaslayabiliyorsunuz. (Tıpkı git diff komutu gibi)

Monokai Extended

Sublime Text'in tümleşik olarak gelen Monokai şemasının geliştirilmiş bir versiyonu. Bu eklenti ile Sublime Text daha spesifik obje ve alt sınıfları renklendiriyor.

Quick File Open

Bu eklenti daha önceden tanımladığınız belirli dosyalara tek bir kısayol ile hızlı ulaşabilme seçeneği sunuyor. Örneğin ben Windows hosts dosyasını, jQuery'nin son versiyonunu, sık kullandığım fonksiyonlarımı sakladığım Javascript dosyasını ve örnek bir .htaccess dosyasını listeye ekledim.

Random Everything

Sublime Text'in keşfedilmeyen cevherlerinden biri daha. Adından da anlaşılacağı üzere, bu eklenti random veriler oluşturuyor. Örneğin tarih (GG/AA/YYY formatında), belirttiğiniz aralıkta sayı, belirttiğiniz aralıkta ondalık sayı, rastgele harfler, rastgele paragraf, UUID, url, rastgele bir kelime, e-mail adresi, ad, soyad, ad ve soyad ikilisi, hex formatında renk, IPv4 adres, IPv6 adres ve son olarak rastgele rakamlar ve harflerden oluşan spesifik bir kelime oluşturabiliyor. Her ne kadar basit gibi gözükse de, eklentinin kullanım yerleri tamamen yaratıcılığınıza kalmış.

Kendi kullandığım yerler hakkında birkaç örnek vereyim, böylece tam olarak ne iş yaptığını anlayabilirsiniz.

• Input ve textarea'ların name attribute'lerini doldurmayı yazılımcı insiyatifine bırakmışsam eğer, bu eklenti ile harf ve rakamlardan oluşan özgün name attribute'leri (name="vm886mFtIN1iCPO") atayabiliyorum. Böylece form içinde aynı ada sahip name değerleri çakışmıyor.
• Bir klasör içinde bulunan numaralandırılarak isimlendirilmiş imaj dosyalarının yolunu, src attribute'lerini çoklu seçim ile seçerek rastgele rakamlar yazdırıyorum aralığını belirterek.
• Uydurmam gereken tablo sütunlarına ait ad soyad, e-mail, twitter adresi, tarih (bu arada tarih formatını değiştiren eklentiler de var) ya da telefon numarasını bu eklenti ile oluşturuyorum.

RegReplace

Makalenin giriş bölümünde belirttiğim cümleyi hatırlatayım: "Yayımlanmaya hazır bir javasript kodunun içindeki konsol kayıtlarını silmek adına; regexp yazmak, macro oluşturmak ve bu macro'ya kısayollar atamak" cümlesindeki regexp işlemlerini bu eklenti ile gerçekleştiriyorum. Kendi ihtiyaçlarıma göre oluşturduğum birçok fonksiyon var ve hepsine tek tuş ile ulaşabiliyorum. Eklentinin kendi içinde HTML5 ile birlikte deprecated olmuş tag'leri kaldırmak, trailing white space'leri silmek (Sublime Text'in kendi içinde böyle bir özelliği var zaten), seçili kısma ait HTML comment'leri temizlemek ve Javascript'in çift forward slash (//) ile başlayan satır içi commentlerini silmek gibi fonksiyonlar default olarak geliyor.

Eklenti ile neler yapılabileceğini göstermek adına, kendim için oluşturduğum birkaç regexp örneği vereyim.

• Başlıkları anchor haline getirebilmek için, başlık içindeki Türkçe karakterleri normal hale getirip araya çizgi çekerek (kebab-case) id olarak atıyorum.
  ( <h1>Örnek başlık</h1> ---> <h1 id="ornek-baslik">Örnek başlık</h1> )
• Sublime Text içinde Türkçe kelimeleri tamamen büyük ve tamamen küçük hale getirirken ı ve İ harflerinde sıkıntı yaşıyoruz. Bunun için bir regexp fonksiyonu yazdım.
• Makalenin başında bahsettiğim Javascript console komutlarını geliştirici konsolunda kalabalık yapmasın diye -ya da işim bittiğinde-, seçili blok içerisindeki tüm console komutlarını comment haline getiriyorum. (Aynı zamanda tam tersini yapan bir komutum da var.)

Videoyu izlerseniz eğer, daha iyi anlaşılacağından eminim.

SASS

CSS preprocessor olarak SASS kulanananlar için gelişmiş syntax highlight özelliklerinin yanında, aynı zamanda SASS'ın tümleşik fonksiyonlarını ve özel terimlerini de tamamlayan harika bir eklenti. İster sass olarak ister scss olarak stil yazıyor olun, bu eklenti her iki syntax stilini de kapsıyor.

SFTP

Sublime Text içinde adeta elim ayağım, işimi en çok kolaylaştıran eklentilerden biri. Henüz keşfetmemiş olan birçok developer ile tanıştığım için, bu listeye koyma ihtiyacı hissettim. Alınmasın ama, dosya uplod ve download işleri için FileZilla bir developer için oldukça yavaş ve meşakkatli bir araç. Bu eklenti ile sunucu dosyalarında gezintiye çıkabilir, değişiklik yapabilir, silebilir, oluşturabilir, klasör ve dosyaların chmod değerlerini belirleyebilir, lokalden sunucuya (ya da tam tersi) senkronizasyon ve değişiklikleri gerçekleştirebilir ve en önemlisi dosyayı kaydeder kaydetmez sunucuya otomatik olarak upload edebilirsiniz.

SideBarEnhancements

SideBarEnhancements eklentisi Sublime Text Sidebar'ına yeni yeni özellikler getiriyor. Belirli dosya tiplerine ait "Birlikte aç" uygulamaları ekleyebiliyorsunuz. Örneğin imaj dosya tiplerini Photoshop ile açmak gibi. Ya da Sidebar içinde dosya kopyalamak, yapıştırmak ya da kesmek gibi işlemleri gerçekleştirebiliyorsunuz. Belirli bir klasöre sağ tıklayıp yalnızca içerisindeki dosyalarda arama yapmak, arama yapıp değiştirmek gibi komutlar da var. Aynı zamanda dosyaları tarayıcı ile açmak, dosya yolunu ya da ismini kopyalamak, dosyaları windows explorer içinde göstermek ve proje ayarlarında değişilik yapabilmek de en önemli özelliklerinden biri. SideBarEnhancements, Sublime Text içinde mutlaka olması gereken eklentilerden biri.

StyleToken

Sublime Text'in bilinmeyenlerinden biri daha. Bu eklentiyle birlikte, bir dosya içerisindeki belirli bir öbeği odak noktası haline getirebiliyorsunuz. Kendi içerisinde birkaç çeşit highlight stili var ve belirli bir kelime ya da kod bloklarını farklı renklerde belirginleştirebiliyorsunuz. Örneğin bir yığın kod içerisinden sadece input, select ve textarea'lara odaklanmak istiyorsunuz diyelim. Bu eklenti size böyle anlarda inanılmaz zaman kazandırıyor. Videoyu izlediğinizde taşlar yerine oturacak.

SublimeCodeIntel

Ve geldik Sublime Text'in ağır toplarından birine. Sublime Text'i Text Editör kategorisinden alıp bambaşka yerlere götürüyor bu eklenti. Gelişmiş kod tamamlaması için mutlaka ama mutlaka yüklenmesi gereken bir araç. SublimeCodeIntel, eklentiler arasında her daim ilk beş içinde ve indexleme motorunun yeni versiyonla birlikte daha da akıllı olduğu açıkça fark ediliyor.

SublimeCodeIntel, yazılım dillerinin SDK yollarını belirttiğiniz takdirde, bütün alt sınıflarını ve argümanlarını size otomatik tamamlama içinde sunabiliyor. Eklentinin JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, Sass, HTML5, Perl, CSS, Twig, Less, Node.js, TemplateToolkit ve PHP dilleri indexleyebilmesi aktif seçenek olarak geliyor. Ben veritabanını rahatlatmak adına kullanmadığım dilleri devre dışı bırakıyorum. SublimeCodeIntel ile aynı zamanda başka bir dosya içerisinden oluşturduğunuz bir değişkeni çağırabiliyor, argümanlarını da fonksiyon içine yerleştirebiliyor.

HTML ve CSS içinde kullanılan bütün class ve id'leri, yine HTML, Javascript ve CSS içinde tamamlayabiliyorsunuz. SublimeCodeIntel o kadar akıllı ki, size ait değişken isimlendirme yöntemlerini de öğrenebiliyor. Örneğin sıkça templateUrlPath adında bir değişken oluşturuyorsanız, yepyeni bir projede size bunu öneri olarak getirebiliyor. Tek yapmanız gereken biraz sabretmek ve SublimeCodeIntel'e her şeyi tarayabilmesi ve öğrenebilmesi için yeterince zaman vermek. Indexlenen öğeler Windows için Users\{{Kullanıcı Adı}}\.codeintel klasöründe tutuluyor ve an itibari ile benim veritabanım 150 mb boyuta ulaşmış durumda. Eğer tamamlama mekanizmasının ağırlaştığını hissediyorsanız, bu klasörü silip SublimeCodeIntel'in kalbiniz kadar temiz bir sayfa açmasını sağlayabilirsiniz.

SublimeLinter

Yazdığınız kodun çalışıp çalışmadığını tarayıcıda görmek yerine editör ekranında görmek istiyorsanız, daha da önemlisi tertemiz kod yazmak istiyorsanız eğer; SublimeLinter sizi doğru yola getiriyor. Bu eklenti ile birlikte virgül atladığınız, parantez kaçırdığınız ya da indentlere üşendiğiniz noktalarda sizi uyaran bir sistemle tanışıyorsunuz. İlgili satırın sol tarafına, yapılan yanlışın ölümcül ya da göz ardı edilebilir bir yanlış olup olmadığına göre sarı ya da kırmızı iconlar çekiyor, aynı zamanda yanlışın tam olarak nerede yapıldığına dair işaret koyuyor ve açıklamayı da status bar'da gösteriyor. Sizi uyarma yöntemlerini ya da tam olarak ne zaman uyaracağını özelleştirebiliyorsunuz.

SublimeLinter bu işlemler için aslında çekirdek eklenti, yani bunu yükler yüklemez yazdığınız kodları düzeltmiyor. Desteklediği her dil için ayrı ayrı eklentiler çıkartılmış durumda. Bu eklentinin önceki versiyonu ise böyle değildi, sınırlı sayıdaki dili tek bir eklenti üzerinden düzeltiyordu. Şimdi ise PHP, Javascript, Java, CSS, HTML, HAML, Python, Ruby, Json, CoffeeScript, Google Closure, XML, React.js, Slim, Markdown, Go, Perl, C, C++, SQL, Twig, Bootstrap, Jade, LESS, SASS gibi dilleri, framework'leri ve kütüphaneleri destekleyen onlarca eklenti seçeneği mevcut. Artık eski versiyona oranla ayarları yapıp Linter'i çalışır hale getirmek eskisi kadar kolay olmasa da, bunun için birçok tutorial mevcut. Temiz kod yazmak istiyorsanız mutlaka yüklenmesi gereken bir araç.

SwapStrings

Farz edelim ki, bir proje ya da dosya içerisindeki iki terimi karıştırmışsınız ve up yazan yerlere down, down olması gereken yerlere de up yazmışsınız. Bunu doğru hale getirmek için nasıl bir metod izliyoruz? Öncelikle down kelimesini saçma sapan ama yeterince spesifik bir şeyle (örneğin hfjdhj34gj5h3) değiştiriyor, daha sonra up kelimesini down'a, hfjdhj34gj5h3 kelimesini de up'a çeviriyorsunuz. İşte bu eklenti ile iki terimin yerlerini tek bir komut ile değiştirebiliyorsunuz. Buna tek tırnakları çift, çift tırnakları tek tırnak olarak değiştirmek de dahil. Videoyu izleyerek ne kadar kolay olduğunu görebilirsiniz.

Terminal

Terminal'in bir geliştirici için ne kadar güçlü bir araç olduğunu bu makalede anlatmayacağım. Imaj dosyalarını sıkıştırmak, boyutunu değiştirmek, LESS ya da SASS dosyalarınızı compile etmek, bir klasörün içini boşaltmak ya da adını değiştirmek ya da tamamen alakasız işlemler için üçüncü parti yazılımlar veyahut işletim sisteminin araçları ya da online servisler kulanıyorsanız eğer; şu ana kadar kaybettiğiniz zamanın haddi hesabı yok demektir. Terminal hala birçok sistem için en stabil, en güvenilir platformların başında geliyor ve bilgisayarlar hayatımızda var olduğu müddetçe de öyle olacak.

Bu eklenti ile proje'nin ana dizinini hedef göstererek, ya da aktif olarak açık dosyanın bulunduğu klasörü hedef göstererek terminal penceresi açabiliyorsunuz.