HTML’de Faydalı 5 Harika Visual Studio Code Eklentisi

YouTube'ta Takip Et →

HTML ile web sitesi geliştirenler için en çok kullandığım ve gayet de işe yaradığını düşündüğüm Visual Studio Code eklentilerini sizin için derledim. Bu eklentilerle zaten yaptığınız işleri ve yazdığınız kodları hızlandırabilir, zamandan tasarruf edebilirsiniz.

VS Code’da Eklenti Nasıl Kurulur?

VS Code’da eklenti kurmak son derece kolay. Sol taraftaki panelden Extensions sekmesine gelerek ya da Shift Windows X tuşlarına basarak gelen pencerede arama yapmanız yeterli. Çıkan sonuçlarda ilginizi çeken eklentideki Install butonuna tıklayarak eklentinin kurulumunu başlatabilirsiniz.

Emmet

Bazı metin editörlerine kurmanız gereken, ancak Visual Studio Code ile birlikte gelen Emmet, yazdığınz HTML kodlarını çok hızlandıran bir teknoloji. Çok kapsamlı olduğu için ayrıca bir videoyu hak ediyor. Yine de en çok kullandığım eklentiler arasında yerini alıyor.

Auto Rename Tag

Bir HTML sayfasında, açılış etiketinde değişiklik yaptığınız zaman o etiketin kapanışını da değişiklik yaptığınız etiketle değiştirir. div etiketini h2 ile değiştirdiğinizde /div kapanış etiketi de otomatik olarak /h2 ile değiştirilir. Bu da vakit kazandırır. Link

HTML Tag Wrapper

HTML kodlarının dışına ektra bir HTML etiketi eklemek istediğinizde rahatlıkla ekleyebilmek için bu eklentiyi kullanabilirsiniz. Eklentiyi kurduktan sonra HTML kodlarını seçin ve Ctrl + I tuşlarına basın. Hemen seçili kodların dışına yeni bir etiket açıp sizden hangi etiketi ekleyeceğinizi yazmanızı isteyecektir. Link

Live Server

Front-end geliştiricilerin olmazsa olmazı Live Server eklentisi, yazdığınız HTML kodlarının anlık olarak tarayıcıda görüntülenmesini sağlayan bir eklenti. Yazdığınız her kodda, tarayıcıya geçerek refresh yapma derdinden kurtarıyor. Link

Open In Browser

Üzerinde çalıştığınız dosyayı varsayılan tarayıcınızda ya da isterseniz Firefox, Edge gibi seçtiğiniz tarayıcılarda da açarak görüntülenmesini sağlayan bir eklenti. Eklentiyi kullanabilmek için dosya üzerinde sağ tıklayıp Open in Default Browser (Alt + B) ya da Open in Other Browsers (Shift + Alt + B) seçeneklerinden birini seçmeniz gerekiyor. Link