Visual Studio Code Html Css Support Eklentisi | Musa Yazlık

Trang chủ » Visual Studio Code Kod Düzenleme Eklentisi » Visual Studio Code Html Css Support Eklentisi | Musa Yazlık

Có thể bạn quan tâm

Skip to content No results

Projeniz için bir css kütüphanesi eklediniz ve o css kütüphanesinde bulunan class özelliklerine, html elementlerin özelliği olan class attribute içerisinde otomatik yazarken gözükmesini mi istiyorsunuz? Bu yazımda bunu yapabileceğiniz bir eklenti olan Html Css Support eklentisinden bahsedeceğim.

Kodlama yaparken en can sıkıcı yanı kullandığınız kütüphanelerin içerisinden kullanmak istediğiniz class ın ismini tam olarak hatırlayamamanız veya kullanırken doğru bir yazım yapamamanızda dolayı class ın çalışmaması gibi durumlar aşırı can sıkar. Kullandığınız editöre bağlı olarak bununla ilgili bazı eklentiler bulunmakta. Bende bu yazımda şuanda kullanmakta olduğum kod editörü olan Visual studio code editöründe kullandığım ve bu sorunumu gideren eklenti olan Html Css Support eklentisinden bahsedeceğim.

Html Css Support Eklentisinin tam olarak ne için kullanılır?

Bir html dosyasından kodlama yaparken oluşturduğunuz bir p etiketi olduğunu düşünelim. Bu etikete dosyaya dahil ettiğiniz bir bir bootstrap class ı eklemek istiyorsunuz. Mesela container class ını eklemek istiyorsunuz. Siz sadece class=”con” yazdığınızda kodlamanın tam altında karşınıza google da arama çubuğuna yazarken karşınıza çıkan yapının aynısı çıkmakta. Yani aşağıdaki gibi bir yapı çıkmakta.

Html Css Support Otomatik Tamamlama Class

Bu sayede projenize eklediğiniz bir css kütüphanesinin içerisinde bulunan class özelliklerinin bir html etiketinin class attribute de kolayca erişebilmiş oluyorsunuz. Buda işinizi baya kolaylaştırmakta. Şimdi ise bu eklentinin kurulumuna geçelim.

Html Css Support Eklentisinin Kurulumu

Kurulum işlemleri çok basittir. Tek yapmanız gereken visual studio code editörünün sol köşedeki baştan beşinci sırada bulunan eklentiler kısmına tıkladıktan sonra arama kutusuna “Html Css Support” yazmanız yeterlidir. Ardından install butonuna tıklayarak yükleme işlemini yapınız.

Eklentinin Kullanılması

Şimdi eklentinin kullanılmasına geçiyoruz. Eklentiyi yükledikten sonra yapmamız gereken küçük bir ayar vardır. Kullanmak istediğimiz css kütüphanesinin cdnjs.com sitesinden bulup linkini kopyalayarak setting.json dosyasına eklemeniz gerekmektedir. ctrl+shift+p tuş kombinasyonuna tıkladıktan sonra açılan arama menüsüne preferences: open settings yazın ve ilk sırada çıkan menüye tıklayın. setting.json dosyası açılacaktır. Açılan sayfaya aşağıdaki kodu yazınız.

"css.remoteStyleSheets": [ "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" ]

Bu kodu ekledikten sonra her hangi bir html etiketinin class attribute üne eklediğiniz kütüphanenin içerisinde bulunan class özellikleri siz yazmaya başladığınızda otomatik olarak gözükecektir. Eğer gözükmüyor ise ctrl+space kombinasyonunu kullanınız o zaman kesin gözükecektir. Aynı şekilde birden fazla kütüphane eklemek istiyorsanız tek yapmanız gereken bir virgül koyarak iki tırnak içerisine istediğiniz kütüphanenin cdn linkini ekleyiniz yeterli olacaktır.

"css.remoteStyleSheets": [ "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css", "Yeni kütüphane", "Daha Yeni kütüphane", //Bu şekilde eklemeye devam edebilirsiniz. ]

Evet işlemimiz bu kadar. Bu yazımda sizlere projenize eklediğiniz css kütüphanesinin içerisinde bulunan class özelliklerini html etiketinde bulunan class attribute ünde ön izleme olarak gözükmesini sağlayan Html Css Support eklenlentisini anlattım. Bir sonraki eklenti önerisinde görüşmek üzere hoşça kalın.

Wordpress Tema Yapımı 2- Style Dosyasının Düzenlenmesi
Previous Yazı Wordpress Tema Yapımı: 3- Style dosyasının düzenlenmesi Next Yazı Figma Kullanımı: 1 Figma Nedir, İndirilmesi ve Kurulumu
Fİgma Nedir

Leave a ReplyCancel Reply

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Name *

Email *

Add Comment *

Save my name and email in this browser for the next time I comment.

Yorum gönder

Δ

No results
Admin Musa Yazlık Profil Fotoğrafı
Musa YazlıkMerhaba. Benim ismim Musa Yazlık. 2017'den beri web yazılım ve web tasarım ile uğraşmaktayım. Buna ek olarak şuanda Eskişehir Osmangazi Üniversitesi Fen-Edebiyat Fakültesi Matematik-Bilgisayar Bilimleri ve Anadolu Üniversitesi Açık Öğretim Fakültesi Yönetim Bilişim Sistemleri olmak üzere çift üniversite okuyan bir üniversite öğrenciyim.

Kategoriler

KategorilerKategori seçinGenel (2)Genel Bilgi (5)Icons (1)Notlarım (1)Öneri Listesi (1)Tasarım (7) Figma (1)Yazılım (35) Css (9) Scss (1) Html (3) JavaScript (14) Jquery (1) ReactJs (7) NextJs (1) Php (1) Wordpress (4)

Son Yazılar

  • Next.js 13 İle Proje Yapısı Oluşturma
  • Tasarımcılar İçin Popüler 5 Ips Monitör Önerisi
  • Css Seçicileri (Selector) Serisi: is()
  • React’da npm paketi kullanmadan pagination nasıl yapılır?
  • 2022 – Javascript Array Metodları: filter()

Son yorumlar

  • Ücretsiz Javascript Pdf Kitabım V1.1 için Musa Yazlık
  • Ücretsiz Javascript Pdf Kitabım V1.1 için erol
  • Ücretsiz Javascript Pdf Kitabım V1.1 için cemal
  • Ücretsiz Javascript Pdf Kitabım V1.1 için cemal
  • Ücretsiz Javascript Pdf Kitabım V1.1 için AYŞE KOÇ

Arşivler

  • Aralık 2022
  • Kasım 2022
  • Ekim 2022
  • Ağustos 2022
  • Ağustos 2021
  • Haziran 2021
  • Nisan 2021
  • Ekim 2020
  • Eylül 2020
  • Ağustos 2020

Popüler Yazılarım

Next.js-13-Proje-Yapisi-Olusturma

Next.js 13 İle Proje Yapısı Oluşturma

  • 1 Comment
Css Seçicisi ( selector) is seçicisi musa yazlık

Css Seçicileri (Selector) Serisi: is()

Reactda-npm-paketi-kullanmadan-pagination-nasil-yapilir

React’da npm paketi kullanmadan pagination nasıl yapılır?

Từ khóa » Visual Studio Code Kod Düzenleme Eklentisi