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 Code di Mulai dengan Visual Studio Code.

Visual Studio Code memungkinkan Anda memperluas kemampuan Anda melalui ekstensi. ekstensi Visual Studio Code dapat menambahkan lebih banyak fitur ke pengalaman 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 mengonfigurasi situs web menggunakan Visual Studio Code, dan menggunakan bahasa Liquid bawaan IntelliSense memungkinkan bantuan dengan penyelesaian kode, bantuan, dan petunjuk saat menyesuaikan antarmuka situs web menggunakan Visual Studio Code. Dengan menggunakan ekstensi Visual Studio Code, Anda juga dapat mengonfigurasi portal melalui Microsoft Power Platform CLI.

Catatan

• Anda perlu memastikan bahwa node.js diunduh dan diinstal pada stasiun kerja yang sama dengan 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.

Animasi yang menjelaskan cara menginstal dan mengatur Power Platform Tools.

Prasyarat

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

• Unduh, instal, dan konfigurasikan Visual Studio Code. Informasi selengkapnya: Unduh Visual Studio Code

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

Menginstal ekstensi Visual Studio Code

Setelah menginstal Visual Studio Code, Anda perlu menginstal ekstensi untuk plug-in alat Power Platform 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.

   Pilih Power Platform Tools.

5. Pilih Instal.

6. Verifikasikan ekstensi berhasil diinstal dari pesan status.

Kiat

Ekstensi Alat Power Platform secara otomatis memungkinkan penggunaan perintah CLI Microsoft Power Platform dari dalam Visual Studio Code melalui Visual Studio Terminal Terintegrasi.

Tindakan Power Pages

Tindakan Power Pages menyederhanakan manajemen situs dan mengurangi ketergantungan pada perintah CLI Microsoft Power Platform. Tindakan Power Pages tersedia di panel berjudul Power Pages Actions di bilah sisi Explorer Visual Studio Code.

Dalam panel ini, situs dikategorikan sebagai berikut:

• Situs Aktif: Situs yang saat ini tersedia dan aktif di lingkungan yang dipilih.
• Situs Tidak Aktif: Situs yang ada di lingkungan tetapi saat ini tidak aktif.
• Situs Lain: Situs yang diunduh secara lokal tetapi belum dikaitkan dengan lingkungan yang dipilih.

Mengubah lingkungan

Untuk beralih Lingkungan:

1. Pilih tombol Change Environment dalam panel Tindakan Power Pages.

   Mengubah lingkungan untuk situs

2. Pilih lingkungan yang Anda inginkan dari daftar yang ditampilkan.

Saat Anda memilih lingkungan, daftar situs diperbarui secara otomatis.

Tindakan untuk situs

Berbagai jenis situs menyediakan tindakan khusus konteks yang dapat Anda akses dengan mengklik kanan.

Tindakan Situs Aktif

Klik kanan pada Situs Aktif untuk mengakses tindakan berikut:

• Preview: Menghapus cache dan membuka situs dalam VS Code untuk pratinjau segera.
• Upload: Mengunggah perubahan lokal kembali ke lingkungan Anda.
• Download: Mengunduh konten situs ke folder lokal untuk pengeditan offline.
• Site Details: Menampilkan informasi terperinci tentang situs.
• Reveal in Explorer: Menavigasi ke direktori lokal yang berisi kode situs.
• Buka di studio desain Power Pages: Membuka situs di studio desain Power Pages.
• Jalankan penyaringan CodeQL: Lakukan analisis kode statis pada file HTML dan JavaScript untuk mengidentifikasi kerentanan di basis kode Anda menggunakan CodeQL. Opsi ini hanya tersedia untuk situs yang diunduh secara lokal, ditunjukkan oleh tag Saat ini di daftar situs aktif.
• Bandingkan dengan Lokal: Membuka tampilan perbandingan untuk mengidentifikasi perbedaan antara ruang kerja lokal Anda dan lingkungan jarak jauh. Lihat detail selengkapnya tentang membandingkan fitur konfigurasi situs.

Tindakan Situs tidak Aktif

Situs Tidak Aktif menyediakan tindakan berikut:

• Buka Manajemen Situs: Membuka situs dalam aplikasi manajemen Power Pages.
• Detail Situs: Menyediakan informasi terperinci tentang situs yang dipilih seperti ID situs web, URL situs web, versi model data, dan lainnya.

Tindakan Situs Lain

Situs yang disimpan secara lokal tetapi belum berada di lingkungan Anda menawarkan tindakan berikut:

• Upload Site: Mengunggah situs lokal ke lingkungan Anda yang terhubung. Setelah mengunggah, situs muncul di daftar Situs Tidak Aktif, tempat Anda dapat mengaktifkannya dari beranda Power Pages.
• Reveal in Explorer: Menavigasi ke direktori lokal yang berisi kode situs.

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.

Daftar file di template pemula dengan tema ikon file khusus situs web.

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

Untuk mengaktifkan tema ikon file khusus portal:

1. Buka Visual Studio Code.

2. Pergi ke FilePreferensiTemaTema Ikon File.

3. Pilih tema untuk ikon portal PowerApps.

   

Pratinjau situs

Tindakan pratinjau menggunakan ekstensi Microsoft Edge DevTools untuk Visual Studio Code untuk menyediakan pratinjau situs dalam editor. Fitur ini menjalankan Microsoft Edge DevTools dan browser Microsoft Edge yang disematkan lengkap dengan emulasi perangkat langsung di dalam VS Code, memberi Anda hampir semua kemampuan debugging dan inspeksi yang sama dengan yang ditemukan di Microsoft Edge DevTools lengkap.

Pratinjau selalu menampilkan perubahan yang Anda unggah ke situs, jadi pastikan Anda mendorong pengeditan lokal sebelum membukanya. Setiap kali Anda meluncurkan pratinjau, cache situs akan dihapus secara otomatis untuk memastikan bahwa Anda melihat pembaruan terbaru.

Untuk membuka pratinjau, klik kanan situs aktif Anda di bawah tindakan Power Pages, dan pilih Preview. Tindakan ini membuka browser Microsoft Edge yang disematkan yang menunjuk ke situs yang Anda pilih.

Panel pratinjau terbuka di sisi kanan.

Membandingkan konfigurasi situs

Gunakan opsi Bandingkan dengan Lokal untuk mengidentifikasi perbedaan antara ruang kerja lokal Anda dan konfigurasi situs langsung di lingkungan jarak jauh. Fitur ini membantu Anda mendeteksi perubahan yang tidak diinginkan, untuk memecahkan masalah khusus lingkungan, dan mempertahankan konsistensi sebelum Anda menyinkronkan konfigurasi situs Anda.

Saat Anda memilih tindakan ini, bagian perbandingan Situs terbuka di bawah Tools dalam tampilan Tindakan Power Pages. Bagian ini menampilkan semua file di ruang kerja lokal Anda yang berbeda dari lingkungan, yang menyoroti:

• Ditambahkan: File baru di ruang kerja lokal yang tidak ada dalam lingkungan sistem.
• Dimodifikasi: File di mana kode atau metadata berbeda antara versi lokal dan lingkungan.
• Dihapus: File yang telah dihapus dari ruang kerja lokal tetapi masih ada di lingkungan.

Untuk membandingkan konfigurasi situs langsung dengan ruang kerja lokal:

1. Di bilah samping Explorer, perluas panel Tindakan Power Pages.
2. Di daftar Situs Aktif/Tidak Aktif , klik kanan situs yang ingin Anda bandingkan.
3. Pilih Bandingkan dengan Lokal.

Cuplikan layar memperlihatkan opsi Bandingkan dengan lokal di daftar situs.

Untuk membandingkan folder tertentu:

1. Di bilah samping Explorer, pilih folder (seperti ) dari ruang kerja lokal Anda.
2. Klik kanan dan pilih Power Pages>Bandingkan dengan Lingkungan.

Cuplikan layar memperlihatkan opsi bandingkan di folder ruang kerja lokal.

Mengelola hasil perbandingan

Setelah tab Perbandingan Situs aktif dengan perubahan, Anda bisa mengklik kanan daftar perbandingan untuk mengakses tindakan tambahan:

• Membuka Semua Diff: Membuka editor diff Visual Studio Code untuk setiap file dalam daftar sehingga dapat meninjau semua perubahan sekaligus.
• Perbandingan Refresh: Memindai ulang ruang kerja lokal dan lingkungan jarak jauh untuk memperbarui daftar dengan perubahan terbaru.
• Ekspor sebagai Laporan HTML: Menghasilkan dokumen HTML yang dapat dibagikan yang merinci semua perbedaan yang terdeteksi.
• Ekspor sebagai JSON: Mengekspor data perbandingan dalam format JSON untuk alur kerja otomatis atau pelaporan kustom. Anda dapat berbagi file yang diekspor ini dengan anggota tim, yang dapat mengimpornya ke tampilan mereka sendiri dengan mengklik kanan pada bagian Perbandingan Situs dan memilih opsi Impor Perbandingan .
• Buang Semua Perubahan Lokal: Mengembalikan semua pengeditan lokal agar sesuai dengan versi yang saat ini ada di lingkungan jarak jauh.
• Hapus Perbandingan: Menutup sesi perbandingan saat ini dan menghapus tab hasil.

Kiat

Mengekspor dan berbagi data perbandingan karena JSON memungkinkan tim Anda berkolaborasi dalam menyelesaikan perbedaan konfigurasi tanpa mengharuskan semua orang terhubung ke lingkungan yang sama.

Cuplikan layar memperlihatkan opsi yang tersedia di tab perbandingan situs

Otomatis melengkapi

Kemampuan pelengkapan otomatis dalam ekstensi Visual Studio Code menunjukkan konteks pengeditan saat ini dan elemen pelengkapan otomatis yang relevan melalui IntelliSense.

Cuplikan layar contoh autocomplete untuk ID template halaman.

Tag Liquid

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

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

Cuplikan layar cuplikan dengan contoh penyelesaian tag Liquid.

Objek Liquid

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

Tangkapan layar yang menunjukkan memasukkan objek Liquid.

Tag template

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

Cuplikan layar tag template.

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 tipe objek situs web yang ingin Anda buat.

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

Membuat objek baru.

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:

• Autocomplete hanya mendukung fungsionalitas yang terbatas.

Informasi terkait

Dukungan Power Pages untuk Microsoft Power Platform CLI (pratinjau)