Menggunakan ekstensi Visual Studio Code

Visual Studio Code adalah editor kode sumber yang ringan dan kuat untuk Windows, macOS, dan Linux. Ini mendukung JavaScript, TypeScript, dan Node.js dan memiliki ekosistem ekstensi yang kaya untuk bahasa lain seperti C++, C#, Java, Python, PHP, dan Go, dan runtime seperti .NET dan Unity. Pelajari selengkapnya tentang Visual Studio Kode di Mulai menggunakan VS Code.

Visual Studio Code memungkinkan Anda memperluas kemampuan melalui ekstensi. Ekstensi Visual Studio Code dapat menambahkan lebih banyak fitur ke pengalaman secara keseluruhan. Dengan rilis fitur ini, Anda sekarang dapat menggunakan ekstensi Visual Studio Code untuk bekerja dengan Power Pages.

Ekstensi Visual Studio Code untuk Power Pages

Power Platform Tools menambahkan kemampuan untuk mengkonfigurasi situs web menggunakan Visual Studio Code, dan menggunakan IntelliSense bahasa Liquid built-in yang mengaktifkan bantuan dengan penyelesaian kode, asistensi, dan petunjuk saat menyesuaikan antarmuka situs web menggunakan Visual Studio Code. Menggunakan ekstensi Visual Studio Code, Anda juga dapat mengkonfigurasi portal melalui dukungan portal untuk Microsoft Power Platform CLI.

Prasyarat

Sebelum menggunakan ekstensi Visual Studio Code untuk Power Pages, Anda harus:

• Mengunduh, menginstal, dan mengkonfigurasikan Visual Studio Code. Informasi lebih lanjut: Mengunduh Visual Studio Code

• Konfigurasikan lingkungan dan sistem untuk dukungan CI/CD Power Pages menggunakan CLI. Informasi lebih lanjut: Microsoft Power Platform CLI (pratinjau)

Instal ekstensi Visual Studio Code

Setelah menginstal Visual Studio Code, Anda harus menginstal ekstensi plug-in Power Platform tools untuk Visual Studio Code.

Untuk menginstal ekstensi Visual Studio Code:

1. Buka Visual Studio Code.

2. Pilih ekstensi dari panel kiri.

   

3. Pilih ikon Pengaturan dari kanan atas pada panel ekstensi.

4. Cari dan pilih Power Platform Tools.

   

5. Pilih Instal.

6. Verifikasikan ekstensi berhasil diinstal dari pesan status.

Unduh konten situs web

Untuk mengautentikasi terhadap lingkungan Microsoft Dataverse dan mengunduh konten situs web, lihat tutorial Gunakan Microsoft Power Platform CLI dengan Power Pages - unduh konten situs web.

Ikon File

Ekstensi Visual Studio Code untuk Power Pages secara otomatis mengidentifikasi dan menampilkan ikon untuk file dan folder di dalam konten situs web yang diunduh.

Visual Studio Code menggunakan tema ikon file default yang tidak menampilkan ikon khusus Power Pages. Untuk melihat ikon file khusus untuk situs web Anda, Anda harus memperbarui Visual Studio instans Kode untuk menggunakan Power Pages tema ikon file tertentu.

Untuk mengaktifkan tema ikon file khusus portal:

1. Buka Visual Studio Code.

2. Buka File>preferensi>tema>tema ikon file

3. Pilih tema untuk ikon portal PowerApps.

   

Pratinjau langsung

Ekstensi Visual Studio Code mengaktifkan pilihan pratinjau langsung untuk melihat halaman konten Power Pages di dalam antarmuka Visual Studio Code selama pengalaman pengembangan.

Untuk melihat pratinjau, pilih dari kanan atas saat file HTML terbuka dalam mode edit.

Panel pratinjau akan terbuka di sisi kanan halaman yang sedang diedit.

Fitur pratinjau mengharuskan file lain juga terbuka di sesi Visual Studio Code yang sama yang merupakan mark-up HTML agar pratinjau ditampilkan. Misalnya, jika hanya file HTML yang dibuka tanpa struktur folder yang dibuka menggunakan Visual Studio Kode, pesan berikut muncul.

Ketika masalah ini terjadi, buka folder menggunakan File > Buka folder dan pilih folder konten situs web yang diunduh untuk dibuka sebelum Anda mencoba mempratinjau lagi.

Otomatis melengkapi

Kemampuan autocomplete dalam ekstensi Visual Studio Code menunjukkan konteks saat ini sedang diedit dan elemen melengkapi otomatis yang relevan melalui IntelliSense.

Tag Liquid

Ketika menyesuaikan konten yang diunduh menggunakan Visual Studio Code, Anda sekarang dapat menggunakan IntelliSense untuk tag liquid Power Pages.

Mulailah mengetik untuk melihat daftar tag Liquid. Pilih tag untuk memformatnya dengan benar dan lanjutkan dengan input Anda.

Anda Objek Liquid

Anda dapat melihat penyelesaian kode objek Liquid dengan memasukkan {{ }}. Dengan kursor yang diletakkan di antara tanda kurung, pilih <CTRL + space> untuk menampilkan daftar objek Liquid yang dapat Anda pilih. Jika objek memiliki lebih banyak properti, Anda dapat memasukkan . dan kemudian pilih <CTRL + space> lagi untuk melihat properti spesifik dari objek Liquid.

Tag template

Anda dapat melihat saran template web Power Pages dengan kursor pada pernyataan {include ' '} dan memilih <CTRL> - space. Daftar template web yang ada muncul untuk Anda pilih.

Membuat, menghapus, dan mengganti nama objek situs web

Dari dalam Visual Studio Code, Anda dapat membuat, menghapus, dan mengganti nama komponen situs web berikut:

• Halaman web
• Template halaman
• Templat web
• Cuplikan Konten
• Aset baru (file Web)

Operasi buat

Anda dapat menggunakan opsi menu konteks untuk membuat komponen situs web baru. Klik kanan salah satu objek yang didukung, pilih Power Pages, dan pilih jenis objek situs web yang ingin Anda buat.

Selain itu, Anda dapat menggunakan palet perintah Visual Studio Code dengan memilih Ctrl + Shift + P.

Anda perlu menentukan lebih banyak parameter untuk membuat objek.

Operasi Ubah nama dan hapus

Dari navigasi file, Anda dapat menggunakan menu konteks untuk mengganti nama atau menghapus komponen Power Pages.

Pembatasan

Pembatasan berikut saat ini berlaku pada Power Platform Tools untuk portal:

• Fitur pelengkapan otomatis hanya mendukung fungsionalitas terbatas.
• Pratinjau langsung tidak mendukung tema kustom atau objek Liquid.

Informasi terkait

Power Pages dukungan untuk Microsoft Power Platform CLI (pratinjau)