VS Code Snippet Kullanımı

YouTube'ta Takip Et →

Snippet, vaktimizi daha verimli kullanabilmek için kullanılan kısa kodlardır. Bu yöntemle WordPress’deki sorgularınızı, kod gruplarını, sürekli kullandığınız ve kolayca karşınıza çıkmasını istediğiniz kodları snippet olarak atayarak, onlara daha çabuk ulaşabilir ya da önceden atanmış olan kodları öğrenerek işlerinizi hızlandırabilirsiniz.

VS Code’da Snippet Nasıl Oluşturulur?

Örneğin; bir proje sırasında aynı uzun kodları sürekli olarak kullandığımızı düşünelim. Her seferinde bu kodları tekrar yazmaktansa veya bir kaynaktan kopyalamaktansa bu kod grubu için bir isim belirlersiniz ve kod sırasında sadece o ismi yazarak, kodun tamamının yazılmasını sağlarsınız. Bu bazıları için işleri kolaylaştıran bir yöntem. İster kod yazıyor olun, ister kod dışında normal hayatınızda da kullanıyor olun, sürekli tekrarlayan işleriniz varsa VS Code‘a snippet eklemek size fayda sağlayacaktır.

Yukarıdaki gibi hazır kodların yanı sıra kendi isteğinize göre snippet dediğimiz kısa kodlar da oluşturabiliyorsunuz. File > Preferences > User Snippets seçeneğini seçelim. Net Global Snippets File bilgisayarımıza .code-snippets uzantılı dosyaya bir isim vererek kaydedelim.

Her snippet’ın bazı parametreleri var. Aşağıdaki örnek kod ile açıklamaya çalışayım neyin nasıl olduğunu. İlk satır snippet’ın ismidir, herhangi bir şey yazabilirsiniz.

Scope: Kodun hangi programlama dilinde çalışacağını belirleyebildiğimiz satırdır. Sadece JavaScript dosyalarında ya da hem HTML hem CSS dosyalarında çalışsın gibi bilgilendirme yapabiliyorsunuz.

Prefix ve Body: Prefix alanına yazdığınız kelimeyi yazdığınızda ve tab tuşuna bastığınızda body’deki metin görünecektir. Buradaki amaç body’deki cümleleri ya da kodları uzun uzun yazmak yerine sadece prefix’i yazarak body’ye ulaşmak.

Body alanında da dikkat edilmesi gereken şeyler var. Cursor imlecinin otomatik olarak geçeceği yeri belirleyebiliyorsunuz. $1, imlecin ilk bulunacağı yer. $2, $3 şeklinde artırabilirsiniz bunu ve $1 alanına veri girdikten sonra tab tuşuna basarak otomatik olarak sonraki $ işaretlerinin bulunduğu yere geçebiliyorsunuz.

Atom, Sublime Text veya VS Code üzerinde snippet oluşturmak için Snippet Generator adında bir hizmet de bulunuyor. Siteye girip gerekli boşlukları doldurduktan sonra oluşturulan kodu kopyalayıp yine snippet dosyasına yapıştırdığınızda çalışacaktır.