Visual Studio Code Kurulum Ve Kullanım

Visual Studio Code Nedir?

Visual Studio Code (VS Code), Microsoft tarafından geliştirilen ücretsiz, açık kaynaklı ve hafif bir kod editörüdür. Web geliştirme, Python, JavaScript, TypeScript ve birçok programlama dili için idealdir. Electron framework'ü üzerine inşa edilmiştir ve Windows, macOS ve Linux platformlarında çalışır.

Kurulum Adımları

Windows İçin Kurulum

1. code.visualstudio.com adresine gidin
2. "Download for Windows" butonuna tıklayın
3. İndirilen VSCodeSetup.exe dosyasını çalıştırın
4. Kurulum sırasında önerilen seçenekleri işaretleyin:
   • ☑ Add "Open with Code" action to Windows Explorer file context menu
   • ☑ Add "Open with Code" action to Windows Explorer directory context menu
   • ☑ Register Code as an editor for supported file types
   • ☑ Add to PATH (önemli!)
5. Kurulumu tamamlayın ve VS Code'u başlatın

İlk Ayarlar ve Özelleştirme

Tema Seçimi

1. Ctrl + K, Ctrl + T kısayolunu kullanın
2. Beğendiğiniz temayı seçin (Dark+, Light+, Monokai, vb.)
3. Daha fazla tema için Extensions'dan tema paketleri yükleyebilirsiniz

Font Ayarları

1. File → Preferences → Settings (veya Ctrl + ,)
2. "Font" arayın
3. Font Family: 'Fira Code', 'Consolas', 'Courier New', monospace
4. Font Size: 14-16 arası önerilir
5. Font Ligatures: true (Fira Code için)

Temel Kullanım

Klasör Açma

1. File → Open Folder (veya Ctrl + K, Ctrl + O)
2. Çalışmak istediğiniz proje klasörünü seçin
3. Sol taraftaki Explorer panelinde tüm dosyalar görünecektir

Yeni Dosya Oluşturma

• Explorer panelinde "New File" ikonuna tıklayın
• Veya Ctrl + N ile yeni dosya oluşturun
• Dosyayı kaydetmek için Ctrl + S

Önerilen Eklentiler (Extensions)

Genel Eklentiler

• Prettier - Code formatter: Kod formatlama

  ext install esbenp.prettier-vscode

• ESLint: JavaScript/TypeScript kod kalitesi

  ext install dbaeumer.vscode-eslint

• Live Server: Canlı HTML önizleme

  ext install ritwickdey.LiveServer

• GitLens: Gelişmiş Git özellikleri

  ext install eamodio.gitlens

• Path Intellisense: Dosya yolu otomatik tamamlama

  ext install christian-kohler.path-intellisense

Web Geliştirme İçin

• Auto Rename Tag: HTML/XML tag otomatik yeniden adlandırma
• CSS Peek: CSS tanımlarını hızlıca görüntüleme
• HTML CSS Support: HTML'de CSS IntelliSense
• JavaScript (ES6) code snippets: JS kod parçacıkları

Python Geliştirme İçin

• Python: Microsoft'un resmi Python eklentisi
• Pylance: Hızlı Python dil sunucusu
• Python Indent: Otomatik girinti düzeltme

C# / .NET İçin

• C#: Microsoft'un resmi C# eklentisi
• C# Dev Kit: Gelişmiş C# özellikleri
• NuGet Package Manager: NuGet paket yönetimi

Yararlı Klavye Kısayolları

Genel Kısayollar

• Ctrl + P - Hızlı dosya açma
• Ctrl + Shift + P - Komut paleti
• Ctrl + ` - Terminal aç/kapat
• Ctrl + B - Sidebar aç/kapat
• Ctrl + / - Satırı yorum yap
• Alt + ↑/↓ - Satırı yukarı/aşağı taşı
• Shift + Alt + ↑/↓ - Satırı kopyala
• Ctrl + D - Aynı kelimeyi seç (çoklu seçim)
• Ctrl + Shift + L - Aynı kelimenin tüm örneklerini seç

Kod Düzenleme

• Ctrl + Space - IntelliSense tetikle
• Shift + Alt + F - Kodu formatla
• Ctrl + K, Ctrl + C - Satırları yorum yap
• Ctrl + K, Ctrl + U - Yorumu kaldır
• F2 - Yeniden adlandır (Rename)
• F12 - Tanıma git
• Alt + F12 - Tanımı önizle

Arama ve Değiştirme

• Ctrl + F - Dosyada ara
• Ctrl + H - Bul ve değiştir
• Ctrl + Shift + F - Tüm dosyalarda ara
• Ctrl + Shift + H - Tüm dosyalarda bul ve değiştir

Entegre Terminal Kullanımı

Terminal Açma

• Ctrl + ` veya View → Terminal
• Varsayılan olarak PowerShell açılır (Windows'ta)
• Terminal tipini değiştirebilirsiniz (CMD, Git Bash, WSL)

Çoklu Terminal

• Terminal panelinde "+" ikonuna tıklayarak yeni terminal açın
• Terminaller arasında geçiş yapabilirsiniz
• Split terminal özelliği ile yan yana terminaller açabilirsiniz

Git Entegrasyonu

Git Kullanımı

1. Sol taraftaki Source Control ikonuna tıklayın (veya Ctrl + Shift + G)
2. Değişiklikleri görüntüleyin
3. Commit mesajı yazın ve "Commit" butonuna tıklayın
4. Push/Pull işlemlerini yapın

GitLens ile Gelişmiş Özellikler

• Satır bazında commit geçmişi görüntüleme
• Dosya geçmişini görüntüleme
• Blame annotations (kim ne zaman değiştirmiş)

Debugging (Hata Ayıklama)

Basit Debugging

1. Kod satırının soluna tıklayarak breakpoint ekleyin (kırmızı nokta)
2. F5 tuşuna basarak debugging başlatın
3. Değişkenleri Variables panelinde izleyin
4. F10 ile step over, F11 ile step into yapın

Workspace ve Settings

User Settings vs Workspace Settings

• User Settings: Tüm projeler için geçerli ayarlar
• Workspace Settings: Sadece o proje için geçerli ayarlar
• Workspace settings, user settings'i override eder

Settings.json Düzenleme

{
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', Consolas, monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "terminal.integrated.fontSize": 13,
    "workbench.colorTheme": "Default Dark+",
    "prettier.singleQuote": true,
    "prettier.semi": true
}

Snippets (Kod Parçacıkları)

Hazır Snippets Kullanma

• Örnek: HTML dosyasında ! yazıp Tab'a basın → HTML5 şablonu oluşur
• JavaScript'te log yazıp Tab → console.log()

Kendi Snippet'inizi Oluşturma

1. File → Preferences → Configure User Snippets
2. Dil seçin (örn: JavaScript)
3. JSON formatında snippet tanımlayın

Live Server ile Web Geliştirme

Live Server Kullanımı

1. Live Server eklentisini yükleyin
2. HTML dosyasını açın
3. Sağ altta "Go Live" butonuna tıklayın
4. Tarayıcıda otomatik olarak açılır ve değişiklikler canlı yansır