34 KiB
Bir Kod Editörü Kullanmak: VSCode.dev'i Ustalaşmak
Matrix filminde Neo'nun dijital dünyaya erişmek için devasa bir bilgisayar terminaline bağlanması gerektiğini hatırlıyor musunuz? Günümüzün web geliştirme araçları tam tersi bir hikaye sunuyor – her yerden erişilebilen inanılmaz güçlü yetenekler. VSCode.dev, internet bağlantısı olan herhangi bir cihazda profesyonel geliştirme araçlarını sunan tarayıcı tabanlı bir kod editörüdür.
Tıpkı matbaanın kitapları sadece manastırlardaki yazıcılara değil, herkese erişilebilir hale getirmesi gibi, VSCode.dev de kod yazmayı demokratikleştiriyor. Bir kütüphane bilgisayarında, bir okul laboratuvarında veya tarayıcı erişiminizin olduğu herhangi bir yerde projeler üzerinde çalışabilirsiniz. Kurulum yok, "Kendi özel ayarlarıma ihtiyacım var" sınırlamaları yok.
Bu dersin sonunda, VSCode.dev'de nasıl gezineceğinizi, GitHub depolarını doğrudan tarayıcınızda nasıl açacağınızı ve sürüm kontrolü için Git'i nasıl kullanacağınızı anlayacaksınız – profesyonel geliştiricilerin günlük olarak güvendiği tüm beceriler.
⚡ Sonraki 5 Dakikada Yapabilecekleriniz
Yoğun Geliştiriciler İçin Hızlı Başlangıç Yolu
flowchart LR
A[⚡ 5 minutes] --> B[Visit vscode.dev]
B --> C[Connect GitHub account]
C --> D[Open any repository]
D --> E[Start editing immediately]
- 1. Dakika: vscode.dev adresine gidin - kurulum gerekmez
- 2. Dakika: Depolarınızı bağlamak için GitHub ile oturum açın
- 3. Dakika: URL hilesini deneyin: herhangi bir depo URL'sinde
github.com'uvscode.dev/githubile değiştirin - 4. Dakika: Yeni bir dosya oluşturun ve sözdizimi vurgulamasının otomatik olarak çalışmasını izleyin
- 5. Dakika: Bir değişiklik yapın ve Kaynak Kontrol paneli aracılığıyla kaydedin
Hızlı Test URL'si:
# Transform this:
github.com/microsoft/Web-Dev-For-Beginners
# Into this:
vscode.dev/github/microsoft/Web-Dev-For-Beginners
Neden Önemli: 5 dakika içinde, profesyonel araçlarla her yerde kod yazmanın özgürlüğünü deneyimleyeceksiniz. Bu, gelişimin geleceğini temsil ediyor - erişilebilir, güçlü ve anında.
🗺️ Bulut Tabanlı Geliştirme Yolculuğunuz
journey
title From Local Setup to Cloud Development Mastery
section Understanding the Platform
Discover web-based editing: 4: You
Connect to GitHub ecosystem: 6: You
Master interface navigation: 7: You
section File Management Skills
Create and organize files: 5: You
Edit with syntax highlighting: 7: You
Navigate project structures: 8: You
section Version Control Mastery
Understand Git integration: 6: You
Practice commit workflows: 8: You
Master collaboration patterns: 9: You
section Professional Customization
Install powerful extensions: 7: You
Configure development environment: 8: You
Build personal workflows: 9: You
Yolculuğunuzun Hedefi: Bu dersin sonunda, büyük teknoloji şirketlerindeki geliştiriciler tarafından kullanılan aynı araçlarla herhangi bir cihazdan çalışmanıza olanak tanıyan profesyonel bir bulut geliştirme ortamında ustalaşmış olacaksınız.
Öğrenecekleriniz
Bu dersi birlikte tamamladıktan sonra şunları yapabileceksiniz:
- VSCode.dev'de kaybolmadan ihtiyacınız olan her şeyi bulabileceğiniz bir şekilde gezinmek
- Herhangi bir GitHub deposunu tarayıcınızda açmak ve hemen düzenlemeye başlamak (bu gerçekten büyüleyici!)
- Git'i kullanarak değişikliklerinizi takip etmek ve ilerlemenizi bir profesyonel gibi kaydetmek
- Kod yazmayı daha hızlı ve eğlenceli hale getiren uzantılarla editörünüzü güçlendirmek
- Proje dosyalarını güvenle oluşturmak ve düzenlemek
İhtiyacınız Olanlar
Gereksinimler oldukça basit:
- Ücretsiz bir GitHub hesabı (gerekirse oluşturmanız için size rehberlik edeceğiz)
- Web tarayıcıları hakkında temel bilgi
- GitHub Temelleri dersi faydalı bir arka plan sağlar, ancak zorunlu değildir
💡 GitHub'da yeni misiniz? Bir hesap oluşturmak ücretsizdir ve sadece birkaç dakikanızı alır. Tıpkı bir kütüphane kartının dünya çapında kitaplara erişim sağlaması gibi, bir GitHub hesabı da internet üzerindeki kod depolarına kapı açar.
🧠 Bulut Geliştirme Ekosistemi Genel Bakış
mindmap
root((VSCode.dev Mastery))
Platform Benefits
Accessibility
Device Independence
No Installation Required
Instant Updates
Universal Access
Integration
GitHub Connection
Repository Sync
Settings Persistence
Collaboration Ready
Development Workflow
File Management
Project Structure
Syntax Highlighting
Multi-tab Editing
Auto-save Features
Version Control
Git Integration
Commit Workflows
Branch Management
Change Tracking
Customization Power
Extensions Ecosystem
Productivity Tools
Language Support
Theme Options
Custom Shortcuts
Environment Setup
Personal Preferences
Workspace Configuration
Tool Integration
Workflow Optimization
Professional Skills
Industry Standards
Version Control
Code Quality
Collaboration
Documentation
Career Readiness
Remote Work
Cloud Development
Team Projects
Open Source
Temel İlke: Bulut tabanlı geliştirme ortamları, profesyonel düzeyde araçlar sağlayarak kodlamanın geleceğini temsil eder – erişilebilir, iş birliğine açık ve platformdan bağımsız.
Web Tabanlı Kod Editörleri Neden Önemlidir?
İnternet öncesinde, farklı üniversitelerdeki bilim insanları araştırmalarını kolayca paylaşamazlardı. Sonra 1960'larda ARPANET geldi ve bilgisayarları mesafeler boyunca birbirine bağladı. Web tabanlı kod editörleri de aynı prensibi takip eder – güçlü araçları fiziksel konumunuzdan veya cihazınızdan bağımsız olarak erişilebilir hale getirir.
Bir kod editörü, kod dosyalarını yazdığınız, düzenlediğiniz ve organize ettiğiniz geliştirme çalışma alanınızdır. Basit metin editörlerinden farklı olarak, profesyonel kod editörleri sözdizimi vurgulama, hata tespiti ve proje yönetimi özellikleri sunar.
VSCode.dev bu özellikleri tarayıcınıza getiriyor:
Web tabanlı düzenlemenin avantajları:
| Özellik | Açıklama | Pratik Faydası |
|---|---|---|
| Platform Bağımsızlığı | Tarayıcıya sahip herhangi bir cihazda çalışır | Farklı bilgisayarlarda sorunsuz çalışın |
| Kurulum Gerekmez | Bir web URL'si üzerinden erişim | Yazılım kurulum kısıtlamalarını aşın |
| Otomatik Güncellemeler | Her zaman en son sürümde çalışır | Manuel güncelleme olmadan yeni özelliklere erişim |
| Depo Entegrasyonu | GitHub'a doğrudan bağlantı | Yerel dosya yönetimi olmadan kod düzenleyin |
Pratik sonuçlar:
- Farklı ortamlarda çalışma sürekliliği
- İşletim sisteminden bağımsız tutarlı arayüz
- Anında iş birliği yetenekleri
- Azaltılmış yerel depolama gereksinimleri
VSCode.dev'i Keşfetmek
Tıpkı Marie Curie'nin laboratuvarının nispeten basit bir alanda sofistike ekipmanlar içermesi gibi, VSCode.dev profesyonel geliştirme araçlarını bir tarayıcı arayüzüne sığdırır. Bu web uygulaması, masaüstü kod editörleriyle aynı temel işlevselliği sağlar.
Tarayıcınızda vscode.dev adresine giderek başlayın. Arayüz, indirme veya sistem kurulumu olmadan yüklenir – bulut bilişim ilkelerinin doğrudan bir uygulaması.
GitHub Hesabınızı Bağlama
Alexander Graham Bell'in telefonu uzak yerleri nasıl birbirine bağladıysa, GitHub hesabınızı bağlamak da VSCode.dev ile kod depolarınız arasında bir köprü kurar. GitHub ile oturum açmanız istendiğinde, bu bağlantıyı kabul etmeniz önerilir.
GitHub entegrasyonu şunları sağlar:
- Editör içinde depolarınıza doğrudan erişim
- Cihazlar arasında senkronize ayarlar ve uzantılar
- GitHub'a kaydetme iş akışının kolaylaştırılması
- Kişiselleştirilmiş geliştirme ortamı
Yeni Çalışma Alanınızı Tanımak
Her şey yüklendikten sonra, odaklanmanızı sağlayacak şekilde tasarlanmış, güzel ve temiz bir çalışma alanı göreceksiniz – kodunuza!
İşte mahallenizin turu:
- Etkinlik Çubuğu (soldaki şerit): Gezgini 📁, Aramayı 🔍, Kaynak Kontrolünü 🌿, Uzantıları 🧩 ve Ayarları ⚙️ içeren ana gezinme alanınız
- Kenar Çubuğu (yanındaki panel): Seçtiğiniz şeye bağlı olarak ilgili bilgileri gösterir
- Editör Alanı (ortadaki büyük alan): İşte sihrin gerçekleştiği yer – ana kodlama alanınız
Biraz keşif yapın:
- Bu Etkinlik Çubuğu simgelerine tıklayın ve her birinin ne yaptığını görün
- Kenar çubuğunun farklı bilgileri göstermek için nasıl güncellendiğine dikkat edin – oldukça havalı, değil mi?
- Gezgini görüntüleme (📁) muhtemelen en çok zaman geçireceğiniz yerdir, bu yüzden onunla rahat olun
flowchart TB
subgraph "VSCode.dev Interface Architecture"
A[Activity Bar] --> B[Explorer 📁]
A --> C[Search 🔍]
A --> D[Source Control 🌿]
A --> E[Extensions 🧩]
A --> F[Settings ⚙️]
B --> G[File Tree]
C --> H[Find & Replace]
D --> I[Git Status]
E --> J[Extension Marketplace]
F --> K[Configuration]
L[Sidebar] --> M[Context Panel]
N[Editor Area] --> O[Code Files]
P[Terminal/Output] --> Q[Command Line]
end
GitHub Depolarını Açmak
İnternet öncesinde, araştırmacılar belgeleri incelemek için fiziksel olarak kütüphanelere gitmek zorundaydı. GitHub depoları benzer şekilde çalışır – uzaktan depolanan kod koleksiyonlarıdır. VSCode.dev, depoları yerel makinenize indirme adımını ortadan kaldırarak doğrudan düzenleme imkanı sunar.
Bu özellik, herhangi bir genel depoya anında erişim sağlar; görüntüleme, düzenleme veya katkıda bulunma için. İşte depoları açmanın iki yöntemi:
Yöntem 1: Tıklama Yöntemi
Bu yöntem, VSCode.dev'de yeni başlıyorsanız ve belirli bir depoyu açmak istiyorsanız idealdir. Basit ve başlangıç dostudur:
Nasıl yapılır:
-
vscode.dev adresine gidin (henüz orada değilseniz)
-
Karşılama ekranında "Open Remote Repository" (Uzak Depo Aç) düğmesini arayın ve tıklayın
-
Herhangi bir GitHub depo URL'sini yapıştırın (bunu deneyin:
https://github.com/microsoft/Web-Dev-For-Beginners) -
Enter tuşuna basın ve sihri izleyin!
Profesyonel ipucu - Komut Paleti kısayolu:
Kendinizi bir kodlama sihirbazı gibi hissetmek ister misiniz? Şu klavye kısayolunu deneyin: Ctrl+Shift+P (veya Mac'te Cmd+Shift+P) ile Komut Paletini açın:
Komut Paleti, yapabileceğiniz her şey için bir arama motoru gibidir:
- "open remote" yazın ve sizin için depo açıcıyı bulacaktır
- Daha önce açtığınız depoları hatırlar (çok kullanışlı!)
- Alıştıktan sonra, kendinizi ışık hızında kod yazıyormuş gibi hissedeceksiniz
- Bu, VSCode.dev'in "Hey Siri"si ama kodlama için
Yöntem 2: URL Değiştirme Tekniği
HTTP ve HTTPS'in aynı alan yapısını korurken farklı protokoller kullanması gibi, VSCode.dev de GitHub'ın adresleme sistemini yansıtan bir URL deseni kullanır. Herhangi bir GitHub depo URL'si, doğrudan VSCode.dev'de açılacak şekilde değiştirilebilir.
URL dönüştürme deseni:
| Depo Türü | GitHub URL'si | VSCode.dev URL'si |
|---|---|---|
| Genel Depo | github.com/microsoft/Web-Dev-For-Beginners |
vscode.dev/github/microsoft/Web-Dev-For-Beginners |
| Kişisel Proje | github.com/your-username/my-project |
vscode.dev/github/your-username/my-project |
| Herhangi Bir Erişilebilir Depo | github.com/their-username/awesome-repo |
vscode.dev/github/their-username/awesome-repo |
Uygulama:
github.com'uvscode.dev/githubile değiştirin- Diğer tüm URL bileşenlerini değiştirmeden koruyun
- Herhangi bir genel erişilebilir depo ile çalışır
- Anında düzenleme erişimi sağlar
💡 Hayat değiştiren ipucu: Favori depolarınızın VSCode.dev sürümlerini yer imlerine ekleyin. "Portföyümü Düzenle" ve "Belgeleri Düzelt" gibi doğrudan düzenleme moduna götüren yer imlerim var!
Hangi yöntemi kullanmalısınız?
- Arayüz yöntemi: Keşif yaparken veya tam depo adlarını hatırlayamadığınızda harika
- URL hilesi: Nereye gideceğinizi tam olarak bildiğinizde ışık hızında erişim için mükemmel
🎯 Pedagojik Kontrol: Bulut Geliştirme Erişimi
Duraklayın ve Düşünün: Kod depolarına bir web tarayıcısı aracılığıyla erişmenin iki yöntemini öğrendiniz. Bu, geliştirme şeklinin temel bir değişimini temsil eder.
Hızlı Öz Değerlendirme:
- Web tabanlı düzenlemenin geleneksel "geliştirme ortamı kurulumunu" neden ortadan kaldırdığını açıklayabilir misiniz?
- URL değiştirme tekniğinin yerel git klonlamasına göre sağladığı avantajlar nelerdir?
- Bu yaklaşım, açık kaynak projelerine katkıda bulunma şeklinizi nasıl değiştirebilir?
Gerçek Dünya Bağlantısı: GitHub, GitLab ve Replit gibi büyük şirketler, geliştirme platformlarını bu bulut öncelikli ilkeler etrafında inşa etmiştir. Dünya çapındaki profesyonel geliştirme ekipleri tarafından kullanılan aynı iş akışlarını öğreniyorsunuz.
Zorluk Sorusu: Bulut tabanlı geliştirme, kodlamanın okullarda öğretilme şeklini nasıl değiştirebilir? Cihaz gereksinimlerini, yazılım yönetimini ve iş birliği olanaklarını düşünün.
Dosyalar ve Projelerle Çalışmak
Artık bir depo açtığınıza göre, hadi bir şeyler oluşturmaya başlayalım! VSCode.dev, kod dosyalarınızı oluşturmak, düzenlemek ve organize etmek için ihtiyacınız olan her şeyi size sunar. Bunu dijital atölyeniz olarak düşünün – her araç tam da ihtiyacınız olan yerde.
Günlük kodlama iş akışınızın çoğunu oluşturacak temel görevleri inceleyelim.
Yeni Dosyalar Oluşturmak
Bir mimarın ofisinde planları düzenlemesi gibi, VSCode.dev'de dosya oluşturma da yapılandırılmış bir yaklaşımı takip eder. Sistem, tüm standart web geliştirme dosya türlerini destekler.
Dosya oluşturma süreci:
- Gezgindeki hedef klasöre gidin
- Klasör adının üzerine gelerek "Yeni Dosya" simgesini (📄+) açın
- Uygun uzantıyı içeren dosya adını girin (
style.css,script.js,index.html) - Dosyayı oluşturmak için Enter tuşuna basın
Adlandırma kuralları:
- Dosyanın amacını belirten açıklayıcı adlar kullanın
- Doğru sözdizimi vurgulaması için dosya uzantılarını ekleyin
- Projeler boyunca tutarlı adlandırma desenleri izleyin
- Boşluk yerine küçük harfler ve tireler kullanın
Dosyaları Düzenlemek ve Kaydetmek
Asıl eğlence burada başlıyor! VSCode.dev'in editörü, kod yazmayı pürüzsüz ve sezgisel hale getiren birçok kullanışlı özellikle doludur. Bu, kod için gerçekten akıllı bir yazma asistanına sahip olmak gibidir.
Düzenleme iş akışınız:
- Gezginde herhangi bir dosyaya tıklayarak ana alanda açın
- Yazmaya başlayın ve VSCode.dev'in renkler, öneriler ve hata tespiti ile size nasıl yardımcı olduğunu izleyin
- Çalışmanızı Ctrl+S (Windows/Linux) veya Cmd+S (Mac) ile kaydedin – ancak otomatik kaydetme de mevcut!
Kod yazarken olan harika şeyler:
- Kodunuz güzelce renklendirilir, böylece okunması kolaylaşır
- VSCode.dev yazarken size önerilerde bulunur (otomatik düzeltme gibi, ama çok daha akıllı)
- Hataları ve yazım yanlışlarını kaydetmeden önce yakalar
- Bir tarayıcıdaki sekmeler gibi birden fazla dosyayı açık tutabilirsiniz
- Her şey arka planda otomatik olarak kaydedilir
⚠️ Hızlı ipucu: Otomatik kaydetme işinizi garanti altına alsa da, Ctrl+S veya Cmd+S tuşlarına basmak hala iyi bir alışkanlıktır. Bu, her şeyi hemen kaydeder ve hata kontrolü gibi ekstra yardımcı özellikleri tetikler.
Git ile Sürüm Kontrolü
Arkeologların kazı katmanlarının ayrıntılı kayıtlarını oluşturması gibi, Git de kodunuzdaki değişiklikleri zamanla takip eder. Bu sistem, proje geçmişini korur ve gerektiğinde önceki sürümlere dönmenizi sağlar. VSCode.dev, entegre Git işlevselliği içerir.
Kaynak Kontrolü arayüzü:
- Etkinlik Çubuğundaki 🌿 simgesi aracılığıyla Kaynak Kontrolü paneline erişin
- Değiştirilen dosyalar "Değişiklikler" bölümünde görünür
- Renk kodlaması değişiklik türlerini belirtir: eklemeler için yeşil, silmeler için kırmızı
Çalışmanızı kaydetme (commit iş akışı):
flowchart TD
A[Make changes to files] --> B[View changes in Source Control]
B --> C[Stage changes by clicking +]
C --> D[Write descriptive commit message]
D --> E[Click checkmark to commit]
E --> F[Changes pushed to GitHub]
stateDiagram-v2
[*] --> Modified: Edit files
Modified --> Staged: Click + to stage
Staged --> Modified: Click - to unstage
Staged --> Committed: Add message & commit
Committed --> [*]: Sync to GitHub
state Committed {
[*] --> LocalCommit
LocalCommit --> RemotePush: Auto-sync
}
- Tüm aşamalı değişikliklerinizden memnun olduğunuzdan emin olun
- Ne yaptığınızı açıklayan kısa bir not yazın (bu sizin "commit mesajınız" olacak)
- Her şeyi GitHub'a kaydetmek için onay işareti düğmesine tıklayın
- Bir şeyden vazgeçerseniz, geri al simgesiyle değişiklikleri iptal edebilirsiniz
İyi commit mesajları yazmak (düşündüğünüzden daha kolay!):
- Sadece ne yaptığınızı açıklayın, örneğin "İletişim formu ekle" veya "Bozuk navigasyonu düzelt"
- Kısa ve öz tutun – tweet uzunluğunda düşünün, makale değil
- "Ekle", "Düzelt", "Güncelle" veya "Kaldır" gibi eylem kelimeleriyle başlayın
- İyi örnekler: "Duyarlı navigasyon menüsü ekle", "Mobil düzen sorunlarını düzelt", "Daha iyi erişilebilirlik için renkleri güncelle"
💡 Hızlı gezinme ipucu: GitHub deposuna geri dönmek ve çevrimiçi olarak commit edilmiş değişikliklerinizi görmek için sol üstteki hamburger menüsünü (☰) kullanın. Bu, düzenleme ortamınız ile GitHub'daki projenizin ana sayfası arasında bir portal gibidir!
Uzantılarla İşlevselliği Geliştirme
Bir zanaatkarın atölyesinde farklı görevler için özel araçlar bulunduğu gibi, VSCode.dev de belirli yetenekler ekleyen uzantılarla özelleştirilebilir. Bu topluluk tarafından geliştirilen eklentiler, kod biçimlendirme, canlı önizleme ve gelişmiş Git entegrasyonu gibi yaygın geliştirme ihtiyaçlarını karşılar.
Uzantı pazarı, dünya çapındaki geliştiriciler tarafından oluşturulan binlerce ücretsiz araca ev sahipliği yapar. Her uzantı belirli iş akışı zorluklarını çözer ve size özel ihtiyaçlarınıza ve tercihlerine uygun kişiselleştirilmiş bir geliştirme ortamı oluşturma imkanı sunar.
mindmap
root((Extension Ecosystem))
Essential Categories
Productivity
Live Server
Auto Rename Tag
Bracket Pair Colorizer
GitLens
Code Quality
Prettier
ESLint
Spell Checker
Error Lens
Language Support
HTML CSS Support
JavaScript ES6
Python Extension
Markdown Preview
Themes & UI
Dark+ Modern
Material Icon Theme
Peacock
Rainbow Brackets
Discovery Methods
Popular Rankings
Download Counts
User Ratings
Recent Updates
Community Reviews
Recommendations
Workspace Suggestions
Language-based
Workflow-specific
Team Standards
Mükemmel Uzantılarınızı Bulma
Uzantı pazarı gerçekten iyi organize edilmiştir, bu yüzden ihtiyacınız olanı bulmaya çalışırken kaybolmazsınız. Hem belirli araçları hem de varlığından haberdar olmadığınız harika şeyleri keşfetmenize yardımcı olacak şekilde tasarlanmıştır!
Pazara ulaşmak için:
- Etkinlik Çubuğundaki Uzantılar simgesine (🧩) tıklayın
- Etrafı dolaşın veya belirli bir şey arayın
- İlginç görünen bir şeye tıklayın ve daha fazla bilgi edinin
Orada görecekleriniz:
| Bölüm | İçindekiler | Neden Faydalı? |
|---|---|---|
| Yüklü | Zaten eklediğiniz uzantılar | Kişisel kodlama araç setiniz |
| Popüler | En çok tercih edilenler | Çoğu geliştiricinin önerdiği şeyler |
| Önerilen | Projeniz için akıllı öneriler | VSCode.dev'in faydalı önerileri |
Gezinmeyi kolaylaştıran şeyler:
- Her uzantı, derecelendirmeler, indirme sayıları ve gerçek kullanıcı yorumlarını gösterir
- Her birinin ne yaptığına dair ekran görüntüleri ve net açıklamalar alırsınız
- Her şey uyumluluk bilgileriyle açıkça işaretlenmiştir
- Benzer uzantılar önerilir, böylece seçenekleri karşılaştırabilirsiniz
Uzantıları Yüklemek (Çok Kolay!)
Editörünüze yeni özellikler eklemek bir düğmeye tıklamak kadar basittir. Uzantılar saniyeler içinde yüklenir ve hemen çalışmaya başlar – yeniden başlatma yok, bekleme yok.
Yapmanız gerekenler:
- İstediğiniz şeyi arayın (örneğin "live server" veya "prettier" aramayı deneyin)
- İyi görünen birine tıklayın ve daha fazla ayrıntı görün
- Ne yaptığını okuyun ve derecelendirmelere göz atın
- O mavi "Yükle" düğmesine tıklayın ve işte bu kadar!
Arka planda neler oluyor:
- Uzantı indirilir ve otomatik olarak kurulur
- Yeni özellikler hemen arayüzünüzde görünür
- Her şey anında çalışmaya başlar (cidden, bu kadar hızlı!)
- Giriş yaptıysanız, uzantı tüm cihazlarınıza senkronize edilir
Başlangıç için önerdiğim bazı uzantılar:
- Live Server: Kod yazarken web sitenizin gerçek zamanlı olarak güncellenmesini izleyin (bu gerçekten büyüleyici!)
- Prettier: Kodunuzu otomatik olarak temiz ve profesyonel gösterir
- Auto Rename Tag: Bir HTML etiketini değiştirin, eşleşen etiketi de otomatik olarak günceller
- Bracket Pair Colorizer: Parantezlerinizi renk kodlarıyla işaretler, böylece kaybolmazsınız
- GitLens: Git özelliklerinizi tonlarca faydalı bilgiyle güçlendirir
Uzantılarınızı Özelleştirme
Çoğu uzantı, tam olarak istediğiniz gibi çalışmasını sağlamak için ayarlayabileceğiniz seçeneklerle birlikte gelir. Bunu, bir arabada koltuğu ve aynaları ayarlamak gibi düşünün – herkesin kendi tercihleri vardır!
Uzantı ayarlarını düzenleme:
- Uzantılar panelinde yüklü uzantınızı bulun
- Adının yanındaki küçük dişli simgesine (⚙️) tıklayın
- Açılır menüden "Uzantı Ayarları"nı seçin
- İş akışınıza tam uyacak şekilde ayarları düzenleyin
Düzenlemek isteyebileceğiniz yaygın şeyler:
- Kodunuzun nasıl biçimlendirileceği (sekme mi boşluk mu, satır uzunluğu vb.)
- Farklı eylemleri tetikleyen klavye kısayolları
- Uzantının hangi dosya türleriyle çalışması gerektiği
- Her şeyi düzenli tutmak için belirli özellikleri açma veya kapatma
Uzantılarınızı Düzenli Tutma
Daha fazla harika uzantı keşfettikçe, koleksiyonunuzu düzenli ve sorunsuz bir şekilde çalışır durumda tutmak isteyeceksiniz. VSCode.dev bunu yönetmeyi gerçekten kolaylaştırır.
Uzantı yönetim seçenekleriniz:
| Yapabileceğiniz Şey | Ne Zaman Faydalı? | İpucu |
|---|---|---|
| Devre Dışı Bırak | Bir uzantının sorunlara neden olup olmadığını test etmek için | Geri almak isteyebileceğiniz bir şey için kaldırmaktan daha iyidir |
| Kaldır | İhtiyacınız olmayan uzantıları tamamen kaldırmak için | Ortamınızı temiz ve hızlı tutar |
| Güncelle | En son özellikleri ve hata düzeltmelerini almak için | Genellikle otomatik olarak yapılır, ancak kontrol etmeye değer |
Uzantıları yönetme şeklim:
- Her birkaç ayda bir, yüklediğim şeyleri gözden geçirir ve kullanmadıklarımı kaldırırım
- Uzantıları güncel tutarım, böylece en son iyileştirmeleri ve güvenlik düzeltmelerini alırım
- Bir şey yavaş görünüyorsa, hangisinin suçlu olduğunu görmek için geçici olarak uzantıları devre dışı bırakırım
- Uzantılar büyük güncellemeler aldığında güncelleme notlarını okurum – bazen harika yeni özellikler olur!
⚠️ Performans ipucu: Uzantılar harikadır, ancak çok fazla olması işleri yavaşlatabilir. Gerçekten hayatınızı kolaylaştıranlara odaklanın ve hiç kullanmadıklarınızı kaldırmaktan çekinmeyin.
🎯 Pedagojik Kontrol: Geliştirme Ortamı Özelleştirme
Mimari Anlayış: Topluluk tarafından oluşturulan uzantıları kullanarak profesyonel bir geliştirme ortamını nasıl özelleştireceğinizi öğrendiniz. Bu, kurumsal geliştirme ekiplerinin standart araç zincirleri oluşturma yöntemlerini yansıtır.
Kavranan Temel Kavramlar:
- Uzantı Keşfi: Belirli geliştirme zorluklarını çözen araçları bulma
- Ortam Yapılandırması: Araçları kişisel veya ekip tercihlerine göre özelleştirme
- Performans Optimizasyonu: İşlevsellik ile sistem performansı arasında denge kurma
- Topluluk İşbirliği: Küresel geliştirici topluluğu tarafından oluşturulan araçlardan yararlanma
Sektör Bağlantısı: Uzantı ekosistemleri, VS Code, Chrome DevTools ve modern IDE'ler gibi büyük geliştirme platformlarını destekler. Uzantıları değerlendirme, yükleme ve yapılandırma becerisi, profesyonel geliştirme iş akışları için gereklidir.
Düşünme Sorusu: 10 kişilik bir ekip için standart bir geliştirme ortamı kurmaya nasıl yaklaşırdınız? Tutarlılık, performans ve bireysel tercihler açısından düşünün.
📈 Bulut Tabanlı Geliştirme Ustalık Zaman Çizelgeniz
timeline
title Professional Cloud Development Journey
section Platform Foundations
Cloud Development Understanding
: Master web-based editing concepts
: Connect GitHub integration patterns
: Navigate professional interfaces
section Workflow Mastery
File & Project Management
: Create organized project structures
: Master syntax highlighting benefits
: Handle multi-file editing workflows
Version Control Integration
: Understand Git visualization
: Practice commit message standards
: Master change tracking workflows
section Environment Customization
Extension Ecosystem
: Discover productivity extensions
: Configure development preferences
: Optimize performance vs functionality
Professional Setup
: Build consistent workflows
: Create reusable configurations
: Establish team standards
section Industry Readiness
Cloud-First Development
: Master remote development practices
: Understand collaborative workflows
: Build platform-independent skills
Professional Practices
: Follow industry standards
: Create maintainable workflows
: Prepare for team environments
🎓 Mezuniyet Dönüm Noktası: Büyük teknoloji şirketlerindeki profesyonel geliştiriciler tarafından kullanılan aynı araçlar ve iş akışlarıyla bulut tabanlı geliştirmeyi başarıyla öğrendiniz. Bu beceriler, yazılım geliştirme geleceğini temsil eder.
🔄 Bir Sonraki Seviye Yetenekler:
- Gelişmiş bulut geliştirme platformlarını (Codespaces, GitPod) keşfetmeye hazır
- Dağıtılmış geliştirme ekiplerinde çalışmaya hazırlıklı
- Küresel açık kaynak projelerine katkıda bulunmaya hazır
- Modern DevOps ve sürekli entegrasyon uygulamaları için temel oluşturuldu
GitHub Copilot Agent Challenge 🚀
NASA'nın uzay görevleri için kullandığı yapılandırılmış yaklaşım gibi, bu meydan okuma, VSCode.dev becerilerinin eksiksiz bir iş akışı senaryosunda sistematik olarak uygulanmasını içerir.
Amaç: VSCode.dev'de kapsamlı bir web geliştirme iş akışı oluşturarak yetkinliğinizi kanıtlayın.
Proje gereksinimleri: Agent modunu kullanarak şu görevleri tamamlayın:
- Mevcut bir depoyu fork edin veya yeni bir tane oluşturun
- HTML, CSS ve JavaScript dosyalarıyla işlevsel bir proje yapısı oluşturun
- Geliştirmeyi kolaylaştıran üç uzantı yükleyin ve yapılandırın
- Açıklayıcı commit mesajlarıyla sürüm kontrolü uygulayın
- Özellik dalı oluşturma ve değiştirme işlemlerini deneyin
- Süreci ve öğrendiklerinizi bir README.md dosyasında belgeleyin
Bu alıştırma, tüm VSCode.dev kavramlarını gelecekteki geliştirme projelerine uygulanabilecek pratik bir iş akışında birleştirir.
Agent mode hakkında daha fazla bilgi edinin.
Ödev
Bu becerileri gerçek bir test sürüşüne çıkarmanın zamanı geldi! İşte şimdiye kadar öğrendiklerinizi uygulamanıza olanak tanıyacak bir uygulamalı proje: VSCode.dev kullanarak bir özgeçmiş web sitesi oluşturun
Bu ödev, tamamen tarayıcınızda profesyonel bir özgeçmiş web sitesi oluşturma sürecinde size rehberlik eder. Keşfettiğimiz tüm VSCode.dev özelliklerini kullanacaksınız ve sonunda hem harika bir görünüme sahip bir web sitesi hem de yeni iş akışınıza olan güveniniz olacak.
Keşfetmeye ve Becerilerinizi Geliştirmeye Devam Edin
Artık sağlam bir temele sahipsiniz, ancak keşfedilecek daha birçok harika şey var! İşte VSCode.dev becerilerinizi bir sonraki seviyeye taşımak için bazı kaynaklar ve fikirler:
Yer imlerine eklemeye değer resmi belgeler:
- VSCode Web Documentation – Tarayıcı tabanlı düzenleme için tam kılavuz
- GitHub Codespaces – Bulutta daha fazla güç istediğinizde
Sonraki denemeler için harika özellikler:
- Klavye Kısayolları: Sizi bir kodlama ninja'sı gibi hissettirecek tuş kombinasyonlarını öğrenin
- Çalışma Alanı Ayarları: Farklı proje türleri için farklı ortamlar ayarlayın
- Çoklu Kök Çalışma Alanları: Aynı anda birden fazla depo üzerinde çalışın (çok kullanışlı!)
- Terminal Entegrasyonu: Komut satırı araçlarına doğrudan tarayıcınızdan erişin
Pratik yapmak için fikirler:
- Bazı açık kaynak projelerine dalın ve VSCode.dev kullanarak katkıda bulunun – bu, geri vermenin harika bir yoludur!
- Mükemmel kurulumunuzu bulmak için farklı uzantıları deneyin
- En sık oluşturduğunuz site türleri için proje şablonları oluşturun
- Dallanma ve birleştirme gibi Git iş akışlarını uygulayın – bu beceriler ekip projelerinde altın değerindedir!
Tarayıcı tabanlı geliştirmeyi ustalıkla öğrendiniz! 🎉 Taşınabilir aletlerin icadı, bilim insanlarının uzak yerlerde araştırma yapmasına nasıl olanak sağladıysa, VSCode.dev de herhangi bir internet bağlantılı cihazdan profesyonel kodlama yapmanızı sağlar.
Bu beceriler, mevcut endüstri uygulamalarını yansıtır – birçok profesyonel geliştirici, esneklik ve erişilebilirlik için bulut tabanlı geliştirme ortamlarını kullanır. Ölçeklenebilir bir iş akışı öğrendiniz; bu, bireysel projelerden büyük ekip işbirliklerine kadar her şeye uyum sağlar.
Bu teknikleri bir sonraki geliştirme projenizde uygulayın! 🚀
Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator 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ış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.








