İçeriğe geç

Visual Studio Code

VS Code, genişletilebilirliği ve desteklediği birçok dil sayesinde popüler bir kod editörüdür. Aşağıda, VS Code ile çalışmaya başlarken bilmeniz gereken temel bilgiler ve ipuçları yer almaktadır.

Visual Studio Code (VS Code) Başlangıç Rehberi

VS Code Nedir?

VS Code, Microsoft tarafından geliştirilen, ücretsiz, açık kaynaklı bir kod editörüdür. Web geliştirme, Python, C++, Java gibi birçok programlama dilini destekler ve geniş bir eklenti yelpazesi sunar.

Temel Özellikler

  • Syntax Highlighting: Kodunuzu daha okunabilir hale getiren renk kodlaması.
  • Code Completion: IntelliSense özelliği ile kod tamamlama ve parametre bilgisi sağlar.
  • Debugging: Hata ayıklama desteği ile uygulamanızı doğrudan VS Code’da test edebilirsiniz.
  • Version Control: Git entegrasyonu sayesinde, kod değişikliklerinizi takip edebilir ve yönetebilirsiniz.
  • Extensions: Farklı programlama dilleri, framework’ler ve araçlar için binlerce eklentiye erişim.

Kurulum ve İlk Adımlar

  1. VS Code’u İndirin ve Kurun:

    • VS Code resmi web sitesi üzerinden işletim sisteminize uygun sürümü indirin ve kurulum talimatlarını takip edin.
  2. Kullanıcı Arayüzü ile Tanışın:

    • Explorer: Dosyalarınıza ve klasörlerinize erişim sağlar.
    • Search: Projenizdeki dosyalarda arama yapmanıza olanak tanır.
    • Source Control: Git reposuyla çalışmanızı sağlar.
    • Debug: Uygulamanızı hata ayıklama seçenekleri sunar.
    • Extensions: Eklentileri aramanızı, görüntülemenizi ve yönetmenizi sağlar.
  3. Bir Proje Açın veya Oluşturun:

    • VS Code’u açın ve “File > Open Folder” seçeneğini kullanarak mevcut bir projeyi açın veya yeni bir klasör oluşturun.

Temel Kullanım ve İpuçları

  • Eklenti Yükleme:

    • Sol taraftaki eklentiler simgesine tıklayarak veya Ctrl+P (Cmd+P on macOS) kısayolunu kullanarak eklenti pazarına ulaşın ve ihtiyacınız olan eklentiyi arayıp yükleyin.
  • Kısayollar:

    • Ctrl+P: Hızlı dosya açma.
    • Ctrl+Shift+P: Komut paletini açar, buradan VS Code’un tüm fonksiyonlarına erişebilirsiniz.
    • Ctrl+/-: Kodunuzu yakınlaştırın veya uzaklaştırın.
    • Ctrl+Shift+F: Tüm dosyalarda arama yapın.
  • Tema ve Görünüm Ayarları:

    • Ctrl+K Ctrl+T kısayolları ile tema seçim menüsünü açabilir ve editörünüzün görünümünü kişiselleştirebilirsiniz.
  • Entegre Terminal:

    • `Ctrl+“ kısayolu ile VS Code içerisinde terminali açabilir, komutları buradan çalıştırabilirsiniz.

İleri Seviye İpuçları

  • Çoklu Seçim ve Düzenleme:

    • Ctrl+D kısayolu ile benzer metinleri seçerek, aynı anda çoklu düzenleme yapabilirsiniz.
  • Kod Parçacıkları (Snippets):

    • Sık kullanılan kod bloklarını kolayca eklemek için kod parçacıklıklarından yararlanabilirsiniz. Özel snippet’lar oluşturabilir veya eklentiler aracılığıyla hazır snippet’lara erişebilirsiniz.
  • Dosya ve Klasör İşlemleri:

    • Explorer bölümünde dosya ve klasörleri sağ tıklayarak çeşitli işlemler (yeniden adlandırma, silme, yeni dosya/klasör oluşturma) gerçekleştirebilirsiniz.
  • Git Entegrasyonu ve Kullanımı:

    • Source Control bölümünden Git işlemlerinizi (commit, push, pull, branch oluşturma ve değiştirme) doğrudan VS Code içinden yönetebilirsiniz.
  • Debugging:

    • Hata ayıklama için, debug panelini kullanarak breakpoint’ler ekleyebilir, kodunuzun adım adım çalıştırılmasını izleyebilir ve değişken değerlerini kontrol edebilirsiniz.
  • Eklenti Önerileri:

    • Prettier: Kodunuzu otomatik olarak formatlar.
    • ESLint: JavaScript kodunuzu analiz eder ve hataları veya stil sorunlarını belirtir.
    • Live Server: HTML/CSS/JavaScript projeleri için yerel bir geliştirme sunucusu başlatır.
    • Python: Python geliştirme için gerekli araçları ve özellikleri sağlar.
  • Ayarlar ve Kişiselleştirme:

    • VS Code’un ayarlar menüsü (File > Preferences > Settings), editörünüzü tam olarak istediğiniz gibi yapılandırmanıza olanak tanır. Font büyüklüğünden tema rengine, klavye kısayollarından özellik ayarlarına kadar pek çok detayı kişiselleştirebilirsiniz.

Eklenti Önerileri

VS Code extensions web sitesi üzerinden tüm eklentileri inceleyebilir ve kurabilirsiniz.

Benim kullandığım ve önerebileceğim bazı temel eklentiler:

  • Auto Rename Tag: Eşleştirilmiş HTML/XML etiketini otomatik olarak yeniden adlandırın. Link
  • Git Graph: Deponuzun Git Grafiği’ni görüntüleyin ve Git eylemlerini grafikten kolayca gerçekleştirin. İstediğiniz gibi görünecek şekilde yapılandırılabilir! Link
  • HTML CSS Support: Visual Studio Code için HTML kimliği ve sınıf özniteliğinin tamamlanması. Link
  • Live Preview: Web projelerinizi önizlemeniz için yerel bir sunucuyu barındıran bir uzantı! Link
  • Live Server: Statik ve dinamik sayfalar için canlı yeniden yükleme özelliğine sahip yerel bir geliştirme sunucusu başlatın. Link
  • Tailwind CSS IntelliSense: Tailwind CSS IntelliSense, Visual Studio Code kullanıcılarına otomatik tamamlama, sözdizimi vurgulama ve satır ekleme gibi gelişmiş özellikler sağlayarak Tailwind geliştirme deneyimini geliştirir. Link

Elbette, işte VS Code için temel kısayolların kısa açıklamalarıyla birlikte bir Markdown tablosu:


VS Code Temel Kısayolları

Bu tablo, VS Code kullanırken sıkça ihtiyaç duyacağınız temel kısayolları içermektedir. Daha verimli bir çalışma ortamı için bu kısayolları öğrenmek ve alışkanlık haline getirmek önemlidir. Kısayollar, zaman kazandırmanın yanı sıra, kod yazım sürecinizi daha akıcı hale getirebilir.

KısayolAçıklama
Ctrl + PHızlı dosya açma penceresini açar.
Ctrl + Shift + PKomut paletini açar.
Ctrl + \Yeni bir editör bölmesi açar.
Ctrl + BKenar çubuğunu gösterir/gizler.
Ctrl + /Satırı yorumlar/yorumu kaldırır.
Ctrl + Shift + KSeçili satırı siler.
Ctrl + ] / Ctrl + [Satırı girintiler/girintiyi azaltır.
Ctrl + FDosya içinde arama yapar.
Ctrl + HDosya içinde değiştirme yapar.
Ctrl + Shift + FTüm dosyalarda arama yapar.
Ctrl + Shift + HTüm dosyalarda değiştirme yapar.
Alt + Up / Alt + DownSeçili satırı veya satırları yukarı/aşağı taşır.
Ctrl + SpaceOtomatik tamamlamayı tetikler.
F12Tanıma git.
Alt + F12Tanımı önizler.
Ctrl + GBelirli bir satıra git.
Ctrl + Shift + \Eşleşen paranteze git.
Ctrl + K Ctrl + CAçık dosyanın yolunu kopyalar.
Ctrl + Shift + VMarkdown önizlemesini açar.
Ctrl + Shift + NYeni pencere açar.
Ctrl + Shift + WMevcut pencereyi kapatır.
Ctrl + ,Ayarlar sayfasını açar.
Ctrl + Shift + ODosya içinde sembollere git.