Sublime Text Snippet Oluşturma

4 Aralık 2019 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

Sublime Text ile çalışırken; çok sık kullandığınız metin, component (bileşen) veya diğer herhangi bir durum için snippet oluşturabilirsiniz. Böylelikle; bir çok satırı yeniden yazmak durumunda kalmazsınız.

Ben en çok dosyaların başına bilgi içerikleri eklemek için snippet’lar oluşturuyorum. Örneğin:

/**
 * -----------------------------------------------------------------------------
 * File Name  : database.php
 * Author     : Emre Can ÖZTAŞ <me@emrecanoztas.com>
 * Website    : https://emrecanoztas.com 
 * Descrition : Database Class
 * -----------------------------------------------------------------------------
 */

yukarıdaki gibi bir snippet oluşturdum. Bu snippet’i yeni oluşturduğum dosyaların başına çok kolay ekliyorum. Siz de bu veya buna benzer snippet’ler oluşturabilirsiniz.

Snippet Oluşturma

Sublime Text 3 ortamında snippet oluşturmak için:

Tools > Developer > New Snippet…

yolunu takip etmelisiniz. Bu yolu takip ettiğinizde aşağıdaki gibi bir sayfa açılacaktı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>

Snippet’ler, <snippet></snippet> etiketleri ile tanımlanır.

Bir snippet’i oluşturan alanları tanıyalım.

<content>

<content><![CDATA[…]]></content> alanı, snippet içeriğidir. Yani alan içeriklerimizin olacağı alandır. Örneğin; kendimizi tanıtıcı bir içerik oluşturmak isteyelim.

<content><![CDATA[
Ad Soyad  : Emre Can ÖZTAŞ
Pozisyon  : Freelance Full Stack Developer
Şehir     : ANKARA
Site      : https://emrecanoztas.com
E - Posta : me@emrecanoztas.com
]]></content>

şeklinde bir içerik oluşturabiliriz. Şayet daha farklı, örneğin bir fonksiyon veya sınıf oluşturmak isteyebilirsiniz. Bu fonksiyon ve sınıfa ait olan çeşitli alanları <tab> ile gezip doldurmak isteyebilirsiniz. Bunun için de; pek tabi ki bu alanları gösterebilirsiniz.

Örneğin; bir fonksiyon oluşturalım.

<content><![CDATA[
function ${1:function_name}()
{
    echo('${2:your_name}');
}
]]></content>

şeklinde basit bir fonksiyon oluşturabiliriz. Bu snippet’i çağırdığınızda; function_name ve your_name alanlarını <tab> ile gezerek doldurabilirsiniz. Dinamik alanları;

${number:content}

şeklinde belirleyebilirsiniz. number alanına, tab sıralaması (sayı olarak), content alanına ise varsayılan metni veya ekranda görünmesini istediğiniz içeriği yazabilirsiniz.

<tabTrigger>

<tabTrigger> etiketi, bu snippet’in hangi isimle çağrılacağını belirtir. Örneğin; hello, hesapla, aciklama vs. gibi bir isim verebilirsiniz. Verdiğiniz bu isimle de snippet’inizi çağırabilirsiniz.

<tabTrigger>hello</tabTrigger>

şeklinde bir isim verebilirsiniz. Ya da birden fazla isimle de çağırabilirsiniz.

<tabTrigger>hello, aciklama</tabTrigger>
<scope>

<scope> etiketi, hazırladığınız snippet’inizin hangi tür dosyalarda çağrılabileceğini belirttiğiniz alandır. Örneğin; sadece PHP veya sadece Python, Java vs. gibi dosyalarda çalışmasını istediğiniz snippet’leriniz olabilir. O zaman etiket alanında bunları belirtebilirsiniz. Bu alanı boş bırakırsanız veya hiç kullanmazsanız; snippet’leriniz her dosya türünde kullanılabilir.

<scope>source.python</scope>

veya

<scope>source.python, source.php</scope>

şeklinde yazabilirsiniz ya da boş bırakabilirsiniz, hiç kullanmaya da bilirsiniz.

<scope></scope> alanını aşağıdaki listeden seçmelisiniz.

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
Javascript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml
<description>

Ek olarak; <description> etiketi ile snippet’iniz için bir açıklama yazabilirsiniz.

<description>Bu bir snippet'tir</description>
Ortam Değişkenleri

Sublime Text’in sağladığı ortam değişkenlerini kullanarak, çeşitli varyasyonlar sağlayabilirsiniz. Bu ortam değişkenleri ve açıklamaları aşağıdaki gibidir.

$SELECTION: Snippet tetiklendiğinde seçilen metin.

$TM_CURRENT_LINE: Snippet tetiklendiğinde imlecin bulunduğu satırın içeriği

$TM_CURRENT_WORD: Snippet tetiklendiğinde imlecin altındaki sözcük.

$TM_DIRECTORY: Düzenlenmekte olan dosyanın dizin adı.

$TM_FILENAME: Uzantı dahil olmak üzere, düzenlenmekte olan dosyanın adı.

$TM_FILEPATH: Düzenlenmekte olan dosyanın yolu.

$TM_FULLNAME: Kullanıcı adı

$TM_LINE_INDEX: Snippet’in eklendiği sütun, 0 tabanlı.

$TM_LINE_NUMBER: Snippet’in eklendiği satır, 1 tabanlı.

$TM_SELECTED_TEXT: $SECTION için bir diğer ad.

$TM_SCOPE:  Seçilen her bölgenin başlangıcının kapsamı.

$TM_SOFT_TABS: SOFT TAB kullanılıyorsa; YES, kullanılmıyorsa; NO.

$TM_TAB_SIZE: TAB uzunluk değeri.

Ortam değişkenlerini, <content> içerisinde kullanabilirsiniz.

Sayfanın başında verdiğim örneğe geri dönecek olursak; ben aşağıdaki şekilde bir kullanım sağlıyorum.

<snippet>
    <content><![CDATA[
/**
 * -----------------------------------------------------------------------------
 * File Name  : $TM_FILENAME
 * Author     : Emre Can ÖZTAŞ <me@emrecanoztas.com>
 * Website    : https://emrecanoztas.com 
 * Descrition : ${1:Text}
 * -----------------------------------------------------------------------------
 */
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>desc</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <description>Açıklama Bloğu</description>
</snippet>

$TM_FILENAME ile dosyanın otomatik olarak adı yazılacak ve ${1:text} kısmında da bir açıklama tanımlaması yaparım. Bu şekilde açmış olduğum sayfaların başına kolaylıkla bir açıklama bloğu eklerim.

Snippet Kaydetme

Hazırlamış olduğumuz snippet, User dosyasına kaydedilir. User dosyasına da en kolay aşağıdaki adımlarla ulaşabilirsiniz.

Preferences > Browse Package > User

İşte buradaki User dosyasına, oluşturduğumuz snippet’i kaydedelim. Normal şartlar altında örnek bir snippet dosya ismi aşağıdaki gibidir.

snippet-name.sublime-snippet

snippet-name, snippet dosyamıza vereceğimiz isimdir.

Snippet Kullanma

Snippet’imizi oluşturduk. Örneğin benim snippet’ım aşağıdaki gibidir.

<snippet>
    <content><![CDATA[
/**
 * -----------------------------------------------------------------------------
 * File Name  : $TM_FILENAME
 * Author     : Emre Can ÖZTAŞ <me@emrecanoztas.com>
 * Website    : https://emrecanoztas.com 
 * Descrition : ${1:Text}
 * -----------------------------------------------------------------------------
 */
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>desc</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <description>Açıklama Bloğu</description>
</snippet>

Bu snippet’ımı info.sublime-snippet ismiyle, User dosyasına kaydettim.  Hazırladığım bu snippet’a herhangi bir <scope> etiketi belirtmediğim için herhangi türde bir dosyada kullanabilirim. <tabTrigger> olarakta desc belirledim. Yani desc yazıp <tab>’ladığımda yukarıdaki snippet’ım gelecek.

Yukarıdaki ekran alıntısında da görüldüğü gibi desc yazdığımda hemen hazırladığım snippet belirdi. Snippet’ı seçtim.

Görüldüğü gibi snippet’ım eklenmiş oldu.

Bu ve buna benzer bir çok snippet hazırlayabilirsiniz. Hatta bir programa dili için de kendi snippet’lerinizi hazırlama şansınız var.

Kategoriler: [Sublime Text] Etiketler: #sublime-snippet #sublime-text

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.