Visual Studio Code uzantısını kullanma

Visual Studio Code Windows, macOS ve Linux için basit ve güçlü bir kaynak kodu düzenleyicisidir. JavaScript, TypeScript ve Node.js destekler ve C++, C#, Java, Python, PHP ve Go gibi diğer diller ve .NET ve Unity gibi çalışma zamanları için zengin bir uzantı ekosistemi vardır. VS Code ile çalışmaya başlama bölümünde Visual Studio Code hakkında daha fazla bilgi edinin.

Visual Studio Code özelliğinizi extensions aracılığıyla genişletmenize olanak tanır. Visual Studio Code uzantılar genel deneyime daha fazla özellik ekleyebilir. Bu özelliğin yayımlanmasıyla birlikte artık Power Pages ile çalışmak için Visual Studio Code uzantısını kullanabilirsiniz.

Power Pages için Visual Studio Code uzantısı

Power Platform Araçları, Visual Studio Code kullanarak web sitelerini yapılandırma yeteneği ekler ve yerleşik Liquid dil IntelliSense özelliğini kullanarak kod tamamlama, yardım ve ipucu verme desteğiyle Visual Studio Code aracılığıyla web siteleri arayüzünü özelleştirmenize olanak tanır. Visual Studio Code uzantısını kullanarak portalları Microsoft Power Platform CLI aracılığıyla da yapılandırabilirsiniz.

Not

  • Power Pages özelliklerinin çalışması için, node.js'in Visual Studio Code ile aynı iş istasyonuna indirilip yüklendiğinden emin olmanız gerekir.
  • Yalnızca Power Platform Tools'un yüklendiğinden ve Power Platform Tools ile Power Platform Tools [ÖNİZLEME] ürünlerinin aynı anda yüklü olmadığından emin olun. Ayrıntılar için bilinen sorunlara bakın.

Power Platform Tools'un nasıl yükleneceğini ve ayarlanacağını açıklayan animasyon.

Ön koşullar

Power Pages için Visual Studio Code uzantısını kullanmadan önce:

Visual Studio Code uzantısını yükleme

Visual Studio Code yükledikten sonra Visual Studio Code için Power Platform araçları eklentisinin uzantısını yüklemeniz gerekir.

Visual Studio Code uzantısını yüklemek için:

  1. Visual Studio Code açın.

  2. Sol bölmeden Uzantılar'ı seçin.

    Visual Studio Code extension.

  3. Uzantılar bölmesinin sağ üst köşesinden Ayarlar simgesini seçin.

  4. Power Platform Tools'u arayın ve seçin.

    Power Platform Tools'u seçin.

  5. Yükle'yi seçin.

  6. Durum iletilerinden uzantının başarıyla yüklendiğini doğrulayın.

İpucu

Power Platform Araçları Uzantısı, Visual Studio Code içinden Visual Studio Tümleşik Terminal Microsoft Power Platform CLI komutlarının kullanılmasını otomatik olarak etkinleştirir.

Power Pages Eylemleri

Power Pages Eylemler site yönetimini kolaylaştırır ve Microsoft Power Platform CLI komutlarına bağlılığı azaltır. Power Pages Eylemleri, Visual Studio Code Gezgin kenar çubuğundaki Power Pages Actions başlıklı bölmede kullanılabilir.

Bu bölmede, siteler aşağıdaki gibi kategorilere ayrılır:

  • Etkin Siteler: Seçili ortamda şu anda kullanılabilir ve etkin olan siteler.
  • Etkin Olmayan Siteler: Ortamda bulunan ancak şu anda etkin olmayan siteler.
  • Diğer Siteler: Yerel olarak indirilen ancak henüz seçilen ortamla ilişkilendirilmemiş siteler.

Değişen ortamlar

Ortamları değiştirmek için:

  1. Power Pages Eylemler bölmesinde Ortamı Değiştir düğmesini seçin.

    Siteler için ortamı değiştirme

  2. Görüntülenen listeden istediğiniz ortamı seçin.

Bir ortam seçtiğinizde, site listesi otomatik olarak güncelleştirilir.

Siteler için eylemler

Farklı site türleri, sağ tıklayarak erişebileceğiniz bağlama özgü eylemler sağlar.

Etkin Siteler eylemleri

Aşağıdaki eylemlere erişmek için Etkin Siteler'e sağ tıklayın:

  • Önizleme: Önbelleği temizler ve siteyi anında önizleme için VS Code içinde açar.
  • Yükle: Yerel değişiklikleri ortamınıza geri yükler.
  • İndir: Site içeriğini çevrimdışı düzenleme için yerel bir klasöre indirir.
  • Site Ayrıntıları: Site hakkında ayrıntılı bilgileri görüntüler.
  • Explorer'da Göster: Sitenin kodunu içeren yerel dizine gider.
  • Open in Power Pages design studio: Siteyi Power Pages design studio'da açar.
  • CodeQL filtrelemesini çalıştırma: CodeQL kullanarak kod tabanınızdaki güvenlik açıklarını belirlemek için HTML ve JavaScript dosyalarında statik kod analizi gerçekleştirin. Bu seçenek yalnızca etkin siteler listesindeki Geçerli etiketiyle gösterilen yerel olarak indirilen siteler için kullanılabilir.
  • Yerel ile karşılaştırma: Yerel çalışma alanınızla uzak ortamınız arasındaki farkları belirlemek için bir karşılaştırma görünümü açar. Site yapılandırma özelliğini karşılaştırma hakkında daha fazla ayrıntıya bakın.

Etkin olmayan Site eylemleri

Etkin Olmayan Siteler şu eylemleri sağlar:

  • Site Yönetimini Aç: Siteyi Power Pages yönetim uygulamasında açar.
  • Site Ayrıntıları: Seçilen site hakkında web sitesi kimliği, web sitesi URL'si, veri modeli sürümü ve daha fazlası gibi ayrıntılı bilgiler sağlar.

Diğer Siteler eylemleri

Yerel olarak depolanan ancak henüz ortamınızda olmayan siteler aşağıdaki eylemleri sunar:

  • Siteyi Yükle: Yerel siteyi bağlı ortamınıza yükler. Yüklemenin ardından site, Etkin Olmayan Siteler listesinde görünecek ve buradan Power Pages ana sayfadan aktifleştirilebilecektir.
  • Explorer'da Göster: Sitenin kodunu içeren yerel dizine gider.

Dosya simgeleri

Power Pages için Visual Studio Code uzantısı, indirilen web sitesi içeriğinin içindeki dosya ve klasörlerin simgelerini otomatik olarak tanımlar ve gösterir.

Web sitesine özgü dosya simgesi temasıyla başlangıç şablonundaki dosyaların listesi.

Visual Studio Code, belirli Power Pages simgeleri göstermeyen varsayılan dosya simgesi temasını kullanır. Web sitelerinize özgü dosya simgelerini görüntülemek için Visual Studio Code örneğini belirli Power Pages dosya simgesi temasını kullanacak şekilde güncelleştirmeniz gerekir.

Portallara özgü dosya simgesi temasını etkinleştirmek için:

  1. Visual Studio Code açın.

  2. DosyaTercihleriTemaDosya Simgesi Teması'na gidin.

  3. PowerApps portalları simgeleri için temayı seçin.

    Ekran görüntüsü, Power Apps Portallar İkonları temasının seçimini gösterir.

Site önizlemesi

Önizleme eylemi, düzenleyici içi site önizlemesi sağlamak üzere Visual Studio Code için Microsoft Edge DevTools uzantısını kullanır. Bu özellik, VS Code'un içinde cihaz öykünmesiyle beraber çalışan Microsoft Edge Geliştirici Araçları ve gömülü bir Microsoft Edge tarayıcısı çalıştırarak, tam Microsoft Edge Geliştirici Araçları'nda bulunan hata ayıklama ve inceleme özelliklerinin neredeyse tamamını size sunar.

Önizleme her zaman sitenize yüklediğiniz değişiklikleri gösterir, bu nedenle açmadan önce yerel düzenlemeleri yaptığınızdan emin olun. Önizlemeyi her başlattığınızda, en son güncelleştirmeleri görüntülediğinizden emin olmak için site önbelleği otomatik olarak temizlenir.

Önizlemeyi açmak için Power Pages Actions altında etkin sitenize sağ tıklayın ve Preview öğesini seçin. Bu eylem, seçtiğiniz siteye işaret eden eklenmiş Microsoft Edge tarayıcıyı açar.

Power Pages site önizleme eyleminin ekran görüntüsü.

Önizleme bölmesi sağ tarafta açılır.

Dosya listesini gösteren ekran görüntüsü, dosyayı Visual Studio Code düzenleyicide açma ve sağ tarafta önizleme.

Site yapılandırmasını karşılaştırma

Yerel çalışma alanınızla uzak ortamdaki canlı site yapılandırması arasındaki farkları belirlemek için Yerel ile Karşılaştır seçeneğini kullanın. Bu özellik, istenmeyen değişiklikleri algılamanıza, ortama özgü sorunları gidermenize ve site yapılandırmalarınızı eşitlemeden önce tutarlılığı korumanıza yardımcı olur.

Bu eylemi seçtiğinizde, Power Pages Eylemler görünümünde Tools altında Site Karşılaştırması bölümü açılır. Bu bölümde, yerel çalışma alanınızda ortamdan farklı olan tüm dosyalar görüntülenir ve vurgulanır:

  • Eklendi: Yerel çalışma alanında oluşturulan ve ortamda bulunmayan yeni dosyalar.
  • Değiştirildi: Kodun veya meta verilerin yerel ve ortam sürümleri arasında farklılık gösterdiği dosyalar.
  • Silindi: Yerel çalışma alanından kaldırılmış ancak ortamda hala var olan dosyalar.

Canlı site yapılandırmasını yerel çalışma alanıyla karşılaştırmak için:

  1. Gezgin kenar çubuğunda Power Pages Actions bölmesini genişletin.
  2. Etkin/Etkin Olmayan Siteler listesinde, karşılaştırmak istediğiniz siteye sağ tıklayın.
  3. Yerel ile Karşılaştır'ı seçin.

Site listesindeki Yerel seçenekle karşılaştır seçeneğini gösteren ekran görüntüsü.

Belirli bir klasörü karşılaştırmak için:

  1. Gezgin kenar çubuğunda, yerel çalışma alanınızdan bir klasör (örneğin ) seçin.
  2. Sağ tıklayın ve Power Pages>Çevre ile Karşılaştır öğesini seçin.

Yerel çalışma alanı klasöründe karşılaştırma seçeneğini gösteren ekran görüntüsü.

Karşılaştırma sonuçlarını yönetme

Site Karşılaştırma sekmesi değişikliklerle etkinleştirildikten sonra, ek eylemlere erişmek için karşılaştırma listesine sağ tıklayabilirsiniz:

  • Tüm Farkları Aç: Tüm değişiklikleri aynı anda gözden geçirmek için listedeki her dosyanın Visual Studio Code fark düzenleyicisini açar.
  • Yenileme Karşılaştırması: Listeyi en son değişikliklerle güncelleştirmek için yerel çalışma alanını ve uzak ortamı yeniden tarar.
  • HTML Raporu Olarak Dışarı Aktar: Algılanan tüm farklılıkların ayrıntılarını içeren paylaşılabilir bir HTML belgesi oluşturur.
  • JSON olarak dışarı aktarma: Otomatik iş akışları veya özel raporlama için karşılaştırma verilerini JSON biçiminde dışarı aktarır. Dışarı aktarılan bu dosyayı, Site Karşılaştırması bölümüne sağ tıklayıp Karşılaştırmayı İçeri Aktar seçeneğini belirleyerek kendi görünümlerine aktarabilen ekip üyeleriyle paylaşabilirsiniz.
  • Tüm Yerel Değişiklikleri At: Tüm yerel düzenlemeleri şu anda uzak ortamda bulunan sürümle eşleşecek şekilde geri alır.
  • Karşılaştırmayı Kaldır: Geçerli karşılaştırma oturumunu kapatır ve sonuçlar sekmesini temizler.

İpucu

Karşılaştırma verilerini JSON olarak dışarı aktarmak ve paylaşmak, ekibinizin herkesin aynı ortama bağlanmasına gerek kalmadan yapılandırma farklılıklarını çözmek için işbirliği yapmasına olanak tanır.

Site karşılaştırma sekmesinde kullanılabilir seçenekleri gösteren ekran görüntüsü

Otomatik Tamamlama

Visual Studio Code uzantısındaki otomatik tamamlama özelliği, düzenlenen geçerli bağlamı ve IntelliSense aracılığıyla ilgili otomatik tamamlama öğelerini gösterir.

Sayfa şablonu kimliği için otomatik tamamlama örneği ekran görüntüsü.

Liquid etiketleri

İndirilen içeriği Visual Studio Code kullanarak özelleştirirken artık Power Pages Liquid etiketleri için IntelliSense kullanabilirsiniz.

Liquid etiketlerinin listesini görmek için yazmaya başlayın. Doğru şekilde biçimlendirmek için bir etiket seçin ve girişinize devam edin.

Liquid etiketi tamamlama örneğini içeren bir parçacığın ekran görüntüsü.

Liquid nesneleri

girerek tamamlanmış Liquid nesne kodunu görebilirsiniz. İmleç köşeli ayraçlar arasında yerleştirildikten sonra seçebileceğiniz Liquid nesnelerinin listesini görüntülemek için öğesini seçin. Nesnede daha fazla özellik varsa, bir . girebilirsiniz ve ardından Liquid nesnesinin belirli özelliklerini görmek için tekrar öğesini seçin.

Ekran görüntüsü bir Liquid nesnesinin girilmesini gösteriyor.

Şablon etiketleri

İmlecinizi {include ' '} deyimine getirip <CTRL> - space'ı seçerek Power Pages web şablonu önerilerini görebilirsiniz. Seçmeniz için mevcut web şablonlarının bir listesi görüntülenir.

Şablon etiketlerinin ekran görüntüsü.

Web sitesi nesnelerini oluşturma, silme ve yeniden adlandırma

Visual Studio Code içinden aşağıdaki web sitesi bileşenlerini oluşturabilir, silebilir ve yeniden adlandırabilirsiniz:

  • Web sayfaları
  • Sayfa şablonları
  • Web şablonları
  • İçerik Kod Parçacıkları
  • Yeni varlıklar (Web dosyaları)

Oluşturma işlemleri

Yeni web sitesi bileşenleri oluşturmak için bağlam menüsü seçeneklerini kullanabilirsiniz. Desteklenen nesnelerden birine sağ tıklayın, Power Pages seçin ve oluşturmak istediğiniz web sitesi nesne türünü seçin.

Alternatif olarak, Ctrl + Shift + P seçerek Visual Studio Code komut paletini kullanabilirsiniz.

Yeni bir nesne oluşturur.

Nesneyi oluşturmak için daha fazla parametre belirtmeniz gerekir.

Nesne Parametreler
Web sayfaları Ad, sayfa şablonu, üst sayfa
Sayfa şablonları Ad, web şablonu
Web şablonları Ad
İçerik Kod Parçacıkları Ad ve kod parçacığının HTML mi metin mi olacağı.
Yeni varlıklar (Web dosyaları) Adı, üst sayfa ve yüklenecek dosyayı seçin.

Yeniden adlandır ve sil işlemleri

Dosya gezintisinden bağlam menüsünü kullanarak Power Pages bileşenlerini yeniden adlandırabilir veya silebilirsiniz.

Not

Silinen nesneler, masaüstünden geri dönüşüm kutusundan geri yüklenebilir.

Sınırlamalar

Şu anda portallar için Power Platform Tools'da aşağıdaki sınırlamalar geçerlidir:

  • Otomatik tamamlama özellikleri yalnızca sınırlı işlevleri destekler.

Microsoft Power Platform CLI (önizleme) için Power Pages desteği

  • Last updated on