İster arayüz geliştiricisi olun ister arkaplan geliştiricisi. Her ne olursanız olun bir kod düzenleme editörüne ihtiyaç duyuyorsunuz. Şuana kadar Notepad++, Sublime Text gibi editörler kullandım ancak yaklaşık 1,5 yıldır Microsoft tarafından geliştirilen ücretsiz kod düzenleme editörü olan Visual Studio Code programını kullanmaktayım.
Gerek büyük,karmaşık tüm projeler de oldukça stabil ve işlevsel bir editör olan Visual Studio Code benim için yeri değişemez bir editör oldu diyebilirim.Bu blog yazımda ise kendim Visual Studio Code’de kullandığım eklentiler, temalar ve kendi kişisel yapılandırmamı anlatacağım.
Tema olarak VS Code’nin standart teması olan Dark+ (default dark) kullanıyorum. Birçok tema var ancak özellikle gece kod yazmaya alışık olduğum için göz yormaması ve kodlamaları mı rahat görebilmek için bu temayı tercih ediyorum.
Bu benim çok önemlidir. Tasarımlarım da ve kullandığım kod editörün de fonta çok dikkat etmekteyim. VS Code’de font ailesi olarak Consolas, ‘Courier New’, monospace kullanmaktayım. Fontların büyüklüğü ise 14px ‘dir.
Kodlama yaparken dosyayı kaydetme işlemini hepimiz unutabiliyoruz veya bir anlık dalgınlıkla dosyayı kaydetmeden kapatma gibi gaflete düşebiliyoruz. Bu yüzden VS Code‘nin sunmuş olduğu otomatik kayıt özelliğini kullanıyorum ve bunu afterDelay olarak kullanıyorum. Her 1000 saniye de bir dosyada değişiklik olduğunda otomatik kayıt yapıyor.
VS Code güncel sürümünden önce program ayarlarını yapılandırmak için aynı kod yazar gibi ayarların kodlarını yazıyorsunuz ve o şekilde ayarlamalar yapıyordunuz. Yani, sizin için buton, text alanı oluşturmamıştı ancak son güncel sürümde yukarıda ki resimde ki ayarları yapılandırabiliyorsunuz.
Tek tek ayarları bulmak uğraşmak istemeyenler settings.json dosyalarına aşağıda ki kodları eklemeleri yeterli.
{
"files.autoSave": "afterDelay",
"workbench.startupEditor": "newUntitledFile",
"editor.minimap.enabled": false,
"editor.renderControlCharacters": true,
"workbench.sideBar.location": "left",
"editor.renderWhitespace": "none",
"workbench.enableExperiments": false,
"workbench.activityBar.visible": false,}
Hem arayüz geliştirirken hem arkaplan işlemleri yaparken birkaç tane eklenti kullanmaktayım bunlar sırası ile:
Bu eklenti ile php ile yazdığım kodların anlık olarak çalıştırabiliyor ve yazdığım kod satırında bir hata var ise bunu görmemi sağlıyor. Yani bir nevi php kodunun çalışıp, çalışmadığını kontrol ettiğim bir eklentidir.
XML formatında dosyaları kolaylıkla hazırlayabilmek ve varolan xml dosyalarını düzenleyemebilmek için bana kolaylık sağlayan bir eklentidir.
npm kütüphanesini kullanabilmek için kullandığım oldukça işime yarayan, sıkça kullandığım eklentidir.
Sass formatında CSS kodları yazmak için kullandığım bir eklentidir. Arayüz geliştiricisi arkadaşlar için şiddetle tavsiye ettiğim bir eklentidir. Bu eklenti için özel bir kaç ayarlamalar yaptım, bu ayarları yine settings.json dosyasınıza kaydetmeniz gerekiyor.
"liveSassCompile.settings.formats":[
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/assets/css",
},
],
"liveServer.settings.donotShowInfoMsg": false
Bu eklenti sayesinde CSS & HTML kodlaması yaparken yazdığım kodları tarayıcıdan canlı canlı görebilmemi sağlıyor. Her yazdığım kod ile sayfayı yenilemek zorunda kalmıyorum, bu eklenti çalışma yaptığım dosyayı takip ediyor ve bir değişiklik olduğu anda sayfayı yeniliyor. Bundan dolayı oldukça hızlı bir şekilde tasarımlar gerçekleştirebiliyorum.
Kullandığım tüm bu eklentileri Visual Studio Code programın arayüzünden Dosya (File) -> Tercihler (Preferences) -> Eklentiler (Extensions) kısmından arama yaptırarak bulabilir ve programınıza dahil edebilirsiniz. Eğer, bilgisayarınızda Microsoft Visual Studio Code yok ise buraya tıklayarak ücretsiz olarak indirebilirsiniz.
Yazı Etiketleri
Yazı Bağlantısını Kopyala & Paylaş
Bu yazıya şimdiye kadar 8 Yorum yapılmıştır.
“XML Tools” adında iki tane eklenti var hangisi?
Merhaba,
Josh Johson tarafından yapılmış olan eklentiyi kullanmaktayım. Link: https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml
visual studio da css kodlarımı cmd+s ile kaydettiğimde tüm kodlar birleşiyor.Bu sorunu nasıl çözebilirim.
Merhaba,
Eklenti olarak Pretty Formatter adlı eklentiyi vs kullanıyorsanız bu sorunu o yapıyor olabilir. Kullandığınız başka eklentiler var ise onlardan da kaynaklı olabilir.
vs code da html kodlarken soldan cok bosluk bırakıyor (bir alt satıra inip ve üsteki kodun icine bir kod yazınca) onu nasıl ayarlarım.
Merhaba,
VS Code’nun ayarlar kısmını açtığınızda, Tab Size, Line Height, Letter Spacing ayarlarını kendinize göre yapılandırın.Kullandığınız başka eklentiler var ise, bu eklentilerin ayarlarını da kontrol etmenizi öneririm.
Vermiş olduğunuz eklentileri install ettiğimiz zaman otomatik olarak kullanmaya başlaya bilirmiyiz?
Evet,hemen kullanmaya başlayabilirsiniz. Yazımda bahsettiğim tüm eklentilerin kendilerine özel ayarları mevcut bu ayarları kullanımınıza göre ayarlama yapmanızı tavsiye ederim.
Bir Cevap Yaz