Dosya düzenleme

Kod editörü, web sitenizin kaynak dosyalarını doğrudan düzenlemenize olanak tanır. Bu rehber, değişikliklerin etkili ve güvenli bir şekilde nasıl yapılacağını kapsar.

Düzenlemek İçin Dosya Açma

1. Dosya Gezgini'nde dosyaya gidin
2. Dosya adına tıklayın
3. Dosya editör panelinde açılır
4. Düzenlemeye hazırsınız!

Düzenleme Arayüzü

Editör Özellikleri

• Sözdizimi vurgulama - Farklı kod elementleri için renkler
• Satır numaraları - Belirli satırlara referans
• İmleç konumu - Mevcut satır ve sütunu gösterir
• Kaydırma çubukları - Uzun dosyalarda gezinme

Birden Fazla Sekme

Birden fazla dosya açın ve sekmeler kullanarak aralarında geçiş yapın.

Değişiklik Yapma

Temel Düzenleme

1. Düzenlemek istediğiniz yere tıklayın
2. Değişikliklerinizi yazın
3. Dosya artık değiştirilmiş (sekmede nokta ile gösterilir)

Yaygın İşlemler

| İşlem | Windows | Mac | | ---------- | -------- | --------------- | | Kaydet | Ctrl + S | Cmd + S | | Geri Al | Ctrl + Z | Cmd + Z | | Yinele | Ctrl + Y | Cmd + Shift + Z | | Bul | Ctrl + F | Cmd + F | | Değiştir | Ctrl + H | Cmd + H | | Tümünü Seç | Ctrl + A | Cmd + A | | Kopyala | Ctrl + C | Cmd + C | | Yapıştır | Ctrl + V | Cmd + V | | Kes | Ctrl + X | Cmd + X |

Güvenli Düzenleme Uygulamaları

Düzenlemeden Önce

1. Ne değiştirdiğinizi bilin - Kodun amacını anlayın
2. Bir seferde bir değişiklik yapın - Neyin işe yaradığını izlemek daha kolay
3. Büyük değişikliklerden önce kaydedin - Versiyon geçmişi gerekirse yardımcı olacak

Düzenlerken

1. Anlamadığınız kodu silmeyin
2. Yapıyı koruyun - Açılış/kapanış etiketlerini eşleştirin
3. Hata göstergelerine dikkat edin - Kırmızı alt çizgiler sorun demek

Düzenledikten Sonra

1. Değişikliklerinizi kaydedin
2. Önizlemeyi kontrol edin - Değişikliklerinizin çalışıp çalışmadığına bakın
3. İşlevselliği test edin - Hiçbir şeyin bozulmadığından emin olun

Ne Düzenlenmeli (Ve Nasıl)

Metin İçeriğini Değiştirme

Tırnak içindeki metni bulun ve değiştirin:

// Önce
<h1>Sitemize Hoş Geldiniz</h1>

// Sonra
<h1>Harika Web Siteme Hoş Geldiniz</h1>

Renkleri Değiştirme

Renk değerlerini bulun ve değiştirin:

/* Önce */
background-color: #3498db;

/* Sonra */
background-color: #e74c3c;

Sayıları/Değerleri Değiştirme

Sayısal değerleri ayarlayın:

/* Önce */
padding: 20px;

/* Sonra */
padding: 40px;

Yaygın Dosya Türleri

JSX/JavaScript Dosyaları (.jsx, .js)

Componentler ve mantık:

function Button({ text }) {
  return <button className="btn-primary">{text}</button>;
}

CSS Dosyaları (.css)

Stillendirme:

.btn-primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

JSON Dosyaları (.json)

Yapılandırma ve veri:

{
  "name": "Web Sitem",
  "version": "1.0.0"
}

Hataları Yönetme

Sözdizimi Hataları

Kırmızı alt çizgiler görürseniz:

1. Eksik parantez, tırnak veya noktalı virgül kontrol edin
2. Etiketlerin düzgün kapatıldığından emin olun
3. Anahtar kelimelerin yazımını doğrulayın

Bir Şey Bozuldu mu?

1. Geri Al - Birkaç kez Ctrl/Cmd + Z basın
2. Kaydetmeyin - Kaydetmeden dosyayı kapatın
3. Versiyon Geçmişi - Önceki bir versiyonu geri yükleyin
4. AI'a sorun - Neyin yanlış gittiğini anlatın

Geliştirici Olmayanlar İçin İpuçları

Düzenlemesi Güvenli Yerler

• Tırnak içindeki metin - Genellikle değiştirmesi güvenli
• Sayılar - Boyut gibi değerleri ayarlayın
• Renk kodları - Renkleri değiştirin (hex için #'ı koruyun)

Kaçınılacak Şeyler

• Anlamadığınız satırları silmek
• Süslü parantezler {} içindeki şeyleri değiştirmek
• Import ifadelerini değiştirmek
• function veya const olan herhangi bir şeyi düzenlemek

Şüpheye Düştüğünüzde

Bunun yerine AI chat kullanın:

"Buton rengini maviden yeşile değiştir"

Bu, kodu doğrudan düzenlemekten daha güvenlidir.

Değişiklikleri Kaydetme

Manuel Kaydetme

Kaydedilmemiş Değişiklik Göstergesi

• Dosya sekmesinde nokta kaydedilmemiş değişiklik demek
• Kaydet butonu vurgulanabilir

Otomatik Kaydetme

Bazı değişiklikler otomatik kaydedilebilir. Editör ayarlarınızı kontrol edin.

Kaydettikten Sonra

1. Önizleme güncellenir - Değişikliklerinizi önizlemede görün
2. İyice test edin - Her şeyin çalıştığından emin olmak için etrafta tıklayın
3. Yayınlayın - Hazır olduğunuzda değişiklikleri canlıya alın