Sublime Text Snippet Kullanımı

[Ectoor]

ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!

Snippet yazılan bir ifadeye aktarılacak olan uzun metni çağıra bildiğimiz dosyalardır. Bu dosyalar hakkında incelemeyi ve kod yazarken fazlasıyla işinize yaracağını düşündüğüm bir kaç 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

Kod yazarken bolca kullanabileceğiniz snippetları sizlere örnek olarak 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 kullanılan bu kod parçası sayesinde ilk alana yüzde cinsinden ifadeyi ve ikinci alana da çıkartılacak pixel cinsinden ifadeyi girilmesi gerekiyor.

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. 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 */

]]></content>
    <tabTrigger>resetcss</tabTrigger>
</snippet>

Meyer Reset CSS komutunu da böyle ekleyip rahatlıkla çağırabiliriz.

​