Sublime Text ile Detaylı Snippet Kullanımı

Sublime Text ile Snippet kullanımı oldukça basit ve işinize hız katacak mükemmel bir detaydır. Yazılan bir ifadeye aktarılacak olan uzun metni çağırabildiğimiz ve snippet olarak bilinen bu dosyalar hakkında incelemeyi ve kod yazarken fazlasıyla kullandığım bir iki snippet'ı sizlere aktaracağım.

Snippet Nedir?

Atanan bir kelimeye bağlı olarak ekstra bir kod parçası çağırmamıza olanak tanıyan yapılardır. Sublime Text'te bu dosyaların uzantısı .sublime-snippet olarak bilinir.

Snippet Oluşturmak

Bir snippet oluşturmak için Tools > Developer > New Snippet... yolunu izlemelisiniz. Karşınıza açılan dosya şu tarz kodlardan oluşacaktır;

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Açılan sayfadaki yapıyı aşağıda açıkladım.

Snippet Yapısı

Üstteki kod yapısında farkedildiği üzere 3 ana bölümden oluşuyor snippet yapımız: Content, tabTrigger ve Scope

content

Kod alanımız burasıdır. Yani bu snippet aktif hale geldiğinde bu kod parçası çalıştırılacaktır. Bir takım komutlar içerebilir. Örneğin yukarıdaki kodu ele aldığımızda ${1:this} ifadesi imlecimizin ilk alanı olacak ve this metni yazılı halde bekleyecektir. Akabinde tab tuşuna basarak ${2:snippet} aktif hale gelecek ve snippet ifadesi seçili hale gelecektir.

tabTrigger

Bu kod parçamızı temsil eden bir ifade belirtiyoruz. Bu ifadeyi girdikten sonra tab butonumuza basarak content alanındaki kodumuzu çağırmış olacağız.

scope

Bu alanda ise girilen kod parçacığının hangi tür dosyalarda geçerli olacağını belirliyoruz. Bunun için source.css veya source.html gibi ifadeler kullanabiliriz. Eğer scope alanını kaldırırsak her dosya türünde çalışabilir anlamındadır.

Snippet Kaydetmek

Oluşturulan bir snippet dosyasını ilk baştada belirttiğim üzere kaydederken uzantısının .sublime-snippet olmasına dikkat etmelisiniz. Bu dosya açıkken kaydetmeye çalıştığınızda ana dizine kendisi yönlendiriyor. Yine de Packages içerisindeki User klasörüne kayıt yaptığını belirtelim.

Snippet Örnekleri ve Kullandıklarım

Kod yazarken bolca kullandığım snippetları sizlere örnek olarak buraya bırakıyorum.

brad (border-radius)

<snippet>
	<content><![CDATA[
-webkit-border-radius: ${1:4}px; -moz-border-radius: ${1:4}px; border-radius: ${1:4}px;
]]></content>
	<tabTrigger>brad</tabTrigger>
</snippet>

Bu snippet sayesinde klavyede brad yazıp tab tuşuna bastıktan sonra border-radius için belirlenmiş tarayıcı uyumlarıyla birlikte bu kod parçası ekranda gözüküyor ve akabinde girilen sayı ve tab tuşu ile 3 alanda dolmuş oluyor.

calc (calc(100% - 30px))

<snippet>
	<content><![CDATA[
calc(${1:yüzde}% - ${2:pixel}px)
]]></content>
	<tabTrigger>calc2</tabTrigger>
</snippet>

calc ifadesi ile girilen bir yüzdelik alandan px cinsinde değer çıkartmak için kullanılan ifadenin snippet hali diyebilirim. Çokça kullandığım bu kod parçası sayesinde ilk alana yüzde cinsinden ifademi ve ikinci alana da çıkartılacak pixel cinsinden ifadeyi giriyorum.

bshadow (box-shadow)

<snippet>
	<content><![CDATA[
-webkit-box-shadow: ${1:YATAY}px ${2:DİKEY}px ${3:BLUR}px ${4:YAYILMA}px ${5:RENK};
-moz-box-shadow: ${1:YATAY}px ${2:DİKEY}px ${3:BLUR}px ${4:YAYILMA}px ${5:RENK};
box-shadow: ${1:YATAY}px ${2:DİKEY}px ${3:BLUR}px ${4:YAYILMA}px ${5:RENK};
]]></content>
	<tabTrigger>bshadow</tabTrigger>
</snippet>

box-shadow komutu ile bir dive gölgelendirme efektini kolaylıkla verebiliyoruz. Bende bunu yapabilmenin en kısa yolunu bu snippet ile başarabileceğimizi düşündüm. Yine farklı tarayıcılar için ayarlanmış kod yapısı ile birliktedir.

tshadow (text-shadow)

<snippet>
	<content><![CDATA[
text-shadow: ${1:MESAFE}px ${1:MESAFE}px ${2:BLUR}px ${3:RENK};
]]></content>
	<tabTrigger>tshadow</tabTrigger>
</snippet>

text-shadow komutu ile aynı görevi görüyor. Alanlar ile sizi uğraştırmadan doğrudan kullanabilirsiniz.

Reset CSS (Meyer)

<snippet>
	<content><![CDATA[
/* Reset CSS */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ## Reset CSS */
${1}
]]></content>
	<tabTrigger>resetcss</tabTrigger>
</snippet>

Meyer Reset CSS komutunu da böyle ekledik ve artık rahatlıkla çağırabiliriz.