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.

Note

• 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.

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 Kode Visual Studio.

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.

Tip

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 Ubah Lingkungan di dalam panel Tindakan Power Pages.

   

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: Buka 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.

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 Kode Visual Studio.

2. Pergi ke File>Preferensi>Tema>Tema 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 Alat 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.

Untuk membandingkan folder tertentu:

1. Di bilah samping Explorer, pilih folder (seperti web-pages) dari ruang kerja lokal Anda.
2. Klik kanan dan pilih Halaman Daya>Bandingkan dengan Lingkungan.

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.

Tip

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

Pelengkapan otomatis

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

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.

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 templat web Power Pages dengan menempatkan kursor Anda di pernyataan {include ' '} dan memilih <CTRL> - space. Daftar templat 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)

Buat operasi

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.

Anda perlu menentukan lebih banyak parameter untuk membuat objek.

Objek	Parameters
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.

Note

Objek yang dihapus dapat dikembalikan dari keranjang sampah desktop.

Limitations

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)