Özel VsCode Teması Nasıl Hazırlanır?
Herkese merhaba,
Bu makalede popülerliği gün geçtikçe artan, hem backend hem de frontend geliştiriciler için öncelikli bir seçim haline gelen Visual Studio Code için özel tema hazırlama ve hazırladığımız temayı paketleme konularına değineceğim.
Tema oluşturma konusu detaylı ve uzun bir konu o yüzden her noktasına maalesef değinemeyeceğim. Bu makalede tema oluştururken kilit noktaları, bir anahtar kelime vb. öğeler için nasıl özelleştirme yaparız ve nerde ne değişiklik yapacağımızı nasıl bulabiliriz gibi konulara değineceğim. Lafı fazla uzatmadan gelin ilk temamızı oluşturalım.
VsCode için tema oluşturmadan önce bilgisayarınızda yüklü olması gereken bazı programlar var. Öncelikle bilgisayarınızda eğer yoksa Node.Js’i aşağıdaki linkten indirip yüklemeniz gerekiyor. LTS sürümünü indirebilirsiniz.
Node.Js’i indirdikten sonra Yeoman’ı yüklememiz gerekiyor. Yeoman’dan kısaca bahsedecek olursak, size hazır proje şablonlarıyla hızlı proje oluşturma kolylığı sağlıyor diyebilirim en basit açıklama olarak. Kendi sitelerinden daha detaylı bilgilere ulaşabilirsiniz. Aşağıdaki komutu çalıştırıp Yeoman’ı bilgisayarımıza global olarak yükleyelim.
npm install -g yo Yükleme işlemimiz tamamlandıktan sonra kurmamız gereken son bir paket daha kalıyor. VsCode eklentisi geliştirmek için Yeoman’ın generator-vscode eklentisini yüklememiz gerekiyor.
npm install -g generator-codeEğer yüklemeler sırasında bir hata alırsanız komutun başına sudo yazıp tekrar deneyiniz.
Artık projemizi oluşturabiliriz. Projeyi oluşturmak için aşağıdaki kodu terminal ya da komut satırı üzerinde çalıştıralım.
yo codeKarşımıza aşağıdaki gibi bir ekran çıkacak. Burada geliştirmek istediğiniz eklentinin tipini seçmeniz gerekiyor. Görmüş olduğunuz gibi sadece tema değil, dil desteği, snippet, keymap vb. birçok farklı eklenti türünü de geliştirebilirsiniz. Klavyenin ok tuşları aracılığıyla New Color Theme seçeneğine gelip Enter tuşuna basalım.
Sonrasında sizden önceden varolan bir tema üzerinden mi devam edeceğinizi yoksa yeni bir tema oluşturarak devam etmek istediğinizi mi soracak. Burada No, start fresh seçeneğini seçelim.
Bu noktadan sonra size eklentinizin adını, açıklamasını, eklenti listesinde hangi isimle görüneceğini soracak ve temel tema rengi olarak Dark,White ve High Contrast arasından bir seçim yapmanızı isteyecektir. Bu bilgileri kendinize göre düzenleyebilirsiniz. Örnek olarak son görünüm aşağıdaki gibidir.
Şimdi oluşturduğumuz projeyi VsCode ile açalım. Proje yapısına baktığımızda themes isminde bir klasör ve onun içerisinde bir JSON dosyasını göreceksiniz. Bu JSON dosyası bizim temamız üzerinde tüm değişiklikleri yapacağımız dosyadır. Projeyi F5 ile çalıştırdığınızda tema üzerine yaptığınız değişiklikleri kontrol etmeniz için ayrı bir VsCode ekranı açacak.
JSON dosyasının içeriğindeki her bir öğeye maalesef makale içerisinde değinemeyeceğimi söylemiştim ancak aşağıdaki ekran görüntüsü üzerinden ilk oluşan JSON dosyasına bir göz atalım.
Burada dosya içeriğinin en tepesinde tema adınız, tema tipiniz ve ardından da editörün çeşitli renk ayarları bulunuyor. Örnek olması dına biz editörün background rengini değiştirelim. Bunun için colors içerisindeki editor.background isimli özelliği düzenleyelim. Background rengini kırmızı yapıp tekrar kontrol ettiğimizde aşağıdaki gibi bir sonuçla karşılaşacağız.
Her değişiklik için projeyi durdurup tekrar başlatmanıza gerek yok. Yaptığınız değişiklikleri proje çalışırken anlık olarak görebilirsiniz.
Şimdi kodlar içerisinde rengini değiştirmek istediğimiz anahtar kelime ya da etiketlerin renklerini nasıl değiştireceğiz bunu inceleyelim.
Mac için Command + Shift + P, Windows için F1 tuşuna bastıktan sonra Inspect Editor Tokens and Scopes yazalım ve çıkan ilk seçeneğe tıklayalım.
Bu özellik size fare imlecinin durduğu anahtar kelime ya da etiket hakkında bilgi verecektir.
Yukarıdaki ekranda programlama dili, şu anki renk bilgisi ve texmate scopes adında bilgi yer almakta. Texmate scopes ile değiştirmek istediğiniz elementi bulabilir ve stili ile alakalı düzenlemeleri gerçekleştirebilirsiniz.
Tema projemize dönelim ve JSON dosyamız içerisinde “keyword” kelimesini aratalım. Arama işlemi sonrası aşağıdaki JSON koduna erişmeniz gerekiyor. Bu kodu kopyalayarak ismini “var” olarak değiştirelim. Scope dizisinin içindeki değerleri silerek “keyword.other.var.cs” değerini ekleyelim ve settings içerisindeki foreground özelliğinin değerini de #27ae60 olarak belirleyelim.
{
“name”: “Keyword, Storage”,
“scope”: [
“keyword”,
“storage.type”,
“storage.modifier”
], “settings”: {
“foreground”: “#C792EA”
}
},
Son hali aşağıdaki gibidir.
Projeyi çalıştırdığınızda var tipinin renginin değiştiğini görebilirsiniz. Oluşturmak istediğiniz temada etiket ya da anahtar kelimelerin tamamını dil farketmeksizin bu şekilde özelleştirebilirsiniz.
Tema geliştirme sürecindeki bir diğer seçenek ise Daniel Imms tarafından geliştirilen VsCode Theme Generator isimli projeyi kullanmak.Proje kısaca sizin verdiğiniz temel renklere dayanarak temanızı oluşturmanızı sağlıyor. Bu da size tema geliştirme aşamasında çok büyük bir zaman kazancı oluşturmuş oluyor. İncelemek isteyenler aşağıdaki linkten projeye ulaşabilirler.
Temanızı oluşturdunuz ve artık her şey bitti. Şimdi bu temayı paketleyip VsCode Extension Marketplace’e koyma zamanı. Bunun için aşağıdaki kodu çalıştırıp npm paketimizi indirelim.
npm install -g vscePaketleme işleminden hemen önce package.json dosyasında bazı düzenlemeler yapalım. Aşağıda bazı özelliklerin ne işe yaradığını açıkladım.
publisher : Yayınlayan kişi ya da organizasyonun ismini belirtir. Burada kendi isminiz değil kullanıcı adınızı yazabilirsiniz.
author : Eklentiyi kimin/kimlerin geliştirdiğini belirtir. Burada kendi isminiz ya da ekipte başka geliştiriciler de varsa onların ismini buraya yazabilirsiniz.
icon : Eklentinizin Marketplace’de görüntülenecek logosunu belirtir.
repository : Projenizin Github/Gitlab/Bitbucket linkini belirtir.
categories : Eklentinizin hangi kategori altında listeleneceğini belirtir.
keywords : Marketplace içinde yapılan aramalar için belirleyeceğiniz anahtar kelimeleri belirtir.
engines : Eklentinizin hangi VsCode sürümünde çalışabileceğini belirtir.
Son hali aşağıdaki gibidir.
Paketleme işlemini tamamlamak için öncelikle README.md isimli dosyayı kendinize göre düzenleyin ardından aşağıdaki kodu çalıştırın.
vsce packageProjenin ana dizinine .vsix uzantılı bir dosya oluşacaktır bu dosyayı VsCode’un eklenti mağazasına yükleyebilirsiniz. Eklenti yayınlama ve mağazaya yükleme kısımlarına farklı bir makalede değineceğim.
Umarım faydalı olmuştur. Eksik ya da hatalı gördüğünüz bir nokta varsa varsa bana Twitter ya da LinkedIn adreslerimden ulaşabilirsiniz. Projeyi aşağıdaki Github hesabımdan indirebilirsiniz. İyi kodlamalar.
