Geliştiricilerin ciddi sevgilisi Visual Studio Code, 2015’den bu yana sayısız web geliştiricisi tarafından kullanılan popüler bir kod editörü olmayı başardı. Dahili Git desteği, kodları otomatik tamamlaya yardımcı IntelliSense’i, kapsamlı arama ve gelişmiş Debugger özellikleriyle Visual Studio Code, onun için yapılan tüm övgüleri hak ediyor.

Visual Studio Code’un web geliştiricileri tarafından bu denli kabul görmesinin bir diğer önemli nedeniyse, dahili olarak sunduklarının haricinde geliştiricilere bahşettiği eklenti özelliğidir. Visual Studio Code’u mağazadaki yüzlerce eklenti sayesinde dilediğiniz gibi kesip biçebilir, onu ihtiyaçlarınız için uygun hale getirebilirsiniz.

Visual Studio Marketplace’da ihtiyacınıza uygun bir şeyler daima vardır. Yine de, bir web geliştiricisi olarak şunlara bir göz atmak isteyeceğinize eminim:

01. Font Awesome Codes for HTML
Tasarım projelerinizde sıkça Font Awesome ikonlarından faydalanıyorsanız bu Visual Studio Code eklentisi, sizin için en az dolar kadar değerli olacaktır. 1.000’den fazla ikona sahip Font Awesome’u kullanmak son derece basittir. önceden tanınmış CSS’i (pre-built CSS) kodlarını HTML elementlerinize yerleştirerek tüm Font Awesome ikonlarını kullanabilirsiniz.

Font Awesome Codes for HTML, sizin için HTML içerisine Font Awesome CSS’i tanımlamayı zahmetsiz hale getiriyor. Kutudan çalışmaya hazır biçimde çıkan eklentiyi kullanmak için sadece CSS sınıf adını (class) bir fa- ön ekiyle yazmanız yeterlidir. Hemen akabinde beliren açılır menü sayesinde istediğiniz ikonları nokta atışı olarak seçebilirsiniz.

02. CSS Peek
CSS Peek eklentisiyle, Visual Studio Code’a bir satır içi CSS düzenleyicisi ekleyebilirsiniz. Adobe’nin Brackets kod editöründen ilham alınarak geliştirilen CSS Peek, bir HTML dosyasını düzenlerken CSS dosyasının satırlarını bulunduğunuz ekrandan ayrılmadan düzenlemenize yardımcı olur.

Bir sınıf, ID veya HTML etiketine “göz attığınız zaman” CSS Peek, ilgili tüm CSS kurallarını satır içi düzenleyicide görüntüler. Bu şekilde, stil sayfanızı doğrudan HTML dosyanızdan düzenleyebilir ve ilgili kuralları bulmak için tüm CSS’i görüntülemek zorunda kalmazsınız. Yoksa siz hala klasik yollarla mı CSS’i düzenliyordunuz?

03. VS Color Picker
Renklerle çok sıkı fıkı çalışıyorsanız, VS Color Picker eklentisine kanınız ısınacaktır. Bu eklenti, Visual Studio Code editörünüze kolay kullanımlı bir renk seçim aracı ekler. # tuşuna basarak CSS dosyanıza bir HEX değeri yazmaya başladığınızda, eklenti ekranda küçük bir renk seçici olarak belirir. Renk tekerleğinden kolayca bir renk seçebilir ayrıca CSS’inizde kullanmak istediğiniz herhangi bir rengin üzerine tıklayarak ekranınızdan renk seçebilirsiniz.

04. VS Code Can I Use
Visual Studio Code için popüler Can I Use web uygulamasını kod düzenleyicisiyle bütünleştiren mükemmel bir eklenti: VS Code Can I Use… Bu eklenti, web geliştiricileri için her an elinin altında bulunacak bir tarayıcı uyumluluk denetleyicisidir. HTML, CSS, SVG ve JavaScript öğeleri, özellikleri, işlevleri ya da diğer sözdizimleri için tarayıcı desteğini hızlıca kontrol etmenizi sağlar.

VS Code Can I Use ile kodunuzdaki herhangi bir metin dizesini vurgulayabilir veya Alt + i klavye kısayolunu kullanabilirsiniz. Uyumluluk verilerini ekranın alt kısmında, durum çubuğundan görüntüleyebilirsiniz. İş yükünüzü hafifletecek bir eklenti olan VS Code Can I Use; Chrome, Edge, Firefox, Internet Explorer ve Safari gibi popüler internet tarayıcılarını desteklemektedir.

05. CSSTree Validator
CSSTree Validator eklentisi, Visual Studio Code için geçerli ve doğru (valid) CSS kodları yazmanıza yardımcı olur. Eklenti, kodlarınızı W3C özelliklerine ve tarayıcı uygulamalarına göre doğrular. Uzantı, yanlış özellik adlarını, yanlış değerleri, eksik noktalı virgülleri ve diğer hataları vurgulayarak size sorunları önceden bildirir.

CSSTree Validator siz projeniz üzerinde çalışırken sessiz sedasız arka planda çalışır. Böylece sorunları gerçek zamanlı olarak görebilirsiniz. Ayrıca hataları nasıl düzeltebileceğiniz konusunda CSSTree Validator size önerilerde bulanabilir. Bu eklentiyi Visual Studio Code’a ekleyerek, CSS kodlarınızı hazırlarken ortaya çıkan sorunları önceden fark edebilir, her çalışmanızda zamandan tasarruf edebilirsiniz.

Kaynak: wmaraci.com