Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Visual Studio Code editörünün kurulum ve temel kullanımını anlatan kapsamlı bir eğitim içeriğidir.
- Video, Visual Studio Code'un kurulumundan başlayarak editörün arayüzünü (explorer penceresi, extension penceresi, ayarlar menüsü) tanıtmakta, farklı programlama dilleri için gerekli uzantıların nasıl yükleneceğini göstermektedir. Daha sonra Emmet eklentisinin kurulumu, HTML, CSS ve JavaScript dosyalarının oluşturulması, klasörlerin yönetimi ve Live Server eklentisinin kullanımı anlatılmaktadır.
- Eğitim ayrıca editörün özelleştirilmesi (font boyutu, tema, zoom seviyesi), dosyaların nasıl kaydedileceği ve güncelleneceği konularını da içermektedir. Bu video, web geliştirme yapmak isteyenler için Visual Studio Code'un temel kullanımını öğrenmek isteyenler için faydalı bir kaynaktır.
- 00:00Visual Studio Code Kurulumu
- Visual Studio Code, birçok platformda ve programlama dilinde kolaylıkla geliştirme yapabilen popüler bir editördür.
- Kurulum için "visual studio code" araması yapıp, işletim sistemimize uygun indirme bağlantısını seçmeliyiz.
- Kurulum sonrası uygulamayı çalıştırdığımızda karşımıza bir karşılama ekranı gelecektir.
- 00:40Visual Studio Code Arayüzü
- Sol üst köşedeki "Explore" penceresi, dosya ve klasörleri yönetmek için kullanılır.
- Sol alt köşedeki "Extension" penceresi, editöre ekstra özellikler eklemek için kullanılır.
- Visual Studio Code, birçok programlama dilinde geliştirme yapabileceğimiz bir editördür.
- 01:20Uzantılar ve Eklentiler
- Programlama dilleri için özelleştirilmiş uzantılar, otomatik tamamlama, renklendirme ve hata ayıklama gibi özellikleri sağlar.
- Python, JavaScript, HTML, CSS gibi farklı diller için uygun uzantılar indirilebilir.
- Emmet eklentisi varsayılan olarak gelir ve HTML/CSS kodlarını otomatik tamamlar.
- 03:16Tema ve Ayarlar
- Material İkon Teması gibi eklentiler, dosya ikonlarını değiştirmek için kullanılabilir.
- Code Formatter eklentisi, HTML ve CSS etiketlerinin düzgün formatlanmasını sağlar.
- Sol alt köşedeki çark işareti ile "Settings" ekrana ulaşılabilir ve editör özelleştirilebilir.
- 04:39Editör Ayarları
- Font büyüklüğü, yazı tipi ve zoom seviyesi gibi ayarlar "Settings" üzerinden değiştirilebilir.
- Değiştirilen ayarlar "settings.json" dosyasına kaydedilir ve gerektiğinde silinebilir.
- Renk teması değiştirilebilir ve "File Icon Theme" ayarı ile dosya ikonları değiştirilebilir.
- 07:33Dosya ve Klasör İşlemleri
- "Open Folder" seçeneği ile mevcut bir klasör açılabilir veya yeni bir klasör oluşturulabilir.
- Klasör içinde yeni dosya oluşturulabilir, örneğin "index.html" gibi.
- Material İkon Teması kurulduktan sonra dosyaların başındaki ikonlar değiştirilir.
- 09:26Emmet Eklentisi ve Kullanımı
- Emmet eklentisi birçok editörde kullanılan popüler bir eklenti olup, bazı editörlerde sonradan kurulması gerekiyor.
- VS Code'da Emmet eklentisi direkt editöre tümleşik olarak geliyor, örneğin "html" yazıp enter'a basıldığında HTML etiketi otomatik olarak getiriliyor.
- HTML iskeleti için "!" yazıp tab tuşuna basıldığında otomatik olarak HTML iskeleti oluşturuluyor.
- 10:00Dosya ve Klasör Yönetimi
- Boş bir alana tıklayarak yeni dosya veya klasör eklenebilir, farklı klasörler de oluşturulabilir.
- CSS dosyası eklemek için "newfl" yazıp "css" seçeneğini kullanabilirsiniz.
- Klasör içerisine dosya eklemek için önce klasörü seçip "newfl" diyerek yeni dosya oluşturabilirsiniz.
- 10:37Dosya Bağlantıları ve Klasör Yönetimi
- Web site klasörü içerisine yeni klasörler eklenebilir, örneğin "stil" klasörü CSS dosyalarını barındırabilir.
- Boş alana tıklayıp etraf mavi işaretleniyorsa eklenen dosya veya klasör direkt web site klasörünün içerisine eklenir.
- Klasör isimlerini değiştirmek için sağ tıklayıp isim değiştirme seçeneği kullanılabilir.
- 11:52CSS ve JavaScript Bağlantıları
- HTML dosyasına CSS dosyası eklemek için "link" yazıp iki nokta koyarak CSS dosyası seçilebilir.
- JavaScript dosyası eklemek için "script" yazıp source'u seçerek bağlantı kurulabilir.
- HTML dosyasında etiketlere CSS dosyasından erişerek stil uygulanabilir.
- 12:35Dosya Çalıştırma ve Live Server Eklentisi
- HTML dosyası doğrudan klasör altından açılabilir, ancak AJAX veya JavaScript kullanımı için server üzerinden çalıştırılması gerekiyor.
- Live Server eklentisi kurularak dosyalar server altından çalıştırılabilir.
- Live Server ile dosyaları çalıştırdığınızda, kaydedilen değişiklikler otomatik olarak sayfada güncellenir.
- 14:52Dosya Kaydetme ve Kapanış
- Kaydedilmemiş dosyaların yanında nokta işareti görünür, değişiklikleri kaydetmek için Ctrl+S tuşu kullanılabilir.
- Tüm kaydedilmemiş dosyaları kaydetmek için File menüsünden "Save All" seçeneği kullanılabilir.
- Video, Visual Studio Code'un nasıl kurulacağını ve nasıl kullanılacağını anlatmaktadır.