Menggunakan ekstensi Visual Studio Code

Visual Studio Code adalah editor kode sumber ringan namun kuat yang berjalan di desktop dan tersedia untuk Windows, macOS, dan Linux. Aplikasi ini dilengkapi dukungan built-in untuk JavaScript, TypeScript, dan Node.js serta memiliki ekosistem eksistensi yang kaya untuk bahasa lain (seperti C+, C#, Java, Python, PHP, dan Go) dan runtime (seperti .NET dan Unity). Untuk informasi lebih lanjut, lihat Memulai 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 harus memastikan bahwa node.js telah diunduh dan diinstal di desktop yang sama sebagai Visual Studio Code agar fitur Power Pages berfungsi.
• 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:

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.

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 yang spesifik untuk situs web, Anda harus memperbarui instans Visual Studio Code agar dapat menggunakan tema ikon file khusus Power Pages.

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 dibuka di 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. Contohnya, jika hanya file HTML yang dibuka tanpa struktur folder yang dibuka menggunakan Visual Studio Code, Anda akan melihat pesan berikut.

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 dengan mengetik dan daftar tag Liquid akan muncul, setelah Anda memilih tag, tag akan diformat dengan benar dan siap untuk input lebih banyak.

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 akan 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 pilihan menu konteks untuk membuat komponen situs web baru, memilih kanan salah satu objek yang didukung, memilih Power Pages dan memilih jenis objek situs web yang ingin Anda buat.

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

Anda harus menentukan parameter lainnya 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:

• Autocomplete hanya mendukung fungsionalitas yang terbatas.
• Pratinjau langsung tidak mendukung tema kustom atau objek Liquid.

Baca juga

Dukungan Power Pages untuk Microsoft Power Platform CLI (pratinjau)