VS Code İçin İşe Yarar 5 Eklenti

VS Code tek başına iyi bir editör ama eklentilerle çok daha güçlü bir geliştirme ortamına dönüşüyor. İşte yeni başlayanlar için seçtiğimiz 5 eklenti.

Okuma süresi: 9–11 dakika Seviye: Başlangıç Konu: VS Code eklentileri, verimlilik

İçindekiler

1. Eklenti (extension) nedir?
2. 1. Live Server
3. 2. Prettier - Code formatter
4. 3. Python (Microsoft)
5. 4. GitLens
6. 5. Error Lens
7. Bonus eklentiler
8. Eklenti kullanırken dikkat edilecekler
9. Sık sorulan sorular

1. Eklenti (extension) nedir?

Eklenti, VS Code'a yeni özellikler kazandıran küçük programlardır. Renk teması, kod tamamlama, hata gösterme, Git desteği gibi yüzlerce işlevi eklentilerle ekleyebilirsin.

Eklenti nasıl kurulur?

1. VS Code'u aç.
2. Sol taraftaki Extensions simgesine tıkla veya Ctrl + Shift + X tuşlarına bas.
3. Arama kutusuna eklentinin adını yaz.
4. Doğru eklentiyi seç ve Install düğmesine bas.

İpucu: Eklenti seçerken yayıncı adına, indirme sayısına ve yorumlara bak. Bilinmeyen kaynaklı, az indirilmiş eklentilere temkinli yaklaş; eklentiler kodunu okuyabilir.

2. 1. Live Server

Ne işe yarar? HTML, CSS ve JavaScript dosyalarını yerel bir sunucuda açar ve dosyayı kaydettiğinde tarayıcıyı otomatik yeniler.

Eklentisiz kullanımda her değişiklikten sonra tarayıcıyı elle yenilemek zorunda kalırsın. Live Server ile kodu yazarsın, kaydedersin, sonuç hemen görünür.

Nasıl kullanılır?

1. Eklentiyi ara: Live Server (yayıncı: Ritwick Dey).
2. Bir HTML dosyası aç.
3. Sağ alttaki durum çubuğunda Go Live düğmesine tıkla.
4. Tarayıcıda sayfan açılır; kod değiştikçe sayfa güncellenir.

Kimler için? Web geliştirmeye yeni başlayan herkes için ilk kurulacak eklentilerden biridir.

3. 2. Prettier - Code formatter

Ne işe yarar? Kodunu otomatik olarak düzenli ve okunaklı hâle getirir. Girinti, boşluk, tırnak gibi şeyleri tek tuşta düzeltir.

Önce/sonra:

// Önce
function topla(a,b){return a+b}
const x = {ad:'Ali',yas:15}

// Sonra (Prettier ile)
function topla(a, b) {
  return a + b;
}
const x = { ad: "Ali", yas: 15 };

Kurulum ve ayar:

1. Eklentiyi ara: Prettier - Code formatter.
2. Ayarları aç: Ctrl + ,
3. Arama kutusuna format on save yaz ve Editor: Format On Save seçeneğini işaretle.
4. Varsayılan biçimlendiriciyi Prettier olarak seç (Editor: Default Formatter).

Artık dosyayı kaydettiğinde kod kendiliğinden düzelir. HTML, CSS, JavaScript, JSON, Markdown gibi birçok dosya türünü destekler.

4. 3. Python (Microsoft)

Ne işe yarar? Python ile çalışırken VS Code'u gerçek bir Python editörüne dönüştürür. Kod tamamlama, hata denetimi, çalıştırma ve hata ayıklama (debug) desteği sağlar.

Neler sunar?

• Yazarken kod önerileri
• Tek tuşla çalıştırma (sağ üstteki oynat düğmesi)
• Hata ayıklama: satıra durma noktası koyup değişkenleri izleme
• Sanal ortam (virtual environment) ve yorumlayıcı seçimi

Kurulum:

1. Önce bilgisayarında Python'un kurulu olduğundan emin ol.
2. Eklentiyi ara: Python (yayıncı: Microsoft).
3. Bir .py dosyası aç ve alt köşedeki yorumlayıcı seçimini kontrol et.

Python öğreniyorsan bu eklenti neredeyse zorunludur.

5. 4. GitLens

Ne işe yarar? VS Code'un Git desteğini güçlendirir. Bir kod satırını kimin, ne zaman ve neden değiştirdiğini görmeni sağlar.

Ne işine yarar?

• Satırın yanında son değişikliği yapan kişiyi ve tarihi gösterir.
• Dosya ve satır geçmişini kolayca incelemeni sağlar.
• İki sürümü karşılaştırmayı kolaylaştırır.

Kimler için? GitHub kullanmaya başlayanlar ve ekip projelerinde çalışanlar için çok değerli. Tek başına projelerde de "bu satırı neden böyle yazmıştım?" sorusunun cevabını bulursun.

Not: Bazı gelişmiş özellikleri ücretli olabilir; temel özellikler başlangıç için yeterlidir.

6. 5. Error Lens

Ne işe yarar? Hataları ve uyarıları, kod satırının hemen yanında renkli olarak gösterir. Normalde hatalı satır altı çizili görünür ve mesajı görmek için fareyle üzerine gelmen gerekir. Error Lens bu mesajı doğrudan satıra yazar.

print("Merhaba"   # ← Error Lens: '(' was never closed

Faydaları:

• Hatayı yazarken anında fark edersin.
• Hata mesajını okumak için ayrıca bir sekme açman gerekmez.
• Yeni başlayanlar için hata mesajlarından öğrenmeyi kolaylaştırır.

İpucu: Ekran çok kalabalıksa ayarlardan yalnızca hataları (uyarıları değil) göstermeyi seçebilirsin.

7. Bonus eklentiler

Beş eklentiyi kurduktan sonra isteyebileceğin birkaç ek öneri:

8. Eklenti kullanırken dikkat edilecekler

• Çok eklenti kurma. Her eklenti biraz kaynak tüketir; gereksizleri kapat veya kaldır.
• Güvenilir yayıncıları seç. Doğrulanmış yayıncı rozetine ve indirme sayısına bak.
• İzinleri düşün. Eklentiler dosyalarına erişebilir; bilmediğin eklentiyi kurma.
• Güncel tut. Güncellemeler hata ve güvenlik düzeltmeleri içerir.
• Eklentiyi kapatabilirsin. Silmeden geçici olarak Disable seçeneğini kullanabilirsin.

9. Sık sorulan sorular

Eklentiler ücretsiz mi?

Çoğu ücretsizdir. Bazılarının ücretli özellikleri olabilir; kurmadan önce açıklamayı oku.

Eklenti kurunca bilgisayar yavaşlar mı?

Çok sayıda ağır eklenti VS Code'u yavaşlatabilir. Kullanmadıklarını kapat.

Eklentiyi nasıl kaldırırım?

Extensions panelinde eklentiyi bul, dişli simgesine tıkla ve Uninstall seç.

Eklentiler tüm bilgisayarlarda aynı mı olur?

VS Code'da hesabınla Settings Sync özelliğini açarak eklentilerini ve ayarlarını farklı bilgisayarlarla eşitleyebilirsin.

Özet

Kendini dene

• Extensions panelini aç (Ctrl + Shift + X).
• Live Server'ı kur ve bir HTML dosyasını Go Live ile aç.
• Prettier'ı kur ve Format On Save'i etkinleştir.
• Bilerek bir hata yap ve Error Lens'in nasıl gösterdiğine bak.
• Kullanmadığın bir eklentiyi devre dışı bırak.

Son söz: Doğru eklentiler, kod yazarken zaman kazandırır ve hata yapmayı azaltır. Ama az ve amaçlı eklentiyle çalışmak, çok ve gereksiz eklentiden daha iyidir. Bu beşiyle başlayıp ihtiyacın oldukça yenilerini ekle.

Bu yazı eğitim amaçlıdır. Ayrıntılar sürüme ve işletim sistemine göre farklılık gösterebilir.