11 KiB
Bir kod editörü kullanma
Bu ders, web tabanlı bir kod editörü olan VSCode.dev kullanmanın temel bilgilerini kapsar. Bu editör sayesinde bilgisayarınıza herhangi bir şey yüklemeden kodunuzu değiştirebilir ve bir projeye katkıda bulunabilirsiniz.
Öğrenme hedefleri
Bu derste şunları öğreneceksiniz:
- Bir kod projesinde kod editörü kullanmak
- Sürüm kontrolü ile değişiklikleri takip etmek
- Geliştirme için editörü özelleştirmek
Ön Koşullar
Başlamadan önce GitHub ile bir hesap oluşturmanız gerekecek. Eğer henüz bir hesabınız yoksa GitHub adresine giderek bir hesap oluşturun.
Giriş
Bir kod editörü, program yazmak ve mevcut kod projeleriyle iş birliği yapmak için temel bir araçtır. Bir editörün temel özelliklerini ve nasıl kullanılacağını anladıktan sonra, bu bilgileri kod yazarken uygulayabilirsiniz.
VSCode.dev ile başlama
VSCode.dev, web üzerinde bir kod editörüdür. Bunu kullanmak için herhangi bir şey yüklemenize gerek yoktur; tıpkı başka bir web sitesini açar gibi kullanabilirsiniz. Editörü başlatmak için şu bağlantıyı açın: https://vscode.dev. Eğer GitHub hesabınıza giriş yapmadıysanız, giriş yapmanız veya yeni bir hesap oluşturmanız için yönlendirmeleri takip edin.
Yüklendikten sonra, aşağıdaki görsele benzer bir ekran görmelisiniz:
Soldan sağa doğru üç ana bölüm vardır:
- Aktivite çubuğu, büyüteç 🔎, dişli ⚙️ gibi bazı simgeleri içerir.
- Varsayılan olarak Gezgin (Explorer) olan ve yan çubuk olarak adlandırılan genişletilmiş aktivite çubuğu.
- Ve son olarak, sağdaki kod alanı.
Her bir simgeye tıklayarak farklı bir menü görüntüleyebilirsiniz. İşiniz bittiğinde, Gezgin simgesine tıklayarak başladığınız yere geri dönün.
Kod oluşturmaya veya mevcut kodu değiştirmeye başladığınızda, bu işlem sağdaki en büyük alanda gerçekleşir. Bu alanı mevcut kodu görüntülemek için de kullanacaksınız, bunu bir sonraki adımda yapacaksınız.
Bir GitHub deposu açma
İlk olarak, bir GitHub deposu açmanız gerekecek. Bir depo açmanın birden fazla yolu vardır. Bu bölümde, değişiklik yapmaya başlamak için bir depo açmanın iki farklı yolunu göreceksiniz.
1. Editör ile
Uzaktan bir depo açmak için editörü kullanın. VSCode.dev adresine giderseniz, "Open Remote Repository" düğmesini göreceksiniz:
Komut paletini de kullanabilirsiniz. Komut paleti, bir komut veya eylemin parçası olan herhangi bir kelimeyi yazarak doğru komutu bulabileceğiniz bir giriş kutusudur. Sol üstteki menüyü kullanarak View seçeneğini seçin ve ardından Command Palette seçeneğini seçin veya şu klavye kısayolunu kullanın: Ctrl-Shift-P (MacOS'ta Command-Shift-P).
Menü açıldığında, open remote repository yazın ve ardından ilk seçeneği seçin. Katıldığınız veya yakın zamanda açtığınız birden fazla depo görüntülenecektir. Ayrıca tam bir GitHub URL'si kullanarak bir depo seçebilirsiniz. Aşağıdaki URL'yi kutuya yapıştırın:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Başarılı olursa, bu depodaki tüm dosyaları metin editöründe yüklü olarak göreceksiniz.
2. URL kullanarak
Bir depo yüklemek için doğrudan bir URL de kullanabilirsiniz. Örneğin, mevcut depo için tam URL https://github.com/microsoft/Web-Dev-For-Beginners şeklindedir, ancak GitHub alan adını VSCode.dev/github ile değiştirerek depoyu doğrudan yükleyebilirsiniz. Ortaya çıkan URL şu şekilde olur: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Dosyaları düzenleme
Depoyu tarayıcıda veya vscode.dev üzerinde açtıktan sonra, bir sonraki adım projeyi güncellemek veya değişiklikler yapmaktır.
1. Yeni bir dosya oluşturma
Yeni bir dosyayı mevcut bir klasör içinde veya kök dizinde/klasörde oluşturabilirsiniz. Yeni bir dosya oluşturmak için dosyanın kaydedileceği konumu/dizini açın ve aktivite çubuğundaki 'Yeni dosya ...' simgesini seçin, bir ad verin ve enter tuşuna basın.
2. Depodaki bir dosyayı düzenleme ve kaydetme
Vscode.dev, projenizde hızlı güncellemeler yapmak istediğinizde herhangi bir yazılımı yerel olarak yüklemeden kullanışlıdır. Kodunuzu güncellemek için, aktivite çubuğunda bulunan 'Gezgin' simgesine tıklayın ve depodaki dosya ve klasörleri görüntüleyin. Bir dosya seçin, kod alanında açın, değişikliklerinizi yapın ve kaydedin.
Projenizi güncellemeyi bitirdiğinizde, depoya yaptığınız tüm yeni değişiklikleri içeren source control simgesini seçin.
Projenize yaptığınız değişiklikleri görüntülemek için genişletilmiş aktivite çubuğundaki Changes klasöründeki dosyaları seçin. Bu, dosyada yaptığınız değişiklikleri görsel olarak görebileceğiniz bir 'Çalışma Ağacı' (Working Tree) açacaktır. Kırmızı, projeden bir çıkarımı, yeşil ise bir eklemeyi ifade eder.
Yaptığınız değişikliklerden memnunsanız, Changes klasörünün üzerine gelin ve değişiklikleri sahnelemek için + düğmesine tıklayın. Sahneleme, değişikliklerinizi GitHub'a göndermeye hazırlamak anlamına gelir.
Ancak bazı değişikliklerden memnun değilseniz ve bunları iptal etmek istiyorsanız, Changes klasörünün üzerine gelin ve geri al simgesini seçin.
Ardından, bir commit mesajı yazın (Projeye yaptığınız değişikliğin açıklaması), onay simgesine tıklayarak değişikliklerinizi gönderin ve yükleyin.
Projenizde çalışmayı bitirdiğinizde, sol üstteki hamburger menü simgesini seçerek github.com'daki depoya geri dönün.
Uzantıları kullanma
VSCode'a uzantılar yüklemek, editörünüzde yeni özellikler eklemenize ve geliştirme ortamı seçeneklerini özelleştirmenize olanak tanır. Bu uzantılar, birden fazla programlama dili için destek eklemenize yardımcı olur ve genellikle genel uzantılar veya dil tabanlı uzantılar olarak sınıflandırılır.
Mevcut tüm uzantıların listesini görüntülemek için, aktivite çubuğundaki Uzantılar simgesine tıklayın ve 'Marketplace'teki Uzantıları Ara' etiketli metin alanına uzantının adını yazmaya başlayın. Her bir uzantı için uzantı adı, yayıncının adı, bir cümlelik açıklama, indirme sayısı ve yıldız derecelendirmesi görüntülenir.
Ayrıca, daha önce yüklenmiş tüm uzantıları Yüklü klasöründe, çoğu geliştirici tarafından kullanılan popüler uzantıları Popüler klasöründe ve aynı çalışma alanındaki kullanıcılar veya yakın zamanda açtığınız dosyalara dayalı olarak sizin için önerilen uzantıları Önerilen klasöründe görüntüleyebilirsiniz.
1. Uzantıları yükleme
Bir uzantıyı yüklemek için, arama alanına uzantının adını yazın ve genişletilmiş aktivite çubuğunda göründüğünde üzerine tıklayarak kod alanında uzantı hakkında ek bilgi görüntüleyin.
Uzantıyı yüklemek için genişletilmiş aktivite çubuğundaki mavi yükleme düğmesine veya kod alanında uzantıyı seçtiğinizde görünen yükleme düğmesine tıklayın.
2. Uzantıları özelleştirme
Uzantıyı yükledikten sonra, davranışını değiştirmek ve tercihleriniz doğrultusunda özelleştirmek isteyebilirsiniz. Bunu yapmak için Uzantılar simgesini seçin ve bu kez uzantınız Yüklü klasöründe görünecektir. Dişli simgesine tıklayın ve Uzantı Ayarları seçeneğine gidin.
3. Uzantıları yönetme
Uzantıyı yükledikten ve kullandıktan sonra, vscode.dev farklı ihtiyaçlara göre uzantınızı yönetmek için seçenekler sunar. Örneğin, şunları yapabilirsiniz:
-
Devre Dışı Bırak: (Bir uzantıyı geçici olarak devre dışı bırakabilirsiniz, ancak tamamen kaldırmak istemiyorsanız)
Genişletilmiş aktivite çubuğunda yüklü uzantıyı seçin > Dişli simgesine tıklayın > 'Devre Dışı Bırak' veya 'Devre Dışı Bırak (Çalışma Alanı)' seçeneğini seçin VEYA Uzantıyı kod alanında açın ve mavi Devre Dışı Bırak düğmesine tıklayın.
-
Kaldır: Genişletilmiş aktivite çubuğunda yüklü uzantıyı seçin > Dişli simgesine tıklayın > 'Kaldır' seçeneğini seçin VEYA Uzantıyı kod alanında açın ve mavi Kaldır düğmesine tıklayın.
Ödev
Vscode.dev kullanarak bir özgeçmiş web sitesi oluşturun
Gözden Geçirme ve Kendi Kendine Çalışma
VSCode.dev ve diğer özellikleri hakkında daha fazla bilgi edinin.
Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlama veya yanlış yorumlamalardan sorumlu değiliz.