Sublime Text Snippet Kullanımı | Mehmet Kaplan

Reklam Alanı

Reklam Alanı

Sublime Text Snippet Kullanımı

Sublime Text Snippet Kullanımı

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.

Reklam Alanı

  • Paylaş
  • 0

Benzer İçerikler

gravatar

mehmetkpln18

Architect, Graphic Designer and Website Developer

Mehmet Kaplan, yeni mezun bir mimar, web ve grafik tasarımcısı, araştırmacı. Tasarım, programlama ve kodlama konusunda tutkusu olan biri.

Yorumlar Yorum Yok

Bilgi :Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

Reklam Alanı

Reklam Alanı