VS Code ile Full-Stack .NET ve Angular: C# Dev Kit, Angular Language Service, Profiles ve Dev Container'lar

Sürüm notu: Bu yazıdaki örnekler Visual Studio Code (VS Code) 1.145.2, .NET 10 SDK (Software Development Kit), Dev Container CLI (Command Line Interface) 0.90.0 ve Docker 29.2 ile denenmiştir; Dev Container içinde .NET SDK 10.0.403 ve Node.js 26.13.0 (LTS, Long-Term Support) çalıştı. Kullanıcının VS Code profiline dokunmamak için editör arayüzü bu yazı için açılmadı ve extension kurulmadı; Dev Container, VS Code'un kullandığı aynı devcontainer.json spesifikasyonunu uygulayan resmi CLI ile ayağa kaldırıldı. C# Dev Kit, Angular Language Service, profile ve ayar davranışları resmi dokümandan aktarıldı.

Önce Tahmin Et

Bookstore ekibine yeni katılan bir geliştiriciye iki seçenek sunuyorsun. Birincisi bir sayfalık README: ".NET 10 SDK'yı kur, Node'un LTS sürümünü kur, Angular CLI'ı kur, şu extension'ları yükle". İkincisi repo'daki .devcontainer/devcontainer.json: VS Code'da "Reopen in Container" de, gerisi kendiliğinden kurulsun. İkinci yolda yeni geliştirici ilk build'i almadan önce makinesine kaç şey kurmak zorunda? Ve container'ın içinde 5046'da çalışan API'ye (Application Programming Interface) kendi tarayıcısından erişebilir mi?

Bu yazıda VS Code'u .NET ve Angular'ı birlikte yürüten bir çalışma ortamı olarak kuruyoruz: C# tarafı için hangi extension, Angular için ne gerekiyor, ayarlar hangi katmanda tutulmalı, profile'lar ne işe yarar ve ortamı repo'ya koyan Dev Container'lar nasıl çalışır.

C# Dev Kit ve Yalnız C# Extension'ı

VS Code'da C# için iki katman var. Altta açık kaynak C# extension'ı (ms-dotnettools.csharp): Roslyn tabanlı language server, IntelliSense, navigasyon, refactoring'ler ve coreclr debugger'ı. Üstte kapalı kaynak C# Dev Kit (ms-dotnettools.csdevkit): Solution Explorer, Test Explorer, proje sistemi, launchSettings.json'ı tam okuyan dotnet debug tipi ve Hot Reload. Dev Kit, C# extension'ının 2.0 ve üstü sürümünü gerektirir ve onun yerine geçmez, üzerine eklenir.

Seçimi belirleyen üç şey var. Lisans: birinci yazıda gördüğümüz gibi Dev Kit ticari kullanımda 5 kişiye kadar ücretsiz, üstünde Visual Studio aboneliği istiyor. Proje tipi: Dev Kit .NET Framework projelerini desteklemiyor; böyle bir solution'da dotnet.preferCSharpExtension ayarıyla proje yüklemesi C# extension'ına bırakılır ve Dev Kit o workspace için devre dışı kalır. İhtiyaç: Solution Explorer ve test penceresi olmadan da dotnet CLI ile çalışabilirsin; Dev Kit'in asıl katkısı Visual Studio'dan gelenlere tanıdık bir solution görünümü. JetBrains de 2026.2'de VS Code uyumlu editörler için ReSharper extension'ına Rider'ın debugger motorunu ekledi; üçüncü bir seçenek olarak bilmekte fayda var.

Repo'da birden fazla solution varsa Dev Kit hangisini açacağını sorar; seçimi workspace ayarına yazmak ekipteki herkesi aynı solution'da buluşturur.

Angular Language Service ve TypeScript

TypeScript desteği VS Code'un içinde hazır gelir. Angular template'leri için Angular ekibinin bakımını yaptığı Angular Language Service extension'ı (angular.ng-template) gerekir: template içinde completion, Go to Definition, hata gösterimi ve dördüncü yazıda gördüğümüz template'leri de kapsayan rename. Angular CLI, ng new ile oluşturduğu projenin .vscode/extensions.json dosyasına bu extension'ı öneri olarak zaten yazıyor:

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": ["angular.ng-template"]
}

Angular dokümanı Language Service'in en güncel özellikleri için tsconfig.json'da strictTemplates'in açık olmasını öneriyor. Extension, workspace'teki node_modules içindeki @angular/language-service ve TypeScript sürümüyle çalışır; global bir Angular kurulumuna ihtiyaç duymaz.

User, Workspace ve Folder Ayarları

VS Code ayarları katmanlıdır ve dokümana göre sonraki katman öncekini ezer: varsayılan, user, remote, workspace, workspace folder; ardından aynı sıra dile özgü ayarlar için tekrarlanır, en sonda da yöneticinin policy ayarları gelir. Primitive ve array değerler ezilir, object değerler (ör. files.exclude) birleştirilir. Pratik kural basit: kişisel tercih (tema, font, minimap) user ayarında, ekibin ortak kararı (formatter, solution, exclude listesi) repo'daki .vscode/settings.json'da.

{
  "dotnet.defaultSolution": "Bookstore.slnx",
  "editor.formatOnSave": true,
  "files.exclude": {
    "**/bin": true,
    "**/obj": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

API ve Angular'ı ayrı kök klasörler olarak görmek istiyorsan multi-root workspace kullanırsın. .code-workspace dosyası klasörleri listeler; her klasörün kendi .vscode/settings.json'ı workspace folder katmanı olur:

{
  "folders": [
    { "name": "api", "path": "api" },
    { "name": "web", "path": "web" }
  ],
  "settings": {
    "files.exclude": { "**/bin": true, "**/obj": true }
  }
}

Dikkat: dile özgü ayarlar kapsamı dar olsa bile genel ayarları ezer. User ayarındaki "[typescript]" bloğu, workspace'teki dile özgü olmayan editor.defaultFormatter'ı geçersiz kılar; "ayarı repo'ya koydum ama bende çalışmıyor" vakalarının bir kısmı buradan çıkar.

Profile'lar: Stack'e Göre Ayrı Kurulumlar

Profile, ayarlar, extension'lar, kısayollar, snippet'ler ve UI (User Interface) düzeninden oluşan bir pakettir. ".NET + Angular" profile'ında C# Dev Kit ve Angular Language Service açıkken, "Yazı ve Markdown" profile'ında ikisi de yüklenmez; editör daha hızlı açılır ve alakasız öneriler görünmez. Profile bir klasöre ya da workspace'e bağlanır: o klasörü her açtığında profile kendiliğinden etkinleşir. Profiles editöründen boş profile, mevcut bir profile'dan ya da hazır template'lerden (Python, Java, Angular gibi) yeni profile oluşturulur; bir ayarı ya da extension'ı bütün profile'lara uygulamak için Apply Setting to all Profiles ve Apply Extension to all Profiles eylemleri var. Profile'lar GitHub gist'ine ya da dosyaya export edilip ekip arkadaşına verilebilir.

Komut satırından da açılır; bu makinedeki VS Code'un kendi yardım çıktısı:

$ code --help
Visual Studio Code 1.145.2
  --profile <profileName>                    Opens the provided folder or
                                             workspace with the given profile
                                             and associates the profile with
                                             the workspace. If the profile does

Profile'ın kendi settings.json'ı macOS'ta ~/Library/Application Support/Code/User/profiles/<profile ID>/ altında durur ve ancak o profile'da bir ayar değiştirdiğinde oluşur.

Dev Container: Ortamı Repo'ya Koymak

Dev Container, geliştirme ortamını bir container image'ı ve bir JSON (JavaScript Object Notation) dosyası olarak tanımlar. VS Code, Dev Containers extension'ı ile repo'yu container'ın içinde açar: editör arayüzü senin makinende, dil servisleri, terminal ve debugger container'da çalışır. Bookstore için .NET 10 SDK'lı resmi image'ı ve Node LTS feature'ını kullandık:

{
  "name": "Bookstore (.NET 10 + Node LTS)",
  "image": "mcr.microsoft.com/devcontainers/dotnet:10.0",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "lts"
    }
  },
  "forwardPorts": [5046, 4200],
  "portsAttributes": {
    "5046": { "label": "Bookstore.Api" },
    "4200": { "label": "Angular dev server", "onAutoForward": "openBrowser" }
  },
  "postCreateCommand": "dotnet restore api/Bookstore.Api.csproj",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-dotnettools.csdevkit",
        "angular.ng-template",
        "editorconfig.editorconfig"
      ]
    }
  }
}

Aynı dosyayı Dev Container CLI ile ayağa kaldırdık. Image çekildi, Node feature'ı üzerine kuruldu, postCreateCommand çalıştı; bu makinede baştan sona 47 saniye sürdü:

$ devcontainer up --workspace-folder .
[2026-11-08T12:07:52.266Z] @devcontainers/cli 0.90.0. Node.js v24.22.2. darwin 27.0.0 arm64.
[2026-11-08T12:08:38.447Z] Running the postCreateCommand from devcontainer.json...
[2026-11-08T12:08:39.132Z]   Restored /workspaces/repo/api/Bookstore.Api.csproj (in 24 ms).
{"outcome":"success","containerId":"240d73269c78e04640aff146226bdc2b973b95ff4874aefcacc93f8f48c1a6ad","remoteUser":"vscode","remoteWorkspaceFolder":"/workspaces/repo", ...}

$ devcontainer exec --workspace-folder . bash -lc 'dotnet --version; node --version; npm --version; whoami; pwd'
10.0.403
v26.13.0
11.20.0
vscode
/workspaces/repo

Önce Tahmin Et'in ilk cevabı: yeni geliştiricinin makinesinde Docker ve VS Code (Dev Containers extension'ı ile) yeterli; SDK, Node ve extension'lar container'la geliyor. Çıktıdaki ayrıntıya dikkat: host'ta .NET SDK 10.0.402 var, container'da 10.0.403. Herkes aynı image'ı kullandığı için "bende hangi SDK var" sorusu ortadan kalkıyor; ama image etiketi (10.0) kayan bir etiket olduğundan bugün 10.0.403 olan yarın başka bir patch olabilir. Kesin sürüm istiyorsan image'ı digest ile sabitle ya da repo'da global.json kullan.

Port Forwarding: Container'daki API'ye Erişmek

İkinci soru. API'yi container'ın içinde http profile'ıyla başlatıp önce içeriden, sonra host'tan istek attık:

$ devcontainer exec --workspace-folder . bash -lc 'cd api && dotnet run --launch-profile http'
      Now listening on: http://localhost:5046
      Hosting environment: Development
# container içinden
{"environment":"Development","shippingProvider":"(not set)","pid":657}

# host'tan
$ curl -sS --max-time 3 http://localhost:5046/api/info
curl: (7) Failed to connect to localhost port 5046 after 0 ms: Couldn't connect to server
$ docker port idework-devcontainer
$

Container'da API çalışıyor ama host'tan erişilemiyor ve container'ın yayınlanmış (publish) hiçbir portu yok. Sebep, forwardPorts'un Docker'ın port publish mekanizması değil, VS Code'un özelliği olması: VS Code container'a bağlandığında kendi sunucusu üzerinden trafiği taşır ve localhost'a bağlanan bir uygulamaya bile host'tan erişim verir; CLI tek başına bunu yapmaz. VS Code dokümanı ikinci bir yol olarak appPort'u veriyor; o Docker'ın port publish'ini kullanır ve uygulamanın localhost yerine bütün arayüzleri dinlemesini gerektirebilir. Dev Container'ı VS Code dışında (CI'da (Continuous Integration), başka bir editörde) kullanacaksan bu farkı bilmen gerekiyor; VS Code içinde ise Ports panelinde iletilen portu ve host'taki karşılığını görürsün.

Remote SSH, WSL ve Agent Pencereleri

Dev Container'ın kardeşleri aynı mimariyi kullanır: Remote - SSH (Secure Shell) extension'ı bir Linux sunucusuna, WSL (Windows Subsystem for Linux) extension'ı Windows'taki Linux dağıtımına bağlanır; VS Code sunucusu uzak tarafta çalışır, extension'ların çoğu oraya kurulur. Windows'ta .NET ve Node'u WSL içinde çalıştırmak, dosya sistemi performansı ve Linux'a özgü araçlar için sık tercih edilen bir düzen.

VS Code'un 2026'daki asıl değişimi agent tarafında. 1.109 ile gelen integrated browser, web sayfalarını editörün içinde açar ve agent'ın sayfayla etkileşmesine izin verir; 1.120 (13 Mayıs 2026) ile Agents window Stable kanala geldi; 1.140'ta agent oturumlarının projenin Dev Container'ında izole çalışabilmesi eklendi; 4 Kasım 2026'daki 1.145'te uzak agent host'ları üzerinden integrated browser ile önizleme ve cron ile zamanlanan automation'lar geldi. Bu özellikler hızlı değişiyor; AI (Artificial Intelligence) asistanlarının IDE'lerdeki (Integrated Development Environment) durumu dokuzuncu yazının konusu.

Üretimde Dikkat

Dev Container image'ını sabitle. dotnet:10.0 etiketi her patch'te yeni bir image'a işaret eder; tekrarlanabilir bir ortam için digest kullan ya da kendi image'ını kendi registry'nde üret.

Extension listesini repo'da tut: devcontainer.json'daki customizations.vscode.extensions ve .vscode/extensions.json. Extension'ların güvenliği ve kurumsal kısıtlamalar sekizinci yazıda.

Container'da sır tutma. Connection string'leri ve token'ları devcontainer.json'a ya da image'a koyma; user secrets, ortam değişkenleri ya da bir secret manager kullan. Dev Container dosyası repo'da herkesin gördüğü bir dosyadır.

macOS ve Windows'ta Docker bir sanal makinede çalışır; büyük node_modules ve obj klasörlerinin host ile senkronu yavaş olabilir. Bu klasörleri container'ın kendi volume'unda tutmak bilinen bir hızlandırma.

Sık Düşülen Tuzaklar

Extension yığınıyla yavaşlayan başlangıç. Her extension bir activation event'te yüklenir; Command Palette'te "Developer: Show Running Extensions" hangisinin ne kadar sürdüğünü gösterir, "Help: Start Extension Bisect" ise sorunlu extension'ı ikiye bölerek bulur. Stack'e göre profile ayırmak bu sorunu kökten azaltır.

Dev Container'da port forwarding'i unutmak ya da VS Code dışında beklemek. Gerçek çıktı: container'da çalışan API, CLI ile kurulan ortamda host'tan erişilemedi; forwardPorts VS Code'un işi, appPort Docker'ın.

Kişisel ayarı workspace'e commit'lemek. Font boyutu ya da tema .vscode/settings.json'a girerse ekipteki herkesin editörü değişir.

Dev Kit'i .NET Framework projesinde zorlamak. Dev Kit bu projeleri desteklemiyor; dotnet.preferCSharpExtension ile proje yüklemesini C# extension'ına bırak.

Dile özgü ayarların önceliğini bilmemek. User'daki "[typescript]" bloğu workspace'teki genel formatter ayarını ezer.

Küçük Bir Deneme

★☆☆ Kendi repo'na .vscode/settings.json ve .vscode/extensions.json ekle; içine yalnız ekip kararı olan ayarları koy. Kişisel ayarlarından hangisinin repo'ya sızdığını kontrol et.

★★☆ ".NET + Angular" ve "Docs" adında iki profile oluştur, extension listelerini ayır ve VS Code'un açılış süresini Developer: Startup Performance komutuyla karşılaştır.

★★★ Bu yazıdaki devcontainer.json'ı kendi repo'na uyarla, image'ı digest ile sabitle ve API ile Angular'ı container içinde çalıştır. Bir kez VS Code ile, bir kez Dev Container CLI ile ayağa kaldırıp port erişimini karşılaştır.

VS Code'u bir çalışma ortamına çevirdik. Bir sonraki yazıda JetBrains Rider'a geçiyoruz: ReSharper motorunun inspection'ları, decompiler ve Source Link, Entity Framework Core'un (EF Core) ürettiği SQL'i (Structured Query Language) yerleşik database araçlarıyla incelemek ve Rider 2026.2'nin getirdikleri.