Visual Studio Code İçin Kullandığım Eklentiler ve Ayarlar

 12 Mar 2019

Hüseyin Körbalta

 Yorum Yok »

İ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 Ayarları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.

Font Ayarlarım

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.

Otomatik Kaydet

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.

Toplu Ayarlarım

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,}

Kullandığım Eklentiler ve Eklenti Ayarları

Hem arayüz geliştirirken hem arkaplan işlemleri yaparken birkaç tane eklenti kullanmaktayım bunlar sırası ile:

1- PHP Debug

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.

2- XML Tools

XML formatında dosyaları kolaylıkla hazırlayabilmek ve varolan xml dosyalarını düzenleyemebilmek için bana kolaylık sağlayan bir eklentidir.

3- npm

npm kütüphanesini kullanabilmek için kullandığım oldukça işime yarayan, sıkça kullandığım eklentidir.

4- Live SASS Compiler

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

5- Live Server

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

• Visual Studio Code
• Visual Studio Code Ayarları

• 

  WordPress Eklentisiz Yazı İçi Reklam Alanı Nasıl Oluşturulur?

  Wordpress dünyanın en geniş eklenti kütüphanesine sahip yazılımıdır. Hemen hemen her şey için bir eklentisi mevcut, fakat Wordpress her ne kadar eklenti açısından zengin olsa da her şeyi eklentiyle yapmak sitenizin yayın yaptığı hosting ya da sunucuyu bir süre sonra yormaya başlayacaktır. Bende size bu blog yazımda eklenti kullanmadan yazı…
• 

  Debian 9’a MariaDB Nasıl Kurulur?

  Bu blog yazımda dünyanın en çok tercih edilen, ücretsiz ve açık kaynak kodlu oldukça stabil, hızlı ve çeşitli modüller ile desteklenebilen veri tabanı sunucusu olan MariaDB'yi Debian 9 işletim sistemine nasıl kuracağınızı göstereceğim. MariaDB, oldukça hızlı, kararlı ve ölçeklenebilir bir MySQL veritabanı sunucusunun geliştirilmiş,eskiye dönük yazılımlarla tam uyumlu çalışabilen, drop-in…
• 

  WordPress’te Önceki ve Sonraki Yazı Linkleri Nasıl Eklenir?

  Yakın bir zamanda kişisel blog sitem için yeni bir tema tasarlayıp, kodladım. Bir önce ki temamı da kendim tasarlayıp, kodlamıştım ancak Wordpress'in 5.0 sürümü yayınlandıktan sonra yeni görsel editör olan Guttenberg'i kullanmaya başladım. Guttenberg editörüne gelen ara güncellemeler ile eski temam da uyumsuzluklar oluşmaya başladı örneğin yazdığım yazılar sayfa dışına…
• 

  2080 Yılına Bir Mektup

  Selam dostum, "Dostum" dedim çünkü; 2080 yılına yazdığım bu mektubu bir erkek mi? bir kadın mı? yoksa bir robot mu? okuyacağını bilemediğim için en genel bir hitap şekli ile mektubuma başlamak istedim. Bu mektubu 2019 yılında kaleme aldım, neden kaleme aldığıma dair en ufak fikrim yok belki Dünya'da en güçlü…