Bagikan melalui


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.

Animasi yang menjelaskan cara menginstal dan mengatur Power Platform Tools.

Prasyarat

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

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.

    Ekstensi Visual Studio Code.

  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.

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.

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

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.

    Cuplikan layar menunjukkan pemilihan tema untuk Power Apps Ikon Portal.

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 Tangkapan layar tombol pratinjau. kanan atas saat file HTML terbuka dalam mode edit.

Tangkapan layar pratinjau halaman.

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

Tangkapan layar yang menunjukkan daftar file, file terbuka di Visual Studio Editor Kode, dan pratinjau di sisi kanan.

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.

Cuplikan layar menunjukkan menjalankan perintah yang dikontribusikan: 'microsoft-powerapps-portals.preview-show' gagal.

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.

Cuplikan layar dengan contoh pelengkapan otomatis untuk ID templat halaman.

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.

Screenshot cuplikan dengan contoh penyelesaian tag Liquid.

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.

Tangkapan layar menunjukkan memasukkan 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.

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

Selain itu, 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:

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

Power Pages dukungan untuk Microsoft Power Platform CLI (pratinjau)