Kod editörü

Önceki derste kaynak kodu Not Defteri'yle yazdın; işe yaradı ama çıplaktı. Bu derste asıl aracını kuruyorsun: VS Code. Kurulum, arayüzün beş bölgesi, klasör mantığı, en çok kullanacağın kısayollar, ayarlar ve eklenti kavramı.

01Ne öğreneceksin

02Neden özel bir editör

Kaynak kod düz metin ister. Word gibi kelime işlemciler metnin içine biçimlendirme verisi gömer; ürettikleri dosya kod olarak kullanılamaz. Not Defteri düz metin yazar, bu yüzden önceki derste işe yaradı — ama koda dair hiçbir şey bilmez.

Kod editörü, düz metin yazan ama kodu anlayan programdır. Sağladıkları:

• Renklendirme: komut, metin ve sayıyı farklı renkte gösterir; yapıyı bir bakışta okutur.
• Tamamlama: yazmaya başladığın adı tahmin edip önerir; yazım hatasını azaltır.
• Hata altçizgisi: sözdizimi hatasını daha kaydetmeden işaretler.
• Proje görünümü: tek dosya değil, klasörün tamamıyla çalışır.
• Entegre terminal: komut satırı editörün içindedir (terminali gelecek derste öğreneceksin).

IDE (tümleşik geliştirme ortamı: Visual Studio, Rider), editörün üstüne derleme, hata ayıklama ve proje yönetimini kutudan çıkarır ama ağırdır. VS Code ortayı tutar: hafif bir editördür, eklentilerle IDE yeteneklerine yaklaşır. Sektörde en yaygın araçtır ve bu müfredatın tamamı VS Code ile yürütülecektir.

03Kurulum

Windows:

1. Tarayıcıdan code.visualstudio.com adresine git; "Download for Windows" ile kurulum dosyasını indir.
2. İndirilen dosyayı çalıştır; lisansı onayla ve varsayılan kurulum yerini kabul et.
3. "Ek görevler" ekranında şu ikisinin işaretli olmasına dikkat et: "PATH'e ekle" (terminalden code komutuyla açabilmek için — gelecek derste kullanacaksın) ve "Code ile Aç eylemini ekle" (klasöre sağ tıklayıp doğrudan açabilmek için).
4. Kurulum bitince VS Code'u başlat; karşılama sekmesi açılır.

Linux: aynı adresten dağıtımına uygun .deb ya da .rpm paketini indirip paket yöneticisiyle kurarsın; paket yöneticisi kavramı Hat 17'de anlatılacak. Şimdilik Windows'tan devam etmen yeterli.

Arayüz İngilizcedir. Türkçe dil paketi eklentisi vardır; ancak İngilizce arayüzle çalışmaya şimdiden alışmanı öneririm — dokümantasyon, hata mesajları ve iş ortamlarının tamamına yakını İngilizce arayüz terimleriyle konuşur.

04Arayüz: beş bölge

1. Etkinlik çubuğu (Activity Bar) — en soldaki dikey simge şeridi. Sırayla: Explorer (dosyalar), Search (projede arama), Source Control (sürüm kontrolü — Hat 16'da), Run and Debug (hata ayıklama — Hat 15'te), Extensions (eklentiler).
2. Kenar çubuğu (Side Bar) — etkinlik çubuğunda seçili aracın paneli. Explorer seçiliyken açık klasörün dosya ağacını gösterir.
3. Editör alanı — ortadaki asıl çalışma alanı. Her açık dosya bir sekmedir; sekmeyi sürükleyerek ekranı ikiye bölebilir, iki dosyayı yan yana görebilirsin.
4. Panel — editörün altındaki bölge: Terminal, Problems (hatalar), Output. Ctrl+` ile açılıp kapanır.
5. Durum çubuğu (Status Bar) — en alttaki ince şerit: imlecin satır ve sütun numarası, dosyanın dil modu (HTML, C#, …), karakter kodlaması. Dil modunu buradan elle değiştirebilirsin; renklendirme ve tamamlama bu moda göre çalışır.

05Dosya değil klasör aç

VS Code'un temel çalışma birimi dosya değil klasördür. Bir projenin tüm dosyaları tek klasör altında durur; File → Open Folder ile o klasörü açarsın, Explorer dosya ağacını gösterir, arama ve diğer araçlar klasörün tamamında çalışır. Alışkanlığı bugünden kur: tek dosyayı masaüstünden açmak yerine, her iş için bir klasör oluştur ve klasörü aç.

Bir klasörü ilk açışta VS Code güven sorusu sorar ("Do you trust the authors…"). Bunun nedeni bazı eklentilerin klasördeki yapılandırmayı otomatik çalıştırabilmesidir; kendi oluşturduğun klasörler için "Yes, I trust the authors" doğru cevaptır. İnternetten indirilen tanımadık projelerde kısıtlı moddan çıkmadan önce içeriğe bakmak doğru reflekstir.

Yeni dosya: Explorer'da klasör adının yanındaki New File simgesi ya da sağ tık → New File. Adı uzantısıyla birlikte verirsin: notlar.md, sayfa.html. Uzantı, VS Code'un dil modunu — dolayısıyla renklendirme ve tamamlamayı — belirler.

06Komut paleti ve kısayollar

İki kısayol diğer her şeyin kapısıdır:

• Ctrl+Shift+P — komut paleti: VS Code'un yapabildiği her iş burada aranıp çalıştırılır. Menülerde gezinmek yerine yapmak istediğin işin adını yazarsın.
• Ctrl+P — dosyaya atlama: dosya adının birkaç harfini yaz, aç. Büyük projelerde dosya ağacında gezinmekten kat kat hızlıdır.

Gündelik kısayollar — ilk hafta içinde eline yerleşmesi gerekenler:

"Yoruma alma" (Ctrl+/): kaynak kodda çalıştırılmayan not satırlarına yorum denir; her dilin kendi yorum işareti vardır (HTML'de <!-- -->, C# ve JavaScript'te //). Kısayol, imlecin bulunduğu satırı dosyanın diline uygun işaretle sarar; bir kod satırını silmeden geçici devre dışı bırakmak için de kullanılır.

07Kodu hizalamak: girinti ve biçimlendirme

Kodun görünümünde iki kavram vardır. Girinti (indentation), iç içe geçen yapıların satır başından içeri itilmesidir: bir etiketin içindeki etiket, bir bloğun içindeki satır bir kademe içeride durur. Derleyici ve tarayıcı girintiyi umursamaz — insan umursar: girintisi bozuk kod, yapısı görünmediği için okunmaz ve hatası bulunamaz. Biçimlendirme (formatting) ise girinti dahil tüm yerleşim kurallarının bütünüdür: boşluklar, satır kırılımları, hizalar.

İyi haber: bu iş elle yapılmaz. VS Code'da her dilin bir biçimlendiricisi (formatter) vardır ve tek kısayolla tüm dosyayı kurallara göre hizalar:

• Shift+Alt+F — Format Document: dosyanın tamamını biçimlendirir. Sağ tık menüsünde ve komut paletinde de aynı adla bulunur.
• Bir bölümü seçip sağ tık → Format Selection — yalnızca seçimi düzeltir; başkasının koduna dokunmak istemediğin durumlar için.
• Seçili satırlarda Tab / Shift+Tab — elle kademe ver / geri al; küçük düzeltmelerde biçimlendiriciyi beklemeye gerek yok.

HTML, CSS, JavaScript ve JSON biçimlendiricileri VS Code'un içinde hazırdır; C# biçimlendirmesi Hat 01'de kuracağın C# Dev Kit ile gelir. Yazarken de editör yardım eder: Enter'a bastığında yeni satır doğru kademede açılır, kapanış parantezi yazdığında blok kendini hizalar.

Meslek pratiği şudur: biçimlendirme tartışılmaz, otomatikleştirilir. Bir sonraki bölümdeki editor.formatOnSave ayarını açtığında her Ctrl+S dosyayı kendiliğinden hizalar; ekiplerde de "kod nasıl hizalanır" tartışması insanlar arasında değil, herkesin kullandığı ortak biçimlendirici ayarıyla çözülür. Senin alışkanlığın bugünden şu olsun: girintisi kayan bir dosya gördüğünde elle düzeltmeye çalışma — Shift+Alt+F.

08Ayarlar

Ayarlar ekranı Ctrl+, ile açılır; üstteki kutuya ayar adı yazıp arayarak değiştirirsin. Her ayarın arka planda settings.json adlı bir dosyada bir karşılığı vardır; komut paletinden "Open User Settings (JSON)" ile bu dosyayı görebilirsin. Örnek bir ayar dosyası:

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "files.autoSave": "afterDelay",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true
}

Sırasıyla: yazı boyutu 15 punto; Tab girintisi 2 boşluk; dosyalar kısa bir gecikmeyle kendiliğinden kaydedilir; sağdaki minik kod haritası kapalı; kaydederken kod otomatik biçimlendirilir (önceki bölümün Format Document'i her kayıtta kendiliğinden çalışır). Bu beşli makul bir başlangıçtır; özellikle Auto Save'i açmanı öneririm — "değişikliği kaydetmeyi unuttum, tarayıcıda eski hali görüyorum" hatasını baştan yok eder.

09Eklentiler

Eklenti (extension), editöre yeni yetenek ekleyen kurulabilir pakettir: yeni bir dilin desteği, tema, araç entegrasyonu. Etkinlik çubuğundaki Extensions simgesinden aranır ve tek tıkla kurulur.

Bu müfredat için şimdiden kurman gereken eklenti yok — HTML, CSS ve JavaScript desteği VS Code'un içinde hazırdır. Sırası geldiğinde kuracakların: C# Dev Kit (Hat 01'de C# yazmaya başlarken) ve hatlar ilerledikçe gerekecek birkaç araç eklentisi; her biri kendi dersinde söylenecek. İlke: eklentiyi ihtiyaç doğunca kur. Az eklenti hızlı ve sorunsuz bir editör demektir.

10Mini alıştırma — editörünü kur ve eline alıştır

11Kendini sına

Kaynak kod neden kelime işlemciyle yazılmaz? Kod editörünün Not Defteri'ne üstünlüğü nedir?

Kelime işlemci metnin içine biçimlendirme verisi gömer; ortaya çıkan dosya düz metin olmadığı için kod olarak kullanılamaz. Not Defteri düz metin yazar ama kodu anlamaz. Kod editörü ikisini birleştirir: düz metin üretir ve kodu anlar — renklendirme, tamamlama, hata altçizgisi, klasör görünümü, entegre terminal sağlar.

Ctrl+P ile Ctrl+Shift+P arasındaki fark nedir?

Ctrl+P dosyaya atlar: adın birkaç harfiyle açık klasördeki dosyayı bulur. Ctrl+Shift+P komut paletini açar: VS Code'un yapabildiği her işi adıyla arayıp çalıştırırsın.

VS Code'da neden tek dosya değil klasör açılır?

Bir proje birden çok dosyadan oluşur ve araçların tamamı — dosya ağacı, projede arama, sürüm kontrolü, terminalin çalışma dizini — klasör üzerinden çalışır. Klasör açmak projenin bütününü tek bağlamda toplar; tek dosya açmak bu bağlamı kaybettirir.

Eklenti nedir? Bu aşamada eklenti kurman gerekiyor mu?

Eklenti, editöre yetenek ekleyen kurulabilir pakettir: dil desteği, tema, araç entegrasyonu. Bu aşamada gerekmiyor — HTML/CSS/JavaScript desteği VS Code'da hazır. C# Dev Kit, Hat 01'de C# yazmaya başlarken kurulacak; ilke, eklentiyi ihtiyaç doğduğunda kurmaktır.

12Sınav köşesi