🚀 HTML Editörleri: Kodun Mutfağı ve Geliştirici Deneyimi

HTML yazmak için kullanılan araçlar, VS Code dünyası ve bir oyun geliştiricinin neden minimalist editörleri tercih ettiği üzerine bir inceleme.

Kod Nerede Yazılır?

Selamlar tekrar. İskelet yapısını ve tarayıcının bunu nasıl işlediğini konuştuk. Peki, bu kodları nereye yazıyoruz? Teknik olarak Windows'un 'Not Defteri' (Notepad) bile iş görür ancak bir oyun geliştiricinin level editor kullanmadan oyun yapmaya çalışması ne kadar zorsa, modern bir kod editörü kullanmadan web sitesi geliştirmek de o kadar sancılıdır.

Bugün sektörün standartı tartışmasız Visual Studio Code (VS Code). Ama işin felsefesi sadece bir yazılımı indirmek değil, o yazılımı kendi 'çalışma istasyonunuz' haline getirmek.

Neden Modern Bir Editör?

  1. Sözdizimi Vurgulama (Syntax Highlighting): Kodları renklendirerek hatayı anında görmenizi sağlar. Bir etiketi kapatmayı unuttuğunuzda editör size 'burada bir şeyler ters' der.
  2. IntelliSense: Siz daha h1 yazarken, editörün ne yazmak istediğinizi anlayıp tamamlamasıdır.
  3. Emmet: HTML'in shorthand (kısayol) sistemidir. Örneğin div.container>ul>li*5 yazıp Tab tuşuna bastığınızda saniyeler içinde devasa bir yapıyı sizin yerinize kurar.

Biz 'İçimizdeki Savaş' projesinin arayüz kodlarını yazarken, karmaşık 3D sahnelerin yanında UI (Arayüz) tarafını yönetmek için VS Code'u tamamen minimalist bir hale getirmiştik. Gereksiz tüm pencereleri kapatıp sadece koda ve terminale odaklanmak, oyunun o felsefi atmosferine daha iyi girmenizi sağlıyor. Tıpkı Godot'un kendi script editöründeki o sade yapı gibi; odak noktanız sadece yazdığınız mantık olmalı.

Oyun Geliştirici Gözüyle: Terminal ve Minimalizm

Birçok senior geliştirici ve oyun yapımcısı, ekranında çok fazla buton veya karmaşık menü görmeyi sevmez. Bu yüzden Vim veya Neovim gibi doğrudan terminal (komut satırı) içinde çalışan editörler hala çok popülerdir.

Terminal tabanlı çalışmanın avantajları:

  • Hız: Elinizi klavyeden kaldırmadan dosya değiştirebilir, kod yazabilir ve projeyi çalıştırabilirsiniz.
  • Performans: Editörünüz bilgisayarınızın RAM'ini sömürmez, tüm gücü o an geliştirdiğiniz oyunun veya web sayfasının render performansına verirsiniz.
  • Odak: Görsel dikkat dağıtıcılar yoktur, sadece siz ve 'Markup' yapınız.

Önerilen Kurulum (Setup)

Eğer yeni başlıyorsanız, bilgisayarınıza VS Code kurarak şu iki eklentiyi (extension) mutlaka ekleyin:

  1. Live Server: Kodda bir değişiklik yapıp kaydettiğinizde (CTRL+S), tarayıcının otomatik olarak yenilenmesini sağlar.
  2. Prettier: Kodunuzu otomatik olarak hizalar ve 'temiz kod' (clean code) prensiplerine uygun hale getirir.

Bir sonraki adımda, bu editörleri açacağız ve ilk gerçek HTML dosyamızı oluşturup etiketlerin içine dalacağız. Hazırlıklı olun, terminalden ilk komutlarımızı vermeye az kaldı.

Ovid Notu: ovidgame.com