Visual Studio Code üzerinde TypeScript geliştirme için derleyici, tsconfig, kaynak haritası, hata ayıklama ve ESLint ayarlarını kolayca doğru yapılandırın.
TypeScript dosyasını açtığınızda kod tamamlama çalışıyor, ancak projeyi derlemeye geçtiğinizde tsc bulunamadı hatası mı alıyorsunuz? Ya da kırılma noktası eklemenize rağmen hata ayıklayıcı ilgili satırda durmuyor mu? Bu sorunların çoğu Visual Studio Code kurulumundan değil; derleyici sürümü, tsconfig.json ve çıktı klasörü arasındaki uyumsuzluktan kaynaklanır.
Visual Studio Code, TypeScript için IntelliSense, tür bilgisi, imza yardımı ve yerleşik hata ayıklama özellikleri sunar. Buna karşılık tsc derleyicisi editörle birlikte gelmez. Bu nedenle sorunsuz bir TypeScript geliştirme ortamı için Node.js, proje içi TypeScript kurulumu ve doğru yapılandırılmış derleme ayarları birlikte ele alınmalıdır.
Daha önce farklı bir programlama ortamı hazırlamadıysanız, Visual Studio Code Üzerine Python Kurulumu içeriğindeki klasör açma, bütünleşik terminali kullanma ve çalışma alanı mantığı bu süreçte de işinizi kolaylaştırır. Python ve TypeScript farklı araçlara ihtiyaç duysa da editör içindeki temel proje düzeni benzerdir.
Visual Studio Code ile TypeScript geliştirme ortamı nasıl kurulur?
Visual Studio Code ile TypeScript geliştirmek için önce Node.js ve npm kurulumu doğrulanmalı, ardından TypeScript derleyicisi projeye geliştirme bağımlılığı olarak eklenmelidir. tsconfig.json dosyasında kaynak haritası ve çıktı klasörü tanımlandıktan sonra kod npx tsc -p . komutuyla derlenebilir; oluşan JavaScript dosyası Node.js ile çalıştırılabilir.
Node.js ve TypeScript derleyicisini kontrol edin
Bütünleşik terminali Terminal > New Terminal yoluyla açın ve sürümleri kontrol edin:
node -v
npm -vArdından yeni bir proje oluşturun:
mkdir vscode-typescript
cd vscode-typescript
npm init -y
npm install --save-dev typescript
npx tsc --version
npx tsc --initTypeScript’i proje içine kurmak, farklı projelerin farklı derleyici sürümleri kullanabilmesini sağlar. Visual Studio Code içindeki TypeScript dil hizmeti ile projeyi derleyen sürüm birbirinden ayrıdır. Sürüm farkı, editörde görülen uyarılarla terminal çıktısının uyuşmamasına neden olabilir.
tsconfig.json hangi ayarları içermeli?
tsconfig.json, projenin kökünü ve derleyici seçeneklerini belirler. Başlangıç için strict seçeneğini açık tutun, hata ayıklama için sourceMap değerini etkinleştirin ve oluşan JavaScript dosyalarını ayrı bir klasöre göndermek üzere outDir tanımlayın.
Kaynak kodu src, çıktıyı build klasöründe tutmak proje görünümünü sadeleştirir. target ve module değerlerini ise kodun çalışacağı Node.js ya da tarayıcı ortamına göre seçin.
src/index.ts dosyasına basit bir örnek ekleyebilirsiniz:
const message: string = 'Merhaba TypeScript';
console.log(message);Derleme ve çalıştırma işlemi şu komutlarla yapılır:
npx tsc -p .
node build/index.jsVisual Studio Code içinde Terminal > Run Build Task seçeneğiyle tsc: build görevi de çalıştırılabilir. Sürekli geliştirme sırasında tsc: watch, dosya değişikliklerini izleyerek yeniden derleme yapar. Derleme hataları ayrıca Problems panelinde görüntülenir.
TypeScript kodu neden derlenmiyor?
tsc komutu tanınmıyorsa global kurulumla uğraşmak yerine npx tsc kullanın ve node_modules klasörünün oluştuğunu kontrol edin. tsconfig.json bulunamadı uyarısında komutu proje kökünde çalıştırdığınızdan emin olun. Derlenmiş dosya beklenen konuma gitmiyorsa outDir değeri ile çalıştırdığınız dosya yolunu karşılaştırın.
Editörde kırmızı çizgi görünmediği hâlde terminal hata veriyorsa, açık bir TypeScript dosyasında durum çubuğundaki sürüm bilgisini kontrol edin ve TypeScript: Select TypeScript Version komutuyla çalışma alanı sürümünü seçin.
Kendi denemelerimde en yanıltıcı durumun bu sürüm ayrımı olduğunu fark ettim. Aynı kod, editör ve derleyici farklı TypeScript sürümleri kullandığında iki ayrı hata listesi oluşturabiliyor.
Visual Studio Code hata ayıklama ayarları
TypeScript üzerinde doğrudan kırılma noktası kullanabilmek için sourceMap açık olmalıdır. Run and Debug bölümünden Node.js yapılandırması oluşturulduğunda .vscode/launch.json dosyası hazırlanır.
Buradaki preLaunchTask, derleme görevini; outFiles ise üretilen JavaScript dosyalarının konumunu göstermelidir. outFiles yolu build klasörünüzle eşleşmezse kırılma noktası pasif kalabilir.
Bir satırın sol kenarına tıklayarak kırılma noktası ekleyin ve Start Debugging komutunu çalıştırın. İşlem doğru yapılandırılmışsa kod önce derlenir, ardından kaynak haritası üzerinden TypeScript satırında durur. Değişken değerlerini Variables, çalışma çıktısını ise Debug Console alanından izleyebilirsiniz.
ESLint yapılandırması 2026’da nasıl yapılmalı?
Yeni projelerde eski .eslintrc.json yapısını kopyalamak yerine ESLint’in düz yapılandırma sistemini kullanın. Başlangıç dosyasını şu komutla oluşturabilirsiniz:
npm init @eslint/config@latest2026 itibarıyla yaygın yapılandırma dosyası eslint.config.js biçimindedir. Visual Studio Code için resmi ESLint uzantısını yükledikten sonra kayıtta otomatik düzeltme amacıyla çalışma alanı ayarlarında source.fixAll.eslint değerini explicit olarak tanımlayabilirsiniz.
TypeScript ESLint tarafında doğru yapılandırılmışsa ayrıca eslint.validate eklemek çoğu projede gerekli değildir.
Kurulum, sürüm eşleştirme veya hata ayıklama adımlarında uzaktan desteğe ihtiyaç duyarsanız 11858, 2011 yılından bu yana Türkiye genelinde 7/24 teknik destek sunar. Bilgisayar, akıllı TV, sosyal medya ve modem işlemlerinde TeamViewer ile AnyDesk gibi lisanslı araçları kullanır. Dakika bazlı şeffaf ücretlendirme, yüzde 95 memnuniyet oranı ve 500.000’den fazla başarılı işlem deneyimiyle uzman kadro üzerinden hizmet verir.
Projeyi yerel ortamda hazırladıktan sonra farklı bir sunucuda çalıştırmanız gerekebilir. Bu aşamada Visual Studio Code SSH Bağlantısı Yapılandırma içeriği, uzak klasörleri editör içinde açma ve geliştirme ortamına güvenli biçimde erişme konusunda tamamlayıcı bir yol sunar.
Visual Studio Code, doğru sürüm ve klasör eşleştirmesi yapıldığında TypeScript geliştirme sürecini belirgin biçimde düzenler. Siz en çok derleyici kurulumu, ESLint ayarları veya kırılma noktaları tarafında mı sorun yaşıyorsunuz? Karşılaştığınız hata kodunu yorumlarda paylaşabilirsiniz.
