Visual Studio Code İleri Seviye Kullanım

Snippet oluşturma, uzaktan geliştirme, gelişmiş hata ayıklama ve uzantı geliştirme. Profesyonel seviyede VS Code kullanımı.

Bu bölümde Visual Studio Code'un en gelişmiş özelliklerini ve profesyonel geliştirme süreçlerinde nasıl kullanıldığını öğreneceksiniz.

1. Snippet Oluşturma ve Kullanma

Snippet'ler, sık kullanılan kod bloklarını hızlıca eklemenizi sağlayan şablonlardır. Bu, yazma hızınızı artırır ve tutarlılığı sağlar.

Snippet Oluşturma

Kendi snippet'lerinizi oluşturmak için File > Preferences > User Snippets yolunu izleyin. Açılan listeden dilinizi seçin (örneğin, html.json veya javascript.json). Eğer belirli bir dil için snippet oluşturmak istemiyorsanız, New Global Snippets file... seçeneğini kullanabilirsiniz.


{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  },
  "HTML Boilerplate": {
    "prefix": "html:5",
    "body": [
      "",
      "",
      "",
      "    ",
      "    ",
      "    ",
      "",
      "",
      "    $2",
      "",
      ""
    ],
    "description": "Basic HTML5 boilerplate"
  }
}
  • prefix: Snippet'i tetikleyecek kelime veya kısaltma.
  • body: Snippet'in içeriği. Her eleman yeni bir satırı temsil eder. $1, $2 gibi ifadeler, snippet eklendikten sonra imlecin sırasıyla duracağı yerleri belirtir. $0 ise son imleç konumudur.
  • description: Snippet'in kısa açıklaması.

Snippet Kullanma

Oluşturduğunuz veya var olan bir snippet'i kullanmak için, düzenleyicide prefix değerini yazmaya başlayın ve öneriler listesinden snippet'i seçin.

2. Özelleştirilmiş Kısayollar

VS Code'un varsayılan kısayollarını değiştirebilir veya kendi özel kısayollarınızı oluşturabilirsiniz. Bu, sık kullandığınız komutlara daha hızlı erişmenizi sağlar.

Kısayolları özelleştirmek için File > Preferences > Keyboard Shortcuts (veya Ctrl+K Ctrl+S) yolunu izleyin. Açılan arayüzde istediğiniz komutu arayabilir ve yeni bir kısayol atayabilirsiniz. Kısayollar keybindings.json dosyasında saklanır.


[
  {
    "key": "ctrl+alt+n",
    "command": "workbench.action.files.newUntitledFile",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+e",
    "command": "workbench.view.explorer",
    "when": "workbench.explorer.visible"
  }
]
  • key: Atamak istediğiniz kısayol.
  • command: Kısayolun tetikleyeceği VS Code komutu.
  • when: Kısayolun ne zaman aktif olacağını belirten koşul.

3. Uzaktan Geliştirme (Remote Development)

VS Code'un Remote Development eklenti paketi, kodunuzu uzak bir makinede (SSH, WSL, Container) geliştirmenize olanak tanır. Bu sayede yerel makinenizin kaynaklarını kullanmadan, sunucu ortamında veya sanal makinelerde doğrudan geliştirme yapabilirsiniz.

Remote Development eklenti paketini (Remote - SSH, Remote - WSL, Remote - Containers) yükledikten sonra, sol alt köşedeki yeşil uzaktan bağlantı simgesine tıklayarak bağlantı seçeneklerine erişebilirsiniz.

  • Remote - SSH: Uzak bir SSH sunucusuna bağlanarak orada geliştirme yapmanızı sağlar.
  • Remote - WSL: Windows Subsystem for Linux (WSL) ortamında geliştirme yapmanızı sağlar.
  • Remote - Containers: Docker konteynerleri içinde geliştirme ortamı oluşturmanızı sağlar.

4. Gelişmiş Hata Ayıklama Teknikleri

Temel hata ayıklama özelliklerinin ötesinde, VS Code daha gelişmiş hata ayıklama senaryolarını destekler:

  • Koşullu Kesme Noktaları (Conditional Breakpoints): Belirli bir koşul sağlandığında tetiklenen kesme noktaları. Örneğin, bir değişkenin değeri belirli bir sayıya ulaştığında durdur.
  • Log Noktaları (Logpoints): Kodu durdurmadan konsola mesaj yazdıran kesme noktaları. Hata ayıklama sırasında değişken değerlerini veya kod akışını izlemek için kullanışlıdır.
  • Fonksiyonel Kesme Noktaları (Function Breakpoints): Bir fonksiyon çağrıldığında tetiklenen kesme noktaları.
  • Exception Breakpoints: Belirli bir istisna (exception) fırlatıldığında yürütmeyi durdurur.
  • Çoklu Hata Ayıklayıcılar: Aynı anda birden fazla hata ayıklama oturumu başlatabilir ve yönetebilirsiniz (örneğin, frontend ve backend aynı anda).

5. Çoklu Proje Yönetimi

Daha önce bahsedilen Çalışma Alanları (Workspaces) özelliği, birden fazla projeyi tek bir VS Code penceresinde yönetmek için idealdir. Bu, özellikle mikroservis mimarilerinde veya bağımlı projelerle çalışırken iş akışınızı basitleştirir.

.code-workspace dosyası, açılan klasörlerin listesini, çalışma alanına özel ayarları ve görevleri içerebilir. Bu sayede tüm ekip üyeleri aynı geliştirme ortamı yapılandırmasını kullanabilir.

6. VS Code API ve Uzantı Geliştirme (Giriş)

VS Code'un işlevselliğini kendi ihtiyaçlarınıza göre genişletmek isterseniz, VS Code API'sini kullanarak kendi uzantılarınızı geliştirebilirsiniz. Bu, çok ileri seviye bir konudur ve JavaScript/TypeScript bilgisi gerektirir.

VS Code uzantıları, yeni komutlar ekleyebilir, UI'yi değiştirebilir, dil desteği sağlayabilir, hata ayıklayıcıları entegre edebilir ve daha fazlasını yapabilir.

Başlamak için VS Code'un resmi uzantı geliştirme dokümantasyonunu inceleyebilirsiniz: code.visualstudio.com/api

Visual Studio Code Orta Seviye Kullanım