Atom'da kısayol eklemek

Atom logo

Bilenler bilir; sevdiğim metin düzenleyiciler Linux altında vim, Mac altında Atomdur (gerçi son zamanlarda Linux'ta da Atom kullanmaya başladım). Atom altında genelde javascript yazıyorum ve her seferinde document.addEventListener("deviceready", function()) {}); yazmam gerekiyor. Bir süredir bunu nasıl daha kolay yapabilirim diye düşünüyordum, ve aramalarım sonucunda buldum.

Öncelikle menüden Snippets... (Linux altında File > Snippets..., Mac altında Atom > Snippets..) alt menüsüne gidince snippets.cson açılıyor, biz burada snip yazıyoruz ve Tab tuşuna basıyoruz. Şöyle bir kod bloğu çıkıyor:

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

ve biz bu snippets.cson dosyasını kaydettiğimiz zaman Atom'da Snippet Trigger diye yeni bir kısayol ekleniyor. Bu yukarıdaki kod bloğunun anlamı şu: bir Javascript dosyasında snip yazıp Tab tuşuna bastığımızda Hello World'e tamamlanıyor. Bütün Javascript dosyaları için kısayol yapmak için '.source.js' bir kez tanımlanıyor. Bu önemli. Çünkü birden çok '.source.js' olursa sadece en sonuncusu yükleniyor. Onun için bir kez '.source.js' yazıp bütün kısayolları onun altına eklemelisiniz.

Güzel bir özellik değil mi? Gelin console.log(JSON.stringify()) için yeni bir tane tanımlayalım ve kısayolu da da str olsun.

'.source.js'
'JSON.stringify'
'prefix': 'str'
'body': 'console.log(JSON(stringify($1))'

Burada yeni bir şey gördük: $1. Peki nedir bu $1? $1 imlecin konumlanması gereken yeri belirtiyor. Yani şöyle:

atom-json.stringify.png

Şimdi yeni bir şey göreceğiz:

'logErr':
    'prefix': 'logErr'
    'body': 'console.log(${1:error})'

Bu ie şu anlama geliyor: console.log(error) yazsın ama error seçili olsun ki istersek onun yerine başka bir koyabilelim. Yani şöyle:

atom-console-error.png

Şimdi de benim istediğim asıl şeyi nasıl yapabiliriz, ona gelelim. İstediğim neydi? document.addEventListener("deviceready", function() {}) yazıp {} arasında enter yapması, yani şöyle:

deviceready

İş burada biraz çetrefilli. Çok satırlı bir body yazmak gerek. Onu da şöyle hallediyoruz:

'.source.js':
  'deviceready':
    'prefix': 'deviceready'
    'body': """
    document.addEventListener("deviceready", function() {
      $1
    })
    """

Çok satırlı bir body yazmak için """ ile başlatıyoruz, nasıl görünmesini istiyorsak öyle yazıyoruz, ve $1'i unutmuyoruz. Bu arada unutmadan söyleyeyim; sadece $1 değil, $2, $3, $4 de var ve bunların hepsi sekmeleri temsil ediyor. Yani şöyle bir şey yazarsanız her Tab tuşuna bastığınızda bir sonraki sekmeye gidecek:

'.source.module':
  'for':
    'prefix': 'for',
    'body': 'for ($${1:x}=${2:0}; $${1:x} < $3; $${1:x}++) { \n\t${0:# code...}\n}'

Şimdi burada iki tane $ var, onun anlamı da PHP'deki değişken isimlerinde karışıklık olmaması için; yani birinci $ Atom'un, ikinci $ PHP'nin. Aynı zamanda '.source.module' gördük. Bu ise .module uzantılı dosyalar için demek.

Şimdi farklı bir şey deneyelim:

'log array length':
    'prefix': 'llen'
    'body': 'console.log(\'${1:array} length\', ${1:array}.length);$2'

Bunun anlamı şu: llen yazıp Tab tuşuna bastığımda console.log('array length', array.length) yazsın, ancak iki array da seçilebilir olsun. Yani şöyle:

atom-console-log

Bunu bütün diller için uygulayabilirsiniz, ancak HTML'ninki '.source.html' değil, onunki '.text.html.basic'

Eklemek ya da düzeltmek istediğiniz bir şey mi var? Yorumlarda belirtin.

Etiketler