Gunakan sambungan Visual Studio Code

Visual Studio Kod ialah editor kod sumber yang ringan dan berkuasa untuk Windows, macOS dan Linux. Ia menyokong JavaScript, TypeScript dan Node.js serta mempunyai ekosistem sambungan yang kaya untuk bahasa lain seperti C++, C#, Java, Python, PHP dan Go, dan masa jalan seperti .NET dan Unity. Ketahui lebih lanjut tentang Visual Studio Kod dalam Bermula dengan VS Code.

Visual Studio Code membolehkan anda melanjutkan keupayaan anda melalui sambungan. Sambungan Visual Studio Code boleh menambah lebih banyak ciri untuk pengalaman keseluruhan. Dengan pelancaran ciri ini, anda kini boleh menggunakan sambungan Visual Studio Code untuk bekerja dengan Power Pages.

Sambungan Visual Studio Code untuk Power Pages

Power Platform Tools menambahkan keupayaan untuk mengkonfigurasi tapak web menggunakan Visual Studio Code, dan menggunakan bahasa Liquid terbinaIntelliSense mendayakan membantu dengan kod siap, bantuan dan membayangkan sambil menyesuaikan antara muka tapak web menggunakan Visual Studio Code. Menggunakan sambungan Visual Studio Code anda juga boleh mengkonfigurasi portal melalui Microsoft Power Platform CLI.

Nota

  • Anda perlu memastikan bahawa node.js dimuat turun dan dipasang pada stesen kerja yang sama dengan Visual Studio Kod untuk ciri berfungsi Power Pages .
  • Pastikan bahawa hanya Power Platform Tools yang dipasang dan bukan kedua-dua Power Platform Tools dan Power Platform Tools [PRATONTON]. Lihat isu yang diketahui untuk butiran.

Animasi yang menerangkan cara untuk memasang dan menetapkan Power Platform Tools.

Prasyarat

Sebelum menggunakan sambungan Visual Studio Code untuk Power Pages, anda mesti:

Pasang sambungan Visual Studio Code

Selepas anda memasang Visual Studio Code, anda perlu memasang sambungan untuk pasang masuk Power Platform Tools untuk Visual Studio Code.

Untuk memasang sambungan Visual Studio Code:

  1. Buka Visual Studio Code.

  2. Pilih Sambungan dari anak tetingkap kiri.

    Sambungan Visual Studio Code.

  3. Pilih ikon Tetapan dari kanan atas pada anak tetingkap sambungan.

  4. Carian untuk dan pilih Power Platform Tools.

    Pilih Power Platform Tools.

  5. Pilih Pasang.

  6. Sahkan sambungan yang berjaya dipasang dari mesej status.

Muat turun kandungan tapak web

Untuk pengesahan terhadap persekitaran Microsoft Dataverse dan untuk memuat turun kandungan portal, rujuk kepada tutorial Gunakan Microsoft Power Platform CLI dengan Power Pages - muat turun kandungan tapak web.

Tip

Sambungan Power Platform Tools secara automatik mendayakan menggunakan arahan Microsoft Power Platform CLI daripada dalam Visual Studio Code melalui Terminal Disepadukan Visual Studio.

Ikon fail

Sambungan Visual Studio Code untuk Power Pages secara automatik dan menunjukkan ikon untuk fail dan folder dalam kandungan tapak web yang dimuat turun.

Senarai fail dalam templat pemula dengan tema ikon fail khusus tapak web.

Visual Studio Code menggunakantema ikon fail lalai yang tidak menunjukkan ikon khusus Power Pages. Untuk melihat ikon fail khusus untuk tapak web anda, anda perlu mengemas kini Visual Studio contoh Kod untuk menggunakan Power Pages tema ikon fail tertentu.

Untuk mendayakan tema ikon fail khusus portal:

  1. Buka Visual Studio Code.

  2. Pergi ke File>Keutamaan>Tema>Tema Ikon Fail

  3. Pilih tema untuk Ikon portal PowerApps.

    Tangkapan skrin menunjukkan pemilihan tema untuk Power Apps Ikon Portal.

Pratonton langsung

Sambungan Visual Studio Code mendayakan pilihan pratonton langsung untuk melihat halaman kandungan Power Pages dalam antara muka Visual Studio Code semasa pengalaman pembangunan.

Untuk melihat pratonton, pilih Tangkapan skrin butang pratonton. dari bahagian atas sebelah kanan apabila fail HTML dibuka dalam mod edit.

Tangkapan skrin pratonton halaman.

Anak tetingkap pratonton dibuka pada sebelah kanan halaman yang sedang diedit.

Tangkapan skrin menunjukkan senarai fail, buka fail dalam Visual Studio editor Kod dan pratonton di sebelah kanan.

Ciri pratonton memerlukan fail lain juga dibuka dalam sesi Visual Studio Code yang sama yang membentuk tokokan HTML agar pratonton ditunjukkan. Sebagai contoh, jika hanya fail HTML dibuka tanpa struktur folder dibuka menggunakan Visual Studio Kod, mesej berikut muncul.

Tangkapan skrin menunjukkan menjalankan arahan yang disumbangkan: 'microsoft-powerapps-portals.preview-show' gagal.

Apabila masalah ini berlaku, buka folder menggunakan Fail > Buka folder dan pilih folder kandungan tapak web yang dimuat turun untuk dibuka sebelum anda cuba mempratonton semula.

Autolengkap

Keupayaan autolengkap dalam sambungan Visual Studio Code menunjukkan konteks semasa sedang diedit dan elemen autolengkap berkaitan melalui IntelliSense.

Tangkapan skrin dengan contoh autolengkap untuk ID templat halaman.

Tag Liquid

Apabila menyesuaikan kandungan yang dimuat turun menggunakan Visual Studio Code, yanda kini boleh menggunakan IntelliSense untuk Power Pages tag Liquid.

Mula menaip untuk melihat senarai tag Cecair. Pilih tag untuk memformatkannya dengan betul dan teruskan dengan input anda.

Tangkapan skrin cebisan dengan contoh pelengkapan tag Cecair.

Objek Liquid

Anda boleh melihat kod objek Liquid siap dibina dengan memasukkan {{ }}. Dengan kursor diletakkan antara pendakap, pilih <CTRL + space> untuk memaparkan senarai objek Liquid yang boleh anda pilih. Jika objek mempunyai lebih banyak sifat, anda boleh masukkan . kemudian pilih <CTRL + space> semula untuk melihat sifat khusus objek Liquid.

Tangkapan skrin menunjukkan memasukkan objek Cecair.

Teg templat

Anda boleh melihat cadangan templat web Power Pages dengan letakkan kursor anda dalam pernyataan {include ' '} dan pilih <CTRL> - space. Senarai templat web sedia ada muncul untuk anda pilih.

Tangkapan skrin tag templat.

Cipta, padam dan namakan semula objek tapak web

Daripada dalam Visual Studio Code, anda boleh mencipta, memadam dan menamakan semula komponen laman web berikut:

  • Halaman web
  • Templat halaman
  • Templat web
  • Coretan kandungan
  • Aset baharu (Fail web)

Cipta operasi

Anda boleh menggunakan pilihan menu konteks untuk membuat komponen laman web baharu. Klik kanan salah satu objek yang disokong, pilih dan Power Pages pilih jenis objek laman web yang ingin anda buat.

Secara alternatif, anda boleh menggunakan palet perintah Visual Studio Code dengan memilih Ctrl + Shift + P.

Cipta objek baharu.

Anda perlu menentukan lebih banyak parameter untuk membuat objek.

Objek Parameter
Halaman web Nama, halaman templat, halaman induk
Templat halaman Nama. templat web
Templat web Nama
Coretan kandungan Nama dan jika coretan akan menjadi HTML atau teks.
Aset baharu (Fail web) Nama, halaman induk dan pilih fail untuk dimuat naik.

Namakan semula dan padam operasi

Daripada navigasi fail, anda boleh menggunakan menu konteks untuk menamakan semula atau memadamkan komponen Power Pages.

Nota

Objek yang dipadamkan boleh dipulihkan dari tong kitar semula desktop.

Batasan

Pengehadan berikut digunakan pada masa ini ke Power Platform Tools untuk portal:

Power Pages sokongan untuk Microsoft Power Platform CLI (pratonton)