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.
Catatan
- Anda perlu memastikan bahwa node.js diunduh dan diinstal di workstation yang sama dengan Visual Studio Kode agar fitur berfungsi Power Pages .
- Pastikan hanya Power Platform Tools yang diinstal dan bukan Power Platform Tools dan Power Platform Tools [PRATINJAU]. Untuk informasi rinci, lihat masalah umum.
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:
Buka Visual Studio Code.
Pilih ekstensi dari panel kiri.
Pilih ikon Pengaturan dari kanan atas pada panel ekstensi.
Cari dan pilih Power Platform Tools.
Pilih Instal.
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.
Tip
Ekstensi Power Platform Tools diaktifkan secara otomatis menggunakan perintah Microsoft Power Platform CLI dari dalam Visual Studio Code melalui Terminal Terintegrasi Visual Studio.
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:
Buka Visual Studio Code.
Buka File>preferensi>tema>tema ikon file
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.
Objek | Parameter |
---|---|
Halaman web | Nama, template halaman, halaman induk |
Template halaman | Nama, Template web |
Templat web | Nama |
Cuplikan Konten | Nama, dan jika cuplikan adalah HTML atau teks. |
Aset baru (file Web) | Nama, halaman induk, dan pilih file untuk diunggah. |
Operasi Ubah nama dan hapus
Dari navigasi file, Anda dapat menggunakan menu konteks untuk mengganti nama atau menghapus komponen Power Pages.
Catatan
Objek yang dihapus dapat dikembalikan dari keranjang sampah desktop.
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)