VS Code Eklentisi: 15 Dakikada Microsoft’a Katkı Sağlamak
Merhaba, yeni bir yazıyla yeniden buluştuk. Konumuz VS Code eklentileri. Bu yazıda işin teorisinden çok mutfağından bahsedeceğiz; birlikte bir eklenti hazırlayıp bu eklentiyi marketplace’de yayınlayacağız.
Hadi başlayalım…
VS Code
VS Code eklentilerinden bahsetmeden önce VS Code nedir bunu bilmek gerekiyor. Bu yazıya bir şekilde denk geldiysen muhtemelen bu sorunun cevabını zaten biliyorsundur, yine de kısaca bahsetmek gerekirse VS Code açık kaynak bir kod editörüdür, aynı zamanda eklentiler sayesinde geliştirme ortamı olarak da kullanılan platform bağımsız bir araçtır.
PYPL Index’e göre popüler IDE’ler arasında dördüncü sırada yer almakta.
Stack Overflow’da yayınlanan ve geliştiricilerin oylarıyla popüler geliştirme ortamlarının belirlendiği listede ise ilk sırada yer alıyor.
VS Code çok geniş bir eklenti pazarına sahip. VS Code’u bu eklentilerle destekleyerek hızlı ve temiz kodlanabilen, debug edilebilen, kişiselleştirilebilen verimli bir geliştirme ortamı oluşturmak mümkün.
VS Code ile ilgili detaylı bir yazıya şuradan ulaşabilirsin. Biz yazının esas konusuna kaldığı yerden devam edelim.
VS Code Eklentisi Oluşturmak
Yazının mutfak kısmına geldik, ihtiyacımız olan malzeme listesi şu şekilde; (Böyle anlatınca yemek tarifi gibi oldu 😊)
Bu ikisini makinamıza kurmuş olmamız gerekiyor.
Eklenti oluşturmayı kolaylaştıran bir scaffolder var; adı Yeoman. Bu araç sayesinde tek satır kod yazmadan “hello world” seviyesinde bir extension sahibi olmuş oluyorsunuz. Nasıl olduğuna birlikte bakalım:
İlk olarak npm aracılığıyla Yeoman’ı kuruyoruz, npm yukarıda kurulumunu gerçekleştirdiğimiz Node.js ile birlikte kurulmuş oluyor, ekstra bir kurulum yapmanıza gerek yok.
npm install -g yo generator-codeSonraki adım extension projesinin scaffoldunu oluşturmak
yo codeBu komutla birlikte Yeoman size wizard şeklinde birtakım sorular soruyor:
Hangi tip eklenti oluşturacağımızı seçerek ve devamındaki soruları cevaplayarak proje yapımızın oluşmasını sağlıyoruz. Biz VS Code’un “Diğer” olarak sınıflandırdığı kategoride bir eklenti yazacağımız için “New Extension” seçeneği ile ilerliyoruz. (Ben typescript ile ilerlemeyi tercih ettim, javascript ile kodlamakta mümkün)
Bu işlemi tamamlayıp projeyi VS Code ile açtığımızda çalıştırılmaya hazır bir eklentimiz olacak.
Proje Yapısı
Projeyi run ettiğimizde debug işlemleri için açılan VS Code’un komut paletinde (kısayol: cmd+shift+p) “Hello World” yazarak hiç kod yazmadan oluşturduğumuz eklentimizi test edebiliriz.
Bu kodun nasıl çalıştığını anlamaya çalışalım.
Komut paletinde listelenmesini istediğimiz komutları package.json dosyasındaki “contributes:commands” dizisine ekliyoruz ve bu komutun tetikleyeceği aksiyonu “activationEvents” dizisine yazıyoruz. Komutumuzun adını belirleyen şey ise “title” özelliği oluyor.
Komutun alacağı aksiyonları belirlediğimiz yer ise extension.ts dosyasında yer alan activate fonksiyonu. Komutumuzu bu fonksiyon içerisinde package.json dosyasındaki aynı isimle register ediyoruz.
Şimdi bu hello world bilgilendirmesinin geldiği dosyayı biraz düzenleyelim ve kendi özgün eklentimizi oluşturalım.
Lorem Text Generator
Oluşturacağımız eklenti bir lorem ipsum metin üreticisi olsun ve kullanıcılar komut paletinden istedikleri uzunlukta lipsum metni üretebilsinler.
Bu metinlerin üretilebilmesi için loripsum api’sini kullanacağız. Kullanacağımız bu api’yi çağırmak için node-fetch paketinden yararlanacağız.
npm install -D @types/node-fetchBu kurulumu da sağladıktan sonra extension.ts dosyasında değişikliklerimizi yaparak kodumuzu son haline getiriyoruz.
Publish
Kodumuz hazır, şimdi bu kodu eklenti pazarına yükleyelim.
Publish işlemi için öncelikle bu eklentiye ait marketplace’in ihtiyaç duyduğu bilgileri package.json dosyasında belirtmemiz gerekiyor.
Sonrasında ise README.md dosyasını düzenlememiz gerekiyor. Microsoft burada kendi pazarına bir ürün yüklenmeden önce ufak bir kontrol sağlıyor. Eğer README.md dosyası düzenlenmediyse publish işlemi gerçekleşmiyor.
Publish işlemi gerçekleştirmenin iki yolu var;
- Doğrudan terminal komutları aracılığıyla yükleme
- Marketplace arayüzü üzerinden yükleme
İlk yöntemi tercih edersek aşağıdaki komutu uygulamamız gerekecek.
vsce publishAncak bu yöntemle ilerlediğimizde Azure DevOps üzerinden bir personal access token oluşturmalıyız, çünkü bir sonraki aşamada bizden bu token isteniyor olacak.
İkinci yöntemi tercih edersek aşağıdaki komut ile bir vs code extension paketi oluşturmalıyız.
vsce packageBu komutu çalıştırdıktan sonra projemizin ana dizininde .vsix uzantılı bir dosya oluşacak. Bu dosyayı marketplace arayüzünde publish new extension dedikten sonra çıkan pop up dialoguna sürükle bırak yaparak eklentimizi yüklemiş oluyoruz.
Artık Microsoft’un pazarına bizim de bir katkımız oldu. Şimdi bu eklentiyi test edelim. Marketplace’e yüklemiş olduğumuz eklentiyi Visual Studio Code’a indirdikten sonra komut paletinde “Generate medium lorem” seçeneğini seçiyoruz.
Kapanış
Az kod yazarak çok kısa bir süre içerisinde bir Visual Studio Code eklentisini pazara sürmüş olduk.
Bu yazıda oluşturulan eklentiye bu adresten, proje koduna ise şu adresten ulaşabilirsiniz.
Bir başka yazıda görüşmek üzere…
