Vscode teması nasıl oluşturulur ?
Merhaba herkese çok keyifli olacağını düşündüğüm bir yazıyla karşınızdayım.Kod yazarken en önemli unsur kullandığınız kod editörüdür.Kullandığımız editörde seçtiğimiz temalar performansımızı etkileyebilir. Bu yazımda hep beraber bir vscode teması oluşturacağız ve visual studio marketplace’te yayınlayacağız. Hazırsanız hep beraber başlayalım. ☕☕
Örnek olması amacıyla yayınladığım temayı paylaşıyorum sizinle, adım adım ilerleyelim.
1- Paketimizi yükleyelim
İlk olarak bilgisayarda terminali açıp aşağıdaki komutu çalıştırıyoruz ve generator code paketimizi yüklüyoruz.
npm install -g yo generator-codeyükleme bittikten sonra yo code yazarak çalıştırıyoruz.
Aşağıdaki gibi bir ekran bizi karşılıyor.
2- Projemizi oluşturalım
Öncelikle New Color Theme seçeneğini seçiyoruz.Sonrasında “No, start fresh” seçeneğini seçerek ilerliyoruz. Temamızın isimlendirmelerini tamamlandırdıktan sonra projemizi oluşturup vscode’ta açıyoruz.
3- Temamızı oluşturalım
Projemizi vscode’ta açtıktan sonra theme klasörünün içindeki json dosyasını açıyoruz ve f5'e basarak çalıştırıyoruz. Json dosyası üzerinde çalışarak değişiklikleri görüntüleyebiliyoruz. Visual studio dokümantasyonunu inceleyerek daha ayrıntılı çalışabilirsiniz.
Bir diğer yöntem olarak Jess Chan’in oluşturduğu websitesinden yararlanabiliriz. Belirttiğim linke tıklayarak websitesine ilerleyip oluşturmak istediğiniz renkleri seçip json dosyasını oluşturuyoruz. Bu json dosyasını projede theme klasörünün içerisindeki json dosyasına yapıştırıyoruz ve tema hazır.
4- Access oluşturmak
Öncelikle dev.azure.com adresinde hesabımızla giriş yapıyoruz,girş yaptıktan sonra navbardaki ayarlara girip “Personel access tokens” seçeneğine tıklıyoruz ve yeni bir token oluşturuyoruz.Ekte belirttiğim iki seçeneği seçerek, access’i oluşturuyoruz.
5- Temayı marketplace’e yüklemek
1- https://marketplace.visualstudio.com/manage/createpublisher adresine ilerleyip gerekli bilgileri dolduruyoruz.
2- projede terminali açıp aşağıdaki komutu çalıştırıyoruz.
npm install -g vsce3- terminale vsce login “username” yazıyoruz ve sonrasında access token’ı giriyoruz.
4- terminalde vsce package komutu giriyoruz.
5- vsce publish komutunu çalıştırıyoruz
Ve Tebrikler..
İlk vscode temanı marketplace’te yayınladın. Marketplace’te veya vscode extensionslarda temanı aratıp yükleyebilirsin.
Yazımın sonuna geldik umarım yararlı ve keyifli olmuştur. Eleştiri ve sorularınız için bana twitter ve linkedin üzerinden ulaşabilirsiniz. Teşekkürler yeni yazıda görüşmek üzere. Yazılarıma destek olmak için https://www.buymeacoffee.com/devebrar
Oluşturduğum temanın linki https://marketplace.visualstudio.com/items?itemName=ebrardev.kara-sevda
