Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Visual Studio Code editörünün kurulumu ve çeşitli eklentilerin kullanımını anlatan kapsamlı bir eğitim içeriğidir.
- Video, Visual Studio Code'un HTML, CSS ve JavaScript gibi kodları yazmak için kullanılabilecek bir editör olduğunu açıklayarak başlıyor ve sıfırdan kurulum sürecini gösteriyor. Ardından Emmet, kod yapısı görüntüleme gibi temel özellikler tanıtılıyor ve Prettier, Auto Rename Tag, Material tema, Materyal İkon Tema, Open in Browser, CSS Pick, HTML CSS Support ve Indent Rainbow gibi popüler eklentilerin kurulumu ve kullanımı adım adım anlatılıyor.
- Videoda ayrıca eklentilerin klavye kısayolları, kod düzenlemesi, boşluk ayarları, parantez renklendirmesi ve kod pencerelerini ikiye ayırma gibi pratik kullanım örnekleri de sunulmaktadır. Eğitmen, F12 tuşu ile tarayıcıda açma, CSS stillerini bulma ve kod düzenlemesi gibi günlük web geliştirme süreçlerinde kullanılabilecek teknikleri de göstermektedir.
- 00:10Visual Studio Code Editörü Tanıtımı
- Visual Studio Code editörü, HTML, CSS, JavaScript gibi kodları yazabildiğimiz bir programdır.
- Eskiden Adobe Dreamweaver kullanılıyordu ancak kurulum ve lisans sorunları nedeniyle artık ücretsiz ve güçlü programlar tercih edilmektedir.
- Kodlama araçlarında Visual Studio 2015, WebStorm, JetBrains'in PHPStorm, Atom ve Notepad++ gibi başarılı programlar bulunmaktadır.
- 01:33Visual Studio Code Kurulumu
- Visual Studio Code'ı Google'da aratarak indirme işlemini gerçekleştirebilirsiniz.
- Program Windows, macOS ve Linux için kararlı sürüm olarak indirilebilir, ayrıca 32 bit Windows için "Other Download" seçeneği bulunmaktadır.
- Kurulum sırasında dil seçimi yapılabilmekte, Türkçe desteği bulunmamaktadır.
- 03:30Visual Studio Code Kullanımı
- Programı başlatınca "Welcome" ekranı karşınıza çıkacaktır.
- Sol tarafta arama ve yeni klasör oluşturma özellikleri bulunmaktadır.
- "File" menüsünden "Open Folder" seçeneği ile klasör açabilir ve içine HTML, CSS ve JavaScript dosyaları ekleyebilirsiniz.
- 04:48Emmet Özelliği
- İlk kurulumda otomatik tamamlama özelliği olan Emmet bulunmaktadır.
- HTML dosyasında "html5" yazıp enter'a basıldığında otomatik döküman oluşturulur.
- "div" yazıp tab tuşuna basıldığında otomatik olarak taglar açılır ve kapanır.
- 05:41Eklenti Kurulumu
- Eklentileri "Preferences" kısmından veya Ctrl+Shift+X tuşlarına basarak açabilirsiniz.
- En popüler eklentiler arasında Python, C/C++, ve Prettier bulunmaktadır.
- Prettier, kod formatını düzenleme ve güzelleştirme için kullanılan bir eklentidir.
- 07:39Prettier Eklentisi
- Prettier eklentisi, JavaScript, HTML, Angular ve JSON verilerinde kod formatını güzelleştiren bir eklentidir.
- Kontrol+Shift+P tuşlarına basarak Prettier'ı çalıştırabilirsiniz.
- Saçma sapan kod yapısını otomatik olarak düzenleyerek güzelleştirir.
- 08:44Diğer Önemli Eklentiler
- Auto Rename Tag eklentisi, açılıp kapanan tagları otomatik olarak eşleştirir.
- Material tema eklentisi, programın temayını değiştirmenizi sağlar.
- Temayı değiştirmek için sol alt köşedeki "Manage" kısmından "Color Theme" seçeneğine tıklayabilirsiniz.
- 12:19İkon Temaları ve Eklentiler
- İkon temaları eklentisi, ikonların daha güzel ve sevimli görünmesini sağlar.
- Materyal temel ve ikon temaları eklentileri yüklendikten sonra, sol taraftaki ikonlar değişir.
- Yüklü eklentileri kontrol+shift+x tuşlarına basarak ve "Show Installed Extensions" kısmından görüntüleyebilirsiniz.
- 14:16Open in Browser Eklentisi
- Open in Browser eklentisi, kodları tarayıcıda çalıştırmanızı sağlar.
- Varsayılan olarak alt+b tuşu ile çalışır, ancak File > Preferences > Keyboard Shortcuts üzerinden tuş kombinasyonlarını değiştirebilirsiniz.
- F12 tuşunu Open in Browser için kullanmak isterseniz, öncelikle F12 tuşuna bağlı diğer komutları "Remove Key Binding" ile kaldırmanız gerekir.
- 17:15CSS Pick Eklentisi
- CSS Pick eklentisi, CSS kodlarında sınıf veya id'ye tıklayarak ilgili tanımlamaya gitmenizi sağlar.
- Varsayılan olarak F12 tuşu ile çalışır, ancak tuş kombinasyonunu değiştirebilirsiniz.
- CSS Pick, CSS kodlarını düzenlemek için pratik bir araçtır.
- 21:01HTML CSS Support Eklentisi
- HTML CSS Support eklentisi, CSS kodlarındaki sınıfları ve id'leri alt tarafta listeler.
- Bu eklenti, CSS kodlarını daha kolay bulmanızı sağlar.
- "." yazdığınızda tüm sınıfları, id yazdığınızda ilgili id'yi alt tarafta gösterir.
- 22:22Indent Rainbow Eklentisi
- Indent Rainbow eklentisi, CSS stillerinin ve kodların sola olan yakınlıklarını ayarlar.
- Bu eklenti, kodların okunabilirliğini artırmak için kullanılır.
- 22:46Visual Studio Code Eklentileri
- Sol taraftaki kırmızılıklar, kodun önünde ve arkasında boşlukların ayarlanmasını sağlayan bir eklenti özelliğidir.
- Colorize eklentisi, parantezlerin renklendirilmesini sağlayarak kodun nereden nereye kadar olduğunu gösterir.
- Bu eklenti özellikle stil dosyalarında, seçilen kodun nereye kadar olduğunu gösteren çizgilerle kullanışlıdır.
- 24:52Visual Studio Code Kullanım Kolaylıkları
- Pencereyi ikiye ayırma özelliği, HTML, CSS ve JavaScript kodlarını aynı anda görüntüleme imkanı sağlar.
- Sağ alt köşede kodunuzun kaç satır olduğunu ve kaç boşluk kullandığınızı gösteren bilgiler bulunmaktadır.
- Pretier eklentisi, kodların düzgün bir şekilde dizilmesini sağlar.
- 25:55Kurulan Eklentiler
- Kurulan eklentiler arasında Auto Rename Tag, Bracket Pair Colorizer, CSS Peek, HTML CSS Support ve Rainbow Bracket bulunmaktadır.
- Bu eklentiler kullanıcıların çok fazla yüklediği popüler eklentiler arasındadır.