Bu sayfada · 9 başlık
Visual Studio Code Hakkında Bilmen Gereken 5 Temel Soru
Kod yazmak, hata ayıklamak, eklentilerle onlarca dili desteklemek ve proje geliştirmek için kullanılan modern kod editörüdür.
Web siteleri, Python betikleri, C# projeleri, Markdown notları yazma, Git entegrasyonuyla değişiklikleri izleme yapılır.
Dünyadaki yazılımcıların %70’inden fazlasının birincil geliştirme ortamı olarak tüm işletim sistemlerinde kullanılır.
code.visualstudio.com adresinden indirilir; Windows, Mac ve Linux’ta doğrudan çalıştırılır.
Ücretsiz, çok hızlı ve geniş eklenti mağazası sayesinde tek programla tüm dillerde çalışabilmeyi sağlar.
VS Code ne için kullanılır?
Web siteleri yazmak (HTML, CSS, JavaScript)
Python, C#, Java gibi dillerde kod yazmak
Eklentilerle (extension) yeni özellikler eklemek
Git ile değişiklikleri takip etmek
VS Code kullanırken duyacağın kavramlar
- Eklenti (extension)
- VS Code'a yeni özellikler ekleyen küçük programlar: dil desteği, temalar, kod düzenleyiciler.
- Çalışma alanı
- VS Code'da açtığın proje klasörü. Soldaki gezginde içindeki dosyaları görürsün.
- Komut paleti
- Ctrl + Shift + P ile açılan, VS Code'un bütün komutlarını arayıp çalıştırabildiğin kutu.
- Entegre terminal
- VS Code'un içinde açılan terminal; ayrı bir pencereye geçmeden komut çalıştırırsın.
Nasıl kurulur?
Adımları görsellerle takip et. Ekran görüntüsüne dokunarak büyütebilirsin; sürümüne veya işletim sistemine göre düğmelerin yeri değişebilir.
-
1
code.visualstudio.com adresine git ve işletim sistemine uygun Download butonuna bas.
Gerçek ekran görüntüsü Resmi site · 3 Kasım 2026 ekran görüntüsü
İşletim sistemine uygun VS Code paketini seç.
-
2
Windows'ta indirilen dosyayı çalıştır ve "Add to PATH" seçeneğini işaretli bırak. Mac'te indirilen uygulamayı Uygulamalar (Applications) klasörüne sürükle.
Gerçek ekran görüntüsü macOS · Terminal komutunu etkinleştirme
Mac’te VS Code’u terminalden açmak için Komut Paleti’nde Shell Command seçeneğini bulabilirsin. Windows kurulumundaki Add to PATH seçeneğinin karşılığıdır.
-
3
Türkçe arayüz istersen soldaki Eklentiler bölümünden "Turkish Language Pack" eklentisini kur.
Şekil 3 · Soldaki Eklentiler simgesine bas, "turkish" yaz ve Install de. (temsili çizim) -
4
Kullanacağın dilin eklentisini de kur (ör. Python). VS Code genelde bunu kendisi önerir.
Şekil 4 · Aynı yerde "python" ara ve Python eklentisini kur. (temsili çizim)
Nasıl kullanılır?
Adım adım ilk kullanım. Kod kutularındaki "Kopyala" butonuyla komutları kopyalayabilirsin.
Proje klasörünü aç
Üst menüden File → Open Folder ile proje klasörünü aç. Dosyaların soldaki gezginde görünür.
File / Open Folder ile boş çalışma klasörünü seç. Açılan klasörün adını Explorer başlığında gör.
Bir dosyayı tek başına açmak ile proje kökünü açmak farklıdır; göreli yollar ve görev ayarları köke göre çalışabilir.
Örneği hangi klasörde tuttuğunu bir cümleyle not et; masaüstündeki benzer dosyalarla karıştırma.
Uygulama: webino-deneme adında bir klasör oluştur.
Kontrol: Explorer doğru klasörü gösteriyor.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Proje klasörünü aç
File / Open Folder ile boş çalışma klasörünü seç. Açılan klasörün adını Explorer başlığında gör.
İşin mantığı
Bir dosyayı tek başına açmak ile proje kökünü açmak farklıdır; göreli yollar ve görev ayarları köke göre çalışabilir.
Uygula ve gözlemle
Örneği hangi klasörde tuttuğunu bir cümleyle not et; masaüstündeki benzer dosyalarla karıştırma.
Somut görev
webino-deneme adında bir klasör oluştur.
Kontrol et
Explorer doğru klasörü gösteriyor.
Takılırsan
Komut bulunamadı — Editör kurulumu ilgili dilin çalışma zamanını kurmaz; resmî dil kurulumunu ve terminal PATH değerini kontrol et.
Kendine sor
Editör ve yorumlayıcı aynı şey mi? Yanıt: Hayır. Biri dosyayı düzenler, diğeri dili çalıştırır.
Yeni dosya oluştur
Gezginde sağ tıkla → New File. Dosyaya uzantısıyla birlikte isim ver: index.html, merhaba.py gibi.
Explorer içinden index.html oluştur. Dosya adının sonundaki uzantıyı kontrol et ve UTF-8 olarak kaydet.
Kaydedilmemiş sekmenin işaretini gözle; tarayıcı editörün belleğindeki taslağı değil diskteki dosyayı okur.
Bir başlığı değiştir, kaydet ve tarayıcıyı yenile. Üç ayrı eylemin görevini ayır.
Uygulama: index.html içine bir başlık, paragraf ve bağlantı yaz.
Kontrol: Dosyalar gerçekten .html/.css uzantılı.
Videoyla adım adım izle · 2:55
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Yeni dosya oluştur
Explorer içinden index.html oluştur. Dosya adının sonundaki uzantıyı kontrol et ve UTF-8 olarak kaydet.
İşin mantığı
Kaydedilmemiş sekmenin işaretini gözle; tarayıcı editörün belleğindeki taslağı değil diskteki dosyayı okur.
Uygula ve gözlemle
Bir başlığı değiştir, kaydet ve tarayıcıyı yenile. Üç ayrı eylemin görevini ayır.
Somut görev
index.html içine bir başlık, paragraf ve bağlantı yaz.
Kontrol et
Dosyalar gerçekten .html/.css uzantılı.
Takılırsan
Kaydettim ama değişmedi — Doğru dosyayı ve tarayıcı sekmesini karşılaştır; stil dosyasının adresini Network bölümünde bul.
Kendine sor
Open Folder neyi kolaylaştırır? Yanıt: Projeyi ve göreli dosya ilişkilerini tek çalışma alanında görmeyi.
Terminali kullan
Üst menüden Terminal → New Terminal ile alt kısımda bir terminal açılır. Örneğin Python dosyanı buradan çalıştırabilirsin:
python merhaba.pyTerminal / New Terminal aç. Komut çalıştırmadan önce terminalin bulunduğu klasörü öğren.
Python için yorumlayıcı, Node için çalışma zamanı gerekir; terminal yalnızca bu programlara komut verdiğin arayüzdür.
Hata çıktısını kopyalarken gerçek kullanıcı yolu veya özel anahtar paylaşma; ilk anlamlı hata satırına odaklan.
Uygulama: stil.css dosyasını oluştur; başlığı renklendir.
Kontrol: Stil dosyasının isteği başarılı ve başlık değişiyor.
Videoyla adım adım izle · 3:20
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Terminali kullan
Terminal / New Terminal aç. Komut çalıştırmadan önce terminalin bulunduğu klasörü öğren.
İşin mantığı
Python için yorumlayıcı, Node için çalışma zamanı gerekir; terminal yalnızca bu programlara komut verdiğin arayüzdür.
Uygula ve gözlemle
Hata çıktısını kopyalarken gerçek kullanıcı yolu veya özel anahtar paylaşma; ilk anlamlı hata satırına odaklan.
Komut / kod · 1
Önce komutun ne yapacağını oku; işletim sistemi farklarını yazılı rehberde kontrol et.
Kod
python merhaba.pySomut görev
stil.css dosyasını oluştur; başlığı renklendir.
Kontrol et
Stil dosyasının isteği başarılı ve başlık değişiyor.
Takılırsan
Eklenti bir görev çalıştırmak istiyor — Önce projenin ve eklentinin kaynağını incele; bilinmeyen görevleri rastgele başlatma.
Kendine sor
Biçimlendirme mantık hatasını çözer mi? Yanıt: Hayır; boşluk düzeni ile program davranışı ayrı konulardır.
Kısayolları öğren
En çok işine yarayacak kısayollar (Mac'te Ctrl yerine Cmd, Alt yerine Option):
Ctrl + S → Kaydet
Ctrl + P → Dosya ara ve aç
Ctrl + Shift + P → Komut paleti
Ctrl + / → Satırı yorum yap
Alt + ↑ / ↓ → Satırı yukarı/aşağı taşıKomut paleti için Ctrl+Shift+P; macOS’ta Cmd+Shift+P kullanabilirsin. Kısayollar değiştirilebilir.
Bir dosyada arama ile proje genelinde aramanın farkını dene. Yanlış yerde aramak dosya yokmuş gibi düşündürebilir.
Biçimlendirme kodu düzenler, mantık hatasını düzeltmez. Önce çalışan kodu kaydet; sonra biçimlendir ve farkı incele.
Uygulama: HTML head içine doğru href ile stil dosyasını bağla.
Kontrol: Dosya yolu hatasını açıklayarak çözebiliyorum.
Videoyla adım adım izle · 3:20
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Kısayolları öğren
Komut paleti için Ctrl+Shift+P; macOS’ta Cmd+Shift+P kullanabilirsin. Kısayollar değiştirilebilir.
İşin mantığı
Bir dosyada arama ile proje genelinde aramanın farkını dene. Yanlış yerde aramak dosya yokmuş gibi düşündürebilir.
Uygula ve gözlemle
Biçimlendirme kodu düzenler, mantık hatasını düzeltmez. Önce çalışan kodu kaydet; sonra biçimlendir ve farkı incele.
Komut / kod · 1
Önce komutun ne yapacağını oku; işletim sistemi farklarını yazılı rehberde kontrol et.
Kod
Ctrl + S → Kaydet
Ctrl + P → Dosya ara ve aç
Ctrl + Shift + P → Komut paleti
Ctrl + / → Satırı yorum yap
Alt + ↑ / ↓ → Satırı yukarı/aşağı taşıSomut görev
HTML head içine doğru href ile stil dosyasını bağla.
Kontrol et
Dosya yolu hatasını açıklayarak çözebiliyorum.
Takılırsan
Eklenti bir görev çalıştırmak istiyor — Önce projenin ve eklentinin kaynağını incele; bilinmeyen görevleri rastgele başlatma.
Kendine sor
Biçimlendirme mantık hatasını çözer mi? Yanıt: Hayır; boşluk düzeni ile program davranışı ayrı konulardır.
Sık karşılaşılan sorunlar ve çözümleri
Bir yerde takılırsan önce buraya bak.
"python" komutu bulunamadı diyor
Çözüm: Önce Windows’ta py --version, macOS/Linux’ta python3 --version ile dene. Kuruluysa VS Code’daki Python yorumlayıcısını seç ve PATH ayarını kontrol et. Add to PATH seçeneği yalnızca ilgili Windows kurucularında bulunur; ilk adım olarak yeniden kurmak gerekmez.
Türkçe karakterler bozuk görünüyor
Çözüm: Sağ alt köşedeki kodlama yazısına tıkla ve "UTF-8" seç.
Bir eklenti çalışmıyor
Çözüm: Komut paletini aç ve "Reload Window" yazarak pencereyi yenile; olmazsa eklentiyi kaldırıp yeniden kur.
Sık sorulan sorular
VS Code ile Visual Studio aynı şey mi? +
Hayır. İkisi de Microsoft'un ama VS Code hafif ve her dille çalışan bir editör; Visual Studio ise özellikle C# ve .NET için büyük bir IDE.
VS Code ücretli mi? +
Hayır, tamamen ücretsiz.
İpuçları
- Live Server eklentisiyle HTML sayfanı kaydettiğin anda tarayıcıda yenilenmiş hâliyle görürsün.
- Prettier eklentisi kodunu kaydederken otomatik olarak düzenler.
- Ayarlardan Auto Save özelliğini açarsan dosyaların kendiliğinden kaydedilir.
Visual Studio Code uygulamalı eğitim atölyesi
VS Code bir kod editörüdür; her dilin çalıştırıcısını kendi içinde otomatik taşımaz. Python dosyasını düzenlemek ile Python yorumlayıcısını kurmak ayrı işlemlerdir. Önce klasör, dosya, terminal ve çalışma zamanı arasındaki ilişkiyi kur. Böylece “kod açılıyor ama çalışmıyor” durumunda neyi araştıracağını bilirsin.
Bir proje klasörü ilgili dosyaları birlikte tutar. Explorer bu klasörün içeriğini gösterir; terminalin çalışma dizini ise komutun nereden yürütüleceğini belirler. Aynı isimli iki dosyayı farklı klasörlerde açarsan yanlış sürümü çalıştırabilirsin. Başlık ve dosya yolunu kontrol etme alışkanlığı kazan.
Editörün Problems paneli, terminal hata çıktısı ve tarayıcı Console bölümü farklı kaynaklardır. Hatanın türünü ayır: sözdizimi mi, çalışma zamanı mı, yüklenmeyen dosya mı? Bir eklentinin bütün sorunları kendiliğinden çözeceğini varsaymak yerine önce küçük bir çalışan örnek kur.
Kurulum öncesi ve doğrulama
- Resmî kaynaktan kendi işletim sistemine uygun paketi indir.
- Yalnızca kendin oluşturduğun örnek klasörüyle başla; bilinmeyen depoların görevlerini çalıştırma.
- HTML için tarayıcı yeterli; Python/Node gibi diller için ilgili çalışma zamanını ayrıca kur.
Videoyla adım adım izle · 5:00
Türkçe açıklamalı sessiz görsel anlatım. Sesli ders veya kesintisiz ekran kaydı değildir. Duraklatıp kendi ortamında uygula.
Video bölümleri ve tam metin
Bir klasörde çalışan iki dosyalı tanıtım sayfası
VS Code bir kod editörüdür; her dilin çalıştırıcısını kendi içinde otomatik taşımaz. Python dosyasını düzenlemek ile Python yorumlayıcısını kurmak ayrı işlemlerdir. Önce klasör, dosya, terminal ve çalışma zamanı arasındaki ilişkiyi kur. Böylece “kod açılıyor ama çalışmıyor” durumunda neyi araştıracağını bilirsin.
Hazırlık
Resmî kaynaktan kendi işletim sistemine uygun paketi indir. Yalnızca kendin oluşturduğun örnek klasörüyle başla; bilinmeyen depoların görevlerini çalıştırma.
Proje adımı 1
webino-deneme adında bir klasör oluştur.
Proje adımı 2
index.html içine bir başlık, paragraf ve bağlantı yaz.
Proje adımı 3
stil.css dosyasını oluştur; başlığı renklendir.
Proje adımı 4
HTML head içine doğru href ile stil dosyasını bağla.
Proje adımı 5
Dosyaları kaydet; tarayıcıda aç ve Network üzerinden CSS isteğini kontrol et.
Proje adımı 6
Bir CSS dosya yolunu boz, belirtileri gözle ve doğru yola döndür.
Başarı ölçütü 1
Explorer doğru klasörü gösteriyor.
Başarı ölçütü 2
Dosyalar gerçekten .html/.css uzantılı.
Başarı ölçütü 3
Stil dosyasının isteği başarılı ve başlık değişiyor.
Başarı ölçütü 4
Dosya yolu hatasını açıklayarak çözebiliyorum.
Bitirme çalışması: Bir klasörde çalışan iki dosyalı tanıtım sayfası
- webino-deneme adında bir klasör oluştur.
- index.html içine bir başlık, paragraf ve bağlantı yaz.
- stil.css dosyasını oluştur; başlığı renklendir.
- HTML head içine doğru href ile stil dosyasını bağla.
- Dosyaları kaydet; tarayıcıda aç ve Network üzerinden CSS isteğini kontrol et.
- Bir CSS dosya yolunu boz, belirtileri gözle ve doğru yola döndür.
Başarı ölçütlerin
- Explorer doğru klasörü gösteriyor.
- Dosyalar gerçekten .html/.css uzantılı.
- Stil dosyasının isteği başarılı ve başlık değişiyor.
- Dosya yolu hatasını açıklayarak çözebiliyorum.
Sorun giderme masası
Komut bulunamadı
Editör kurulumu ilgili dilin çalışma zamanını kurmaz; resmî dil kurulumunu ve terminal PATH değerini kontrol et.
Kaydettim ama değişmedi
Doğru dosyayı ve tarayıcı sekmesini karşılaştır; stil dosyasının adresini Network bölümünde bul.
Eklenti bir görev çalıştırmak istiyor
Önce projenin ve eklentinin kaynağını incele; bilinmeyen görevleri rastgele başlatma.
Kendini kontrol et
Editör ve yorumlayıcı aynı şey mi?
Hayır. Biri dosyayı düzenler, diğeri dili çalıştırır.
Open Folder neyi kolaylaştırır?
Projeyi ve göreli dosya ilişkilerini tek çalışma alanında görmeyi.
Biçimlendirme mantık hatasını çözer mi?
Hayır; boşluk düzeni ile program davranışı ayrı konulardır.
Bir sonraki modüller
- Debugger ve breakpoint
- Dil için doğru yorumlayıcı seçimi
- Workspace ayarları ve görevler
Bu içerik işine yaradı mı?
Görüşünü aşağıdan işaretleyebilir ve varsa notunu bırakabilirsin.