Mac’e VS Code nasıl kurulur? İlk klasör ve code komutu

Mac’te VS Code kullanmaya başlamak için resmî indirmeyi aç, Mac’ine uygun paketi seç, uygulamayı Applications klasörüne taşı ve bir proje klasörü aç. HTML/CSS öğrenmek için ayrıca Node.js kurmak zorunda değilsin. Kurulum ile terminalde code komutunu etkinleştirme adımları ayrıdır.

1. Doğru indirmeyi seç

Apple menüsü → Bu Mac Hakkında bölümünden işlemci veya çip bilgisini kontrol et. Resmî VS Code indirme sayfasında macOS için sunulan Apple silicon, Intel veya Universal seçeneklerini buna göre değerlendir. Ürün adının benzemesi yeterli değildir; Visual Studio, VS Code ile aynı uygulama değildir.

2. Uygulamayı aç ve klasörünü seç

1 Arşivi aç. İndirilen paketi aç ve Visual Studio Code uygulamasını Applications klasörüne taşı.
2 İlk açılışı yap. Applications içindeki uygulamayı aç. macOS kaynak doğrulaması sorarsa indirme adresini kontrol et; güvenlik ayarlarını topluca kapatma.
3 Proje klasörü aç. File → Open Folder ile kendine ait boş bir klasör seç. Yeni bir projede hangi klasörü açtığını kontrol et; bütün diski çalışma alanı olarak açmak gerekmez.
4 İlk dosyayı kaydet. Gezginden index.html oluştur ve içine küçük bir başlık yaz. Dosyanın .html.txt olarak kaydolmadığını kontrol et.

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>İlk sayfam</title>
</head>
<body><h1>Merhaba Webino App!</h1></body>
</html>

3. Terminalde code komutu bulunamıyorsa

VS Code açıkken Cmd + Shift + P ile Komut Paleti’ni aç. Shell Command: Install code command in PATH komutunu arat ve resmî kurulum belgesindeki adımı izle. Yeni bir terminal oturumu açtıktan sonra aşağıdaki komutun çalışmasını kontrol et. Nokta, terminalde bulunduğun klasörü ifade eder; yanlış klasörü açmamak için önce konumunu kontrol et.

Terminal

code --version
code .

4. Bir dosya açmak ile web sayfasını çalıştırmak

Editörde kodu görmekle tarayıcıda sayfayı açmak farklı işlemlerdir. Kaydettiğin index.html dosyasını tarayıcıda aç; başlığın göründüğünü kontrol et. İleride modüller veya sunucu istekleri kullandığında yerel HTTP sunucusu gerekebilir. Basit bir ilk HTML dosyası için bütün geliştirme araçlarını aynı anda kurmak gerekmez.

Görselli araç rehberi VS Code kurulum ve ilk kullanımını incele →

Resmî kaynak

VS Code macOS kurulumu ve PATH adımları ↗

Sık Karşılaşılan Hatalar, Nedenleri ve Hızlı Çözüm Tablosu

Mac’e VS Code nasıl kurulur? İlk klasör ve code komutu konusunu kendi projende uygularken en sık karşılaşılan durumları ve çözüm adımlarını aşağıdaki tabloda bulabilirsin:

Belirti / Sorun	Temel Nedeni	Nasıl Teşhis Edilir?	Kesin Çözüm
Değişiklik ekrana yansımıyor	Dosya kaydedilmemiş veya tarayıcı eski önbelleği gösteriyor	Editörde dosya adının yanında nokta işareti var mı bak	`Ctrl+S` / `Cmd+S` ile kaydet ve `Ctrl+F5` ile yenile
Büyük/küçük harf veya yol hatası	Dosya adı, seçici (`id`/`class`) veya değişken adı birebir eşleşmiyor	Konsol (F12) veya terminaldeki satır numarasını kontrol et	Türkçe karakter ve boşluk içermeyen küçük harfli adlandırma kullan
Tür veya Boş Değer (`null`/`None`) Hatası	Henüz oluşmamış bir HTML elemanına veya metin (`string`) tipindeki sayıya işlem yapmak	`console.log(typeof x)` veya `print(type(x))` ile türü yazdır	İşlem öncesi değerin varlığını (`if`) ve tür dönüşümünü (`Number`/`int`) doğrula
Ortam / Paket Uyuşmazlığı	Terminalde farklı bir klasörde veya sanal ortam dışındayken komut çalıştırmak	`pwd` (veya `cd`) ve `which python` ile konumu gör	Proje kök klasöründe doğru sanal ortamı etkinleştirerek çalıştır

Adım Adım Hata Ayıklama (Debugging) ve Temiz Kod Kontrol Listesi

1. Sorunu En Küçük Örnekte İzole Et: 200 satırlık kodda hata aramak yerine, yalnızca takıldığın satırı 5-10 satırlık küçük bir deneme alanında (Tarayıcıda Kod Dene sayfasında) tek başına çalıştır.
2. Varsayma, Konsola Yazdır: "Bu değişkenin içinde kesin 10 vardır" diye düşünmek yerine, işlemden hemen önce değişkenin değerini ve tipini ekrana yazdırarak gözünle doğrula.
3. Tek Seferde Tek Değişiklik Yap: Aynı anda hem HTML yapısını, hem CSS sınıfını hem de JavaScript fonksiyonunu değiştirirsen sorunun hangisinden kaynaklandığını bulamazsın.
4. Sınır Değerleri Test Et: Kodun normal bir girdide çalıştığında hemen bırakma; boş girdi (`""`), sıfır (`0`) veya beklenmeyen bir değer girildiğinde nasıl davrandığını da kontrol et.

Sıkça Sorulan Sorular (SSS)

Hata mesajları İngilizce olduğu için anlamakta zorlanıyorum, ne yapmalıyım? +

Hata mesajının tamamını ezberlemene gerek yoktur; yalnızca üç bilgiye odaklan: 1) Dosya adı ve satır numarası, 2) Hatanın türü (ör. SyntaxError, TypeError), 3) En sondaki kısa açıklama. Webino App'in 52 Yazılım Hatası ve Çözümü sözlüğünden Türkçe karşılıklarına anında bakabilirsin.

Bilgisayarıma program kurmadan bu örnekleri hemen deneyebilir miyim? +

Evet. Sol menüdeki Tarayıcıda Kod Dene laboratuvarını kullanarak HTML/CSS, JavaScript, Python ve SQL kodlarını hiçbir kurulum yapmadan doğrudan tarayıcında çalıştırabilirsin.