Sublime Text'i Etkin Kullanmak

Empat

Çavuş

58 Mesaj

Tüm Başarılarını Gör

Sublime Text'i Etkin Kullanmak

-Sublime Text'i eklentilerle bir IDE'ye dönüştürebilir miyiz?
-Sublime Text'i eklentilerle ve diğer özelliklerle (snippet vb.) en fazla ne kadar geliştirebiliriz?
-Sublime Text'e ekleyebileceğimiz ne gibi eklentiler mevcut?

Kafanızda bu tür sorular varsa doğru yerdesiniz. Metin editörlerini ve en başta Sublime Text'i çok seven birisi olarak keşfettiğim ve kullandığım enfes eklentileri sizinle paylaşmak istedim. Sublime Text kullanan hemen hemen herkesin "keşke şu özellik de olsa çok güzel olurdu be" dediği bir an gelmiştir. Sublime Text, diğer metin editörlerine kıyasla oldukça gelişmiş bir metin editörü. Fakat daha da geliştirebilmek hatta kısmen bir IDE'ye dönüştürebilmek bizim elimizde. Sublime Text'e ekleyebileceğimiz onlarca eklenti mevcut. Ve Sublime Text'e ekleyebileceğimiz snippet'ler ile default olarak kapalı olan özelliği açmak gibi bir çok yapabileceğimiz şey daha var. Bir çok eklentiyi incelemiş ve denemiş birisi olarak en gerekli olanları sizin için seçtim. Ve kullandığım, en gerekli gördüğüm ve de default olarak kapalı gelen Sublime Text özelliklerini seçtim. Ve de birkaç basit snippet tabi ki. Olmazsa olmaz olarak gördüğüm herşeyi bu yazı altına topladım. Yeni eklentiler çıktıkça veya az bilinen ama çok gerekli bir özelliği, eklentiyi keşfettikçe bu yazıyı güncelleyeceğim.

Öncelikle Sublime Text'te eklenti kurmak için gerekli olan package control sistemini nasıl yükleyeceğimizi anlatacağım. Sublime Text'i açıyoruz ve View > Show Console yolunu izleyerek Console'a ulaşıyoruz. Aşağıdaki kutudaki kodların tamamını kopyalayıp Sublime Text'teki Console'a yapıştırıyoruz.

Kodlar:

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Enter tuşuna bastığımızda ortalama birkaç saniyede yüklenmiş olacak. Package Control'un yüklendiğini teyit etmek için Ctrl+Shift+P klavye tuş kombinasyonunu kullanarak çıkan arama kutucuğuna Package Control yazabiliriz. Yazdığımızda Package Control ile ilgili seçenekler çıkıyorsa yükleme işlemi sorunsuz tamamlanmıştır.

Şimdi Package Control'u kullanmayı öğrenelim.

Paket yüklemek:

Package Control'da bir işlem yapmak için izleyeceğimiz yol her zaman Ctrl+Shift+P tuş kombinasyonuyla çıkan kutucuğa Package Control <yapmak istediğimiz işlem> yazmak. "<yapmak istediğimiz işlem>" yazmayacağız tabii ki. Misal olarak bir paket yüklemek istiyoruz. Bu paket bir eklenti, tema veya renk şeması olabilir. Kutucuğa ulaştıktan sonra install package yazacağız ve -ilk sırada çıkan- Package Control: Install Package seçeneğine tıklayacağız. Buraya yüklemek istediğimiz paketin adını yazdıktan sonra yüklemek istediğimiz pakete tıklayınca Sublime Text penceresinin sol altında -çoğu zaman Line x, Column x yazan yerde- Install package <yüklemeyi seçtiğimiz paket adı> yazar. Örnek olarak; Install package SublimeLinter Buradaki yazı ve yanındaki = işaretli küçük animasyon sonlanıp tekrar Line x, Column x (x yerine bulunduğunuz satır veya sütun numarası yazacak) yazmaya başladığında paketimiz yüklenmiş demektir.

Not:

Paketimiz yüklendiğinde -bazı paketlerde- Package Control Messages başlıklı bir sekme açılır. Bu sekmede paketle ilgili bilgilendirici ön yazı vardır.

Paket kaldırmak:

Ctrl+Shift+P tuş kombinasyonuyla kutucuğa ulaştıktan sonra remove package yazacağız ve -ilk sırada çıkan- Package Control: Remove Package seçeneğine tıklayacağız. Buraya kaldırmak istediğimiz paketin adını yazdıktan -ve tıklayıp yüklü paketlerimizin listelenmesini sağladıktan- sonra kaldırmak istediğimiz pakete tıklıyoruz. Tüm işlem bu kadar! Artık paketimizin sonsuzluğa kadar yolu var!

Not:

Sublime Text penceresinin sol altında -çoğu zaman Line x, Column x yazan yerde- Removing package <kaldırmayı seçtiğimiz paket adı> yazar. Buradaki yazı ve yanındaki = işaretli küçük animasyon sonlanıp tekrar Line x, Column x (x yerine bulunduğunuz satır veya sütun numarası yazacak) yazmaya başladığında paketimiz kaldırılmış demektir.

Yüklenen paketin konfigurasyon ayarları:

Sıra geldi yüklediğimiz paketin konfigurasyon ayarlarını yapmaya. Yüklediğimiz paketin konfigurasyon ayarları kısmına ulaşmak için Preferences > Package Settings > <yüklediğimiz paketin adı> yolunu izliyoruz. Yüklediğimiz paketin adının üstüne geldikten sonra çıkan seçeneklerde Settings - Default vb. bir seçenek vardır. Bu seçeneğe tıkladığımızda yüklediğimiz paketin varsayılan ayarlarının olduğu dosya açılır. Settings - User seçeneğine tıklayınca ise -genelde boş olan- yüklediğimiz paketin kullanıcı ayarlarının olduğu dosya açılır. Varsayılan olarak true (geçerli), false (geçersiz) olarak tutulan bir özelliğin değerini değiştirmek için paketin varsayılan ayarlarının olduğu konfigurasyon dosyasında o özelliğin olduğu satırdaki özelliği ve değerini kopyalıyoruz. Mesela aşağıda anlatacağım SublimeLinter eklentisinde hata ayıklama özelliği varsayılan olarak false (geçersiz) olarak gelir. Yani bu şekilde: "debug": false Biz bu hata ayıklama özelliğini açmak için "debug": false kısmını kopyalayıp Settings - User kısmında { } süslü parantezler arasına yapıştırır ve "debug": true şeklinde değiştiririz. Kopyaladığımız "debug": false kısmında false'un sonunda virgül olabilir. Bu virgül varsayılan ayar dosyasında bu ayardan sonra başka bir ayarın tanımlanacağı içindir. Settings - User dosyamıza eklerken eğer altında başka bir ayar tanımlayacağımız satır yoksa buradaki virgülü kaldırmalıyız. Dosyamızda gerekli değişiklikleri yaptıktan sonra dosyayı kaydedip bu bölümden çıkabiliriz. Eğer dosyada tanımladığınız ayarın çalışmadığını veya düzgün çalışmadığını farkederseniz ilk olarak ayar tanımlamasından sonra kapatıp açmadıysanız -çoğu ayarda kapatıp açmaya gerek yoktur- Sublime Text'i kapatıp açın. Hala düzelmezse Settings - User dosyanızın içeriğini kontrol edin.

Not:

Eğer dosya içeriğinizde bir yanlış olursa her Sublime Text'i açarken veya ara ara bir kutucuk açılarak "Error trying to parse settings......." vb. bir hata verir.

Eklentiler

Sublime Linter
Yazdığınız kodlarda hata olup olmadığını kontrol etmek için illa bir derleyicide açmanıza gerek yok. Nasıl mı ? IDE kullananların en çok kullandığı araçlardan birisi olan debugger (hata ayıklayıcı) burada sesini duyuruyor. Debugger kullanabilmek, kodlarımızdaki hataları görmek için derleyicide çalıştırmak sadece IDE kullananların yapabileceği şey değil tabii ki. Sublime Linter eklentisini kurup çalıştırmanızla beraber hatalı yazdığınız kodlarınızın altına bir çizgi çekip sizi uyarıyor. Eklentinin tek kötü yanı ise -amatör kullanıcılar için- ilk kurduğunuzda aktifleştirmenizin biraz zahmetli olması.

Eklentiyi aktifleştirme:

Preferences > Package Settings > SublimeLinter > Settings - User yolunu izleyip kullanıcı ayarlarının tutulduğu dosyaya ulaşıyoruz. Dosyada { } süslü parantezler içerisine -süslü parantezler yoksa siz kendiniz oluşturun- "debug": true kodunu ekliyoruz ve kaydedip çıkıyoruz. Ardından paket yöneticisinden (nasıl yapılacağını yukarıda anlattım) tam olarak SublimeLinter-programlama dilinin uzantısı>lint şeklinde bir arama sorgusuyla gerekli eklentiyi yüklüyoruz. Son cümlemdeki arama sorgusundan pek bir şey anlamadığınıza eminim. Hemen örneklendiriyorum. Php için SublimeLinter-phplint, Javascript için SublimeLinter-jslint, Python için SublimeLinter-pylint. Bu şekilde SublimeLinter- kelimesinin yanına istediğimiz programlama dilinin uzantısını yazıp yanına lint ekledikten sonra çıkan ilk eklentiyi veya ikinci eklentiyi yüklüyoruz. Artık hatalar ayıklanmak için hazır!

Sublime Code Intel
Geldik Sublime Text'e kurulması gereken en gerekli eklentilerden birine. Sublime Code Intel eklentisinin zekası tartışma konusu bile olamaz. Ne mi yapıyor bu eklenti ? Çalıştığınız bir yazılım dilinin tüm alt sınıflarını otomatik tamamlama olarak sunabiliyor. Bir örnekle bu dediğimi daha iyi anlayalım. Eklenti yokken bir html dosyasının gövde alanında (body alanında ) <h yazıp elinizi bırakırsanız * bir şey olmayacaktır. Eklentiyi yüklediğimiz de html dosyamızda <h yazıp elimizi bıraktığımızda h ile başlayan taglar, fare imlecimizin orasında bize alt alta bir seçenek olarak sunulur. h yazıp üçüncü sıraya gelip enterleyip <header></header> taglarını getirebilirsiniz. ( sunulan seçenekler: html, head, header, h1, h2, h3, h4, h5, h6, hr ) Eklenti, yaygın kullanılan 10'dan fazla dili destekliyor. Detaylı bilgi için eklentinin web sitesini ziyaret edebilirsiniz.

Alignment
Bu eklenti de kodlarınızı basit bir klavye tuş kombinasyonuyla hizalamanıza yarar. Ctrl+A klavye tuş kombinasyonuyla seçtiğiniz kodları Ctrl+Alt+A ile hizalayabilirsiniz.

Bracket Highlighter
Sublime Text'te bir sayfa içerisinde yüzlerce satır kodlar yazanların, iç içe açılmış süslü parantezleri karıştıranların hayat kurtarıcısıyla tanıştırayım sizi. Bracket Highlighter, kendinden söz ettirmeyi başarabilen bir eklenti. Bu eklenti sayesinde açtığınız süslü parantezlerin nerede başlayıp nerede bittiğini görebilir, açtığınız etiketlerin dört bir kenarını çizerek daha rahat okunabilir olmasını sağlayabilirsiniz.

Eklentiyi aktifleştirme:

Preferences > Package Settings > Bracket Highlighter > Bracket Settings yolunu izleyip kullanıcı ayarlarının tutulduğu dosyaya ulaşıyoruz. Dosyada { } süslü parantezler içerisine -süslü parantezler yoksa siz kendiniz oluşturun- "debug_enable": true kodunu ekliyoruz ve kaydedip çıkıyoruz.

Color Highlighter
Html ve CSS'de renkler hayatınızı en fazla ne kadar kolaylaştırabilir? Bu eklentiyi deneyip "Sublime Text'te rahat ve hızlı Html - CSS kodları yazmak" cümlesinin ne anlama geldiğini tam anlamıyla görebilirsiniz. Yazılım geliştiricisi olmakla beraber profesyonel front-end geliştiricisi değilsek; CSS'de hex kodlarıyla atadığımız bir renk değerinin, o rengin görsel görünümünü unutunca tekrar hex kodlarına bakarak hangi renk ve olduğunu çıkartamayız. Özellikle de bu hex kodu #6f1f1f gibi karışık bir kodsa. İşte bu noktada Color Highlighter imdadımıza yetişiyor ve hex kodunun altını hex kodunun renk değerindeki renkle çiziyor. Sadece bunla da yetinmiyor istediğimiz zaman bir kısayolla renk değiştirme paletini çağırma imkanı sunuyor.

Eklentiyi aktifleştirme:

Preferences > Package Settings > Color Highlighter > Settings - User yolunu izleyip kullanıcı ayarlarının tutulduğu dosyaya ulaşıyoruz. Dosyada { } süslü parantezler içerisine -süslü parantezler yoksa siz kendiniz oluşturun- "debug": true kodunu ekliyoruz ve kaydedip çıkıyoruz.

Local History
Bu da basit fakat zamanı geldiğinde hayatınızı kurtaracak bir eklenti. Özellikle de benim gibi unutkanlar için. Çoğumuz illa ki belirli sıklıklarla yazdığımız kodları, dosyaları yedekliyoruzdur. Fakat bunu birde programın otomatik olarak yapmasını isterseniz bu eklenti tam size göre. "Ne olur n'olmaz bir de o yedeklesin ne zararı olur ki" diyenleri duyar gibiyim.

Snippetler

Sublime Text 3'de bir dosyada html yazıp tab ya da entere basınca html'in temel etiketleri ( <!DOCTYPE html> <html><head> <title></title> </head> </body> </html> ) otomatik olarak sayfamıza ekleniyor. Fakat bildiğiniz üzere Html ile bir web sitesi sayfası oluşturuyorken belirtmemiz gereken (değişebilir) temel birkaç şey var. En çok kullanılardan birkaçını örnekliyim. <html lang="tr-TR"> ve <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> gibi. Neden biz html5 yada istediğiniz bir kelime yazıp enterleyince bize temel html tag'larının istediğimiz şekilde detaylandırılmış halini vermesin ? Büyük bir kolaylık olmaz mı ? Ben olur diye düşünüyorum. O zaman haydi yapalım. Tools menüsü aracılığıyla Developer seçeneğine ulaşalım. Oradan da New Snippet'e tıklayalım. Bizi bu kodlarla dolu bir sayfa karşılayacak. [tt]<snippet><content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content> </snippet>
[/tt]
(Burada kodları sıkıştırdım, sizin açtığınız sayfada düzenli bir şekilde olacak)

Yazılımda amatör arkadaşlar en baştan korkmasın. Yapacağımız çok basit. [tt]Hello, ${1:this} is a ${2:snippet}.[/tt] yazan yeri silip oraya detaylandırdığımız html başlangıç taglarını yapıştıracağız. Sonra </scope> yazısının hemen altına bir satır inip </tabTrigger>html5</tabTrigger> yazacağız. html5 yerine istediğiniz kelimeyi yazabilirsiniz. Onu yazıp enterleyince sonucu göreceksiniz ama bu sayfada değil, önce işlemimizi bitirelim. Ctrl+S klavye tuş kombinasyonuyla dosyayı kaydetme sekmesine ulaşıyoruz. Açılan sekmede dosyamızın adı untitled.sublime-snippet şeklinde gelecek. Untitled kelimesini silip istediğiniz bir kelimeyi (snippetle ilgili olursa ileride snippet dosyalarını kurcaladığınızda size kolaylık olur) giriyorsunuz ve kaydediyorsunuz. Sonrada html uzantılı bir dosya da ya da herhangi bir dosya da html yazıp tab ya da entere basıyorsunuz. Eğer snippet çalışmazsa Sublime Text'i kapatıp açmayı deneyin.

Sublime Text'te bazı özellikleri etkinleştirme

Sublime Text'te bir çok özellik default olarak true ya da false ( oradaki anlamıyla: etkin ya da pasif ) değerinde. Ben kullandığım ve etkinleştirmemizin, kod yazmamızı ve kon****u arttırabileceği özellikleri topladım. Nasıl aktifleştirebileceğimizi de anlatacağım. Özelliklere gelelim. Kodları ve açıklamaları aşağıda:

{     
        // Klasör isimlerinin kalın olmasını sağlar.
	"bold_folder_labels": true,

        // Sayfayı kaydettiğinizde sayfanızın en altına boş bir satır ekler.
	"ensure_newline_at_eof_on_save": true,

        // Tercih edilen karakter boyutu ( değiştirebilirsiniz )
	"font_size": 10,

        // Fare imlecinin bulunduğu satırı highlight yapar.
	"highlight_line": true,

        // Sayfada belirli bir süre işlem yapmadığınızda sayfa kaydedilir.
	"save_on_focus_lost": true,

        // Tab tuşunun her zaman boşluk bırakmasını sağlar.
	"translate_tabs_to_spaces": true
}

Bu kodları kopyalayıp preferences/settings dosyası aracılığıyla user-settings sayfasına yapıştırın. Eğer sayfada hali hazırda { } süslü parantezler bulunuyorsa yukarıdaki kodlardaki süslü parantezleri silin ve hali hazırdaki parantezlerin içerisine yapıştırın. Bir diğer ihtimal user-settings sayfanızda { } süslü parantezlerinizin içinde kod ya da kodlar var ise yukarıdaki kodların süslü parantezleri olmayacak şekilde kopyalayın ve süslü parantezleriniz içerisindeki kodların son satırının bir altına geçin, yapıştırın. Ve yapıştırdığınız kodlarınızın başlangıcını unutmayın. Yapıştırdığınız kodlarınızın başlangıcından önceki en son kod satırının true ya da false değerinin yanına bir virgül koyun.

Yukarıdaki eklentiler ve özellikler Sublime Text 3 için geçerlidir. Sublime Text 2 versiyonunu kullanmadığım için çalışıp çalışmayacağını bilmiyorum. Ve yukarıdaki eklentileri, Sublime Text 3 3176 (an itibariyle yayınlanmış ücretsiz ve en kararlı sürümü) sürümünde denedim. Eğer başka bir sürümü kullanıyorsanız eklentilerde sorun çıkma ihtimali daha fazla bulunmaktadır..

Sublime Text'i etkin kullanma hakkında hazırladığım yazımın sonuna geldik. Çalıştıramadığınız bir özellik, eklenti ya da Sublime Text ile herhangi bir sorununuz olursa konu altına yazabilirsiniz. Forumu güncel olarak takip etmekteyim. Ben ve yardımcı olmak isteyen bir çok kişi çıkacaktır.

Makale alıntı değildir. Emek hırsızlarının uzak durması dileğiyle.

<>Bol kodlu saatler...</>

< Bu mesaj bu kişi tarafından değiştirildi Empat -- 21 Ağustos 2018; 22:3:30 >

tek_Türk

Yüzbaşı

767 Mesaj

Tüm Başarılarını Gör

matrak002

Yüzbaşı

359 Mesaj

Tüm Başarılarını Gör

Empat

Çavuş

58 Mesaj

Tüm Başarılarını Gör

Benzer içerikler