Aracılığıyla paylaş


Visual Studio Code uzantısını kullanma

Visual Studio Code, Windows, macOS ve Linux için hafif ve güçlü bir kaynak kodu düzenleyicisidir. JavaScript, TypeScript ve Node.js'yi 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ı ekosistemine sahiptir. VS Code ile Başlayın'da Visual Studio Code hakkında daha fazla bilgi edinin.

Visual Studio Code, özelliklerinizi uzantılar 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 Power Pages ile portallarıyla çalışmak için Visual Studio Code uzantısını kullanabilirsiniz.

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

Power Platform Tools Visual Studio Code kullanarak web sisteleri yapılandırma özelliği sunar ve Visual Studio Code kullanarak web siteleri arabirimini özelleştirirken kod tamamlama, destek ve ipucu ile yardım sağlayan yerleşik Liquid Dili IntelliSense hizmetini kullanır. Visual Studio Code uzantısını kullanarak Microsoft Power Platform CLI ile portalları da yapılandırabilirsiniz.

Not

  • Power Pages özelliğinin çalışması için node.js'in Visual Studio Code ile aynı iş istasyonuna indirildiğinden ve kurulduğundan emin olmanız gerekir.
  • Yalnızca Power Platform Tools'un yüklendiğinden ve Power Platform Tools ile Power Platform Tools [ÖNİZLEME] seçeneklerinin aynı anda yüklenmediğinden 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.

Önkoşullar

Power Pages için Visual Studio Code uzantısını kullanmadan önce şunları yapmanız gerekir:

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

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

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

  1. Visual Studio Code'u açın.

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

    Visual Studio Code uzantısı.

  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.

Web sitesi içeriğini indir

Microsoft Dataverse ortamında kimlik doğrulaması yapmak ve web sitesi içeriklerini indirmek için Microsoft Power Platform CLI'yı Power Pages ile kullanma - web sitesi içeriklerini indirme öğreticisine başvurun.

İpucu

Power Platform Tools Uzantısı, Visual Studio Tümleşik Terminali aracılığıyla Visual Studio Code içinden Microsoft Power Platform CLI komutları kullanılarak otomatik olarak etkinleştirilir.

Dosya simgeleri

Power Pages için Visual Studio Code uzantısı, indirilen web sitesi içeriklerinin içindeki dosyaları ve klasörleri otomatik olarak belirler ve simgelerini gösterir.

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

Visual Studio Code, Power Pages'a özgü 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 Power Pages özel dosya simgesi temasını kullanacak şekilde güncellemeniz gerekir.

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

  1. Visual Studio Code'u açın.

  2. Dosya>Tercihler>Tema>Dosya Simge Teması'na gidin

  3. PowerApps portalları simgelerinin temasını seçin.

    Ekran görüntüsü Power Apps Portal İkonları için temanın seçilmesini gösteriyor.

Canlı önizleme

Visual Studio Code uzantısı, geliştirme deneyimi sırasında Visual Studio Code arabirimindeki Power Pages içerik sayfasını görüntülemek için canlı bir önizleme seçeneği sağlar.

Önizlemeyi görmek için, düzenleme modunda bir HTML dosyası açık durumdayken sağ üstteki Önizleme butonunun ekran görüntüsü. simgesini seçin.

Sayfa önizlemesinin ekran görüntüsü.

Önizleme bölmesi, düzenlenen sayfanın sağ tarafında açılır.

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

Önizleme özelliğinde önizlemenin gösterilmesi için HTML işaretlemesini oluşturan diğer dosyaların da aynı Visual Studio Code oturumunda açık olması gerekir. Örneğin, Visual Studio Code kullanılarak klasör yapısı açılmadan sadece HTML dosyası açıldığında aşağıdaki mesaj görüntülenir.

Ekran görüntüsü, katkıda bulunulan komutun çalıştırılmasının başarısız olduğunu gösteriyor: 'microsoft-powerapps-portals.preview-show'.

Bu sorun oluştuğunda Dosya > Klasör aç seçeneğini kullanarak klasörü açın ve önizlemeyi yeniden denemeden önce açılacak indirilmiş web sitesi içeriği klasörünü seçin.

Otomatik Tamamlama

Visual Studio Code uzantısının otomatik tamamlama özelliği, düzenlenmekte olan 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

Visual Studio Code kullanarak indirilen içeriği özelleştirirken artık Power Pages Liquid etiketler 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 <CTRL + space> öğesini seçin. Nesnede daha fazla özellik varsa, bir . girebilirsiniz ve ardından Liquid nesnesinin belirli özelliklerini görmek için tekrar <CTRL + space> öğesini seçin.

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

Şablon etiketleri

İmlecinizi {include ' '} ifadesine yerleştirip <CTRL> - space öğesini 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 öğesini seçin ve oluşturmak istediğiniz web sitesi nesnesi türünü seçin.

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

Yeni bir nesne oluşturur.

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

Object 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 gezintiden, Power Pages bileşenlerini yeniden adlandırmak veya silmek için bağlam menüsünü kullanabilirsiniz.

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'ta aşağıdaki sınırlamalar geçerlidir:

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