Visual Studio Code Kısayolları ve İpuçları

07/05/2019

VSCode, Sublime Text, Atom, Brackets gibi editörlerin kod yazarken işlerimizi kolaylaştırdığına şüphe yok. Fakat bu araçları daha etkin kullandığınızda verimliliğinizi daha üst noktalara taşıyabilirsiniz. Bu yazımda Visual Studio Code’da çalışmanızı yaparken bu deneyiminizi daha keyifli hale getirecek bazı kısayollar ve ipuçlarından bahsedeceğim.

Kısayollar

1. Command Palette

Visual Studio Code’daki tüm komutların bulunduğu pencere. Böylelikle kısayolları bilmeseniz bile her işinizi halledebilirsiniz. Bu yüzden tüm kısayolların adını İngilizce yazdım. Ctrl + Shift + P kısayolu ile kullanabilirsiniz.

Command Palette

2. Format Document

Ctrl + Shift + I kısayolu ile kullanabileceğiniz bu özellik kodunuzun girintilerini düzenleyerek estetik açıdan güzel görünmesini sağlıyor.

Format Document

3. Quick Open

Proje dosyalarınız arttıkça dosyalar arasında geçiş yapmak eziyet olabiliyor. Bu özellik sayesinde farenize dokunmadan dosyalar arasında geçiş yapabilirsiniz. Tek yapmanız gereken Ctrl + P yapıp dosya adını yazmak.

Quick Open

4. Zen Mode

Yalnızca editörünüzün göründüğü, dikkat çekici diğer ögelerin ekranda gösterilmediği mod. Ctrl+K yapıp sonra Z’ye basmanız gerekiyor. Esc ile de eski haline dönüyor.

Zen Mode

5. Multi-cursor Selection

Benim en sevdiğim özelliklerden biri. Aynı anda birden fazla satırı düzenlemenizi sağlıyor. Ctrl+Shift’e basılı tutup yukarı/aşağı yön tuşlarını kullanarak yapabilirsiniz.

Multi-Cursor

6. Column (box) selection

Bu da multi-cursor selection’a benzer bir özellik. Kolon seçimi olarak söylenebilir. Normalde yalnızca satır seçerken bu özellik sayesinde sütunları da seçebiliyoruz. Bunun içinde Alt+Shift’e basılı tutup seçim işlemini yapmanız gerekiyor.

Column Selection

7. Move line up and down

Herhangi bir satırı veya seçimi mouse kullanmadan kod içinde hareket ettirmenizi sağlayan kısayol. Yalnızca bir yer seçin ve Alt’a basılı tutup yukarı/aşağı yön tuşlarını kullanın.

Column Selection

Anlatacağım kısayollar bu kadar. Tabii ki çok daha fazla kısayol var ve hepsini anlatmam mümkün değil. En çok kullandığım ve sevdiklerim bunlardı. Tüm bu bilgileri Visual Studio Code’un kendi sitesinden aldım. Daha fazlası için VSCode’un shortcuts cheatsheet’ini öneririm.

İpuçları

Snippet Oluşturma

VSCode’un kendi bünyesinde epey snippet var fakat bu hiçbir yazılımcı için yeterli değildir. Eğer tekrar tekrar yazdığınız kod parçaları varsa snippet oluşturmanızı tavsiye ederim. Bunun için öncelikle Ctrl+Shift+P yapın ve Configure User Snippets’e basın. Karşınıza çıkan listeden New Global Snippets File’ı seçin. Karşınıza dosya yöneticisi çıkacak. Herhangi bir isim verin ve kaydedin. Eğer her şeyi doğru yaptıysanız karşınıza aşağıdaki gibi bir ekran gelecek.

New Snippet

Zaten eğer dikkat ettiyseniz nasıl snippet oluşturacağınızı anlatmışlar ve örnek bir taslak koymuşlar. Doğrudan o taslağı kopyalayın süslü parantezlerin içine yapıştırın. Print to console yazan kısım snippetinizin adı. Scope değişkeninde hangi tip dosyalarda çalışmasını istediğinizi seçiyorsunuz. Prefix değişkeninde, snippetinizin size editör tarafından önerilmesi için yazmanız gereken string’i belirliyorsunuz. Mesela örnek üzerinden konuşmak gerekirse log yazdığınızda ilgili snippeti önerecek size. Body kısmı snippetinizin içeriği. Bu içerikte $1 $2 $3… şeklinde yazdığınız kısım olası değişken isimlerinin bulunacağı kısım. Yani snippet oluşturulduktan sonra Tab tuşu ile gezeceğiniz noktalar. $0 ise snippeti kullandıktan sonra cursor’ün geleceği nihai nokta. Description değişkeninde ise snippetiniz için bir tanım ekleyebiliyorsunuz. Ben for döngüsü için bir örnek yapıyorum:

"For loop": {
  "scope": "javascript",
  "prefix": "forl",
  "body": [
  "for(var i = 0; i < $1; i++) { $0 }",
  ],
  "description": "Creates a for loop."
}

Bunu yazıp kaydettikten sonra snippetiniz hazır.

Snippet

Emmet Eklentisi

Bu eklenti VSCode’un içinde yüklü olarak gelen bir eklenti. İçinde bulunan hazır snippetleri sayesinde birçok işinizi hızlıca halledebilirsiniz. Aslında bu yeni bir yazı yazacak kadar büyük bir konu fakat ben iki örnek verip sizi gerekli linke yönlendireceğim.

Emmet

Bu yazı ilk olarak https://medium.com/@kamer.dev/visual-studio-code-k%C4%B1sayollar%C4%B1-ve-i%CC%87pu%C3%A7lar%C4%B1-da74c2076bdb adresinde yayınlanmıştır.