Visual Studio Code uzantısını kullanma

Visual Studio Code masaüstünüzde çalışan ve Windows, macOS ve Linux için kullanılabilen basit ancak güçlü bir kaynak kod düzenleyicisidir. JavaScript, TypeScript ve Node.js için yerleşik destekle birlikte sunulur ve diğer diller (C++, C#, Java, Python, PHP ve Go gibi) ve çalışma zamanları (.NET ve Unity gibi) için zengin bir uzantılar ekosistemine sahiptir. Daha fazla bilgi için bkz. VS Code kullanmaya başlama.

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

• node.js'nin, çalışması için Power Pages için Visual Studio Code ile aynı iş istasyonuna indirildiğinden ve 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] seçeneklerinin aynı anda yüklenmediğinden emin olun. Ayrıntılar için bilinen sorunlara bakın.

Önkoşullar

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

• Visual Studio Code'u indirin, yükleyin ve yapılandırın. Daha fazla bilgi: Visual Studio Code'u indirme

• CLI kullanarak Power Pages CI/CD desteği için ortamınızı ve sisteminizi yapılandırın. Daha fazla bilgi: Microsoft Power Platform CLI (önizleme)

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.

   

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

4. Power Platform Tools'u arayın ve 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.

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 kurulumunu Power Pages'a özgü dosya simgesi temasını kullanacak şekilde güncelleştirmeniz 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.

   

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 simgesini seçin.

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

Ö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 yalnızca HTML dosyası açıldıysa aşağıdaki iletiyi görürsünüz.

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.

Liquid etiketleri

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

Yazmaya başlayın ve bir Liquid etiketleri listesi görünür ve etiketi seçtiğinizde, etiket doğru şekilde biçimlendirilir ve daha fazla giriş için hazır olur.

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.

Şablon etiketleri

İmlecinizi {include ' '} ifadesine yerleştirip <CTRL> - space öğesini seçerek Power Pages Web şablonu önerilerini görebilirsiniz. Varolan web şablonlarının listesi, seçmeniz için görüntülenir.

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 birini sağ seçin, Power Pages 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.

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:

• Otomatik tamamlama özellikleri yalnızca sınırlı işlevleri destekler.
• Canlı önizleme, özel temaları veya Liquid nesnelerini desteklemez.

Ayrıca bkz.

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