Kongsi melalui

Edit kod dengan Visual Studio Code untuk Web (pratonton)

  • Artikel

[Topik ini ialah dokumentasi prakeluaran dan tertakluk pada perubahan.]

Daripada studio reka bentuk, anda boleh mengedit kod tapak menggunakan Visual Studio Code untuk Web. Ciri ini membolehkan anda mengedit kandungan statik, HTML, CSS, Liquid dan JavaScript untuk metadata tapak web berikut:

Metadata Kandungan
Borang lanjutan (borang berbilang langkah) JavaScript
Borang asas JavaScript
Coretan kandungan Semua kandungan coretan kandungan yang disokong
Senarai JavaScript
Fail web Lihat dan muat turun fail media. Edit fail teks (kod).
Halaman web Semua kandungan yang disokong (setiap bahasa), JavaScript dan CSS
Templat web Semua kandungan yang disokong

Nota

Anda tidak akan dapat mencipta rekod metadata, hanya tambahkan dan edit kandungan, kod dan lihat/muat turun lampiran fail.

Visual Studio Code untuk web menyediakan pengalaman percuma, sifar pemasangan Microsoft Visual Studio Code sepenuhnya dalam pelayar anda, membolehkan anda untuk menyemak imbas kod tapak dan membuat perubahan kod ringan dengan cepat dan selamat. Maklumat lanjut: Visual Studio Code untuk pengalaman web.

Penting

  • Ini adalah ciri pratonton.
  • Ciri pratonton bukan untuk kegunaan pengeluaran dan kefungsian mungkin terbatas. Ciri ini tersedia sebelum keluaran rasmi agar pelanggan boleh mendapat akses awal dan memberikan maklum balas.

Demo menggunakan Visual Studio Code untuk web untuk mengedit tapak Power Pages.

Nota

  • Pemuatan Visual Studio Code untuk Web pertama kali mungkin mengambil masa kerana ia akan memasang sambungan yang diperlukan untuk ciri ini.
  • Operasi Cipta, Padam dan Namakan Fail tidak disokong.
  • Ciri ini menggunakan sambungan web Power Platform Tools. Sambungan web dihadkan oleh kotak pasir pelayar dan oleh itu had berbanding sambungan normal.
    • Power PlatformCLI tidak disokong.
    • Ciri-ciri sambungan web Power Platform Tools terhad kepada pengalaman pengeditan kod Power Pages.
    • Ciri ini tidak tersedia dalam Awan Komuniti Kerajaan (GCC), Awan Komuniti Kerajaan (GCC High), dan Jabatan Pertahanan (DoD). Pengguna dalam wilayah ini akan menggunakan aplikasi Pengurusan Portal untuk kod pengeditan. Lihat Mengedit kod dalam apl Pengurusan Portal untuk maklumat lanjut.

Edit kod yang tersedia dalam studio reka bentuk

Anda boleh mula mengedit kod tapak anda menggunakan Visual Studio Kod untuk Web daripada halaman utama dengan Power Pages memilih pilihan Edit kod tapak daripada menu lungsur Edit ke bawah.

Anda juga boleh mengedit kod di studio reka bentuk dari kawasan berikut:

Mari kita lihat cara mengedit kod menggunakan kawasan ini.

Edit kod halaman web daripada ruang kerja Halaman

Apabila anda membuka studio reka bentuk Power Pages, anda lihat pilihan Edit kod dalam halaman menu1 dan sudut atas kanan skrin2.

Edit kod halaman web daripada ruang kerja Halaman.

Kod templat pengepala daripada ruang kerja Halaman

Pilih Edit pengepala tapak dan kemudian pilih Edit kod untuk membuka pengedit kod.

Edit kod halaman web daripada pengepala Halaman.

Edit kod CSS tersuai ruang kerja Penggayaan

Pergi ke ruang kerja Penggayaan dan pilih tersedia menu CSS Edit kod tersuai untuk membuka pengedit kod.

Edit kod daripada CSS Tersuai.

Gabung pemberitahuan konflik

Jika anda bekerjasama dengan pembangun lain, mungkin terdapat situasi di mana anda akan bekerja pada kod sumber yang sama. Sekiranya anda cuba menyimpan perubahan pada fail yang ketinggalan zaman anda akan menerima pemberitahuan untuk Membandingkan atau Menulis ganti perubahan.

Membandingkan kod akan menunjukkan kod semasa di samping kod anda dan membolehkan anda untuk kembali ke perubahan yang sedia ada, menerima setiap perubahan secara individu atau menggunakan perubahan anda dan menulis ganti kandungan sedia ada.

Gabung konflik dalam kod.

Anda akan dapat mengkaji semula kandungan terkini dan sama ada menggabungkan atau menulis ganti kod atau membuang perubahan.

Tutorial: Edit kod tapak menggunakan Visual Studio Code untuk Web

Dalam tutorial ini, anda berjalan melalui mengedit kod tapak menggunakan Visual Studio Code untuk Web.

Langkah 1: Edit kod tapak menggunakan Visual Studio Kod untuk Web

  1. Buka tapak anda dalam studio reka bentuk Power Pages

  2. Pada penjuru kanan sebelah atas, pilih Edit kod

    Dibuka dalam Visual Studio Code daripada studio reka bentuk.

  3. Pilih Buka Visual Studio Code daripada dialog pengesahan.

  4. Daftar masuk ke dalam Visual Studio Code menggunakan kelayakan persekitaran anda.

  5. Tunggu untuk sambungan web Power Platform Tools untuk dimulakan, dan kod halaman web untuk dimuatkan dalam tetingkap kiri.

Langkah 2: Kemas kini kandungan dan kod

  1. Peneroka di sebelah kiri skrin akan dimuatkan dengan metadata konfigurasi tapak web masing yang boleh diedit menggunakan Visual Code untuk Web.

    Menu penjelajah untuk ruang kerja tanpa tajuk yang menunjukkan fail web.

  2. Membuat perubahan kepada fail metadata yang berkaitan dan tekan Ctrl+S untuk menyimpan perubahan.

  3. Pergi ke studio reka bentuk dan pilih Segerakkan untuk menarik semua kemas kini dalam sesi studio reka bentuk semasa anda.

    Antara muka untuk membenarkan pengguna untuk memilih penyegerakan butang untuk menyegerakkan perubahan yang dibuat dalam Visual Studio Code untuk studio reka bentuk.

  4. Pilih Pratonton untuk me;ihat perubahan tapak Power Pages.

Menggunakan Visual Studio Kod untuk Web atau Visual Studio Desktop Kod

Pengguna boleh mengedit, menyahpepijat dan pratonton perubahan kepada pengeditan halaman menggunakan Visual Studio Code untuk web tanpa perlu menggunakan alat luaran. Visual Studio Desktop Kod menyediakan ciri lanjutan lain untuk mengedit semua metadata laman web dan mengintegrasikan dengan GitHub, rangka kerja, dan proses integrasi / pembangunan berterusan (CI / CD) yang berterusan.

Ciri Kod VS untuk Web VS Kod Desktop
Cipta metadata konfigurasi tapak web baharu rekod No Terhad kepada halaman web, templat halaman, templat web, coretan kandungan dan fail web.
Pengeditan tapak langsung Ya No
Pengeditan metadata tapak Terhad kepada mengedit halaman web, coretan kandungan, borang asas, borang berbilang langkah, senarai dan templat web. Semua konfigurasi Power Pages
Pratonton tapak Dirancang Dirancang
Sokongan Power Platform CLI No Ya
Aliran kerja terikat CPU dan storan lanjutan - ReactJS atau sokongan alat bina rangka kerja lain No Ya
Penyepaduan GitHub dengan keupayaan seperti daftar masuk kod, daftar keluar, mengurus konflik dan gabung. No Ya

Mengedit kod dalam aplikasi Pengurusan Portal

Nota

  • Menggunakan Visual Studio Kod untuk Web untuk mengedit laman web tidak disokong dalam Awan Komuniti Kerajaan (GCC), Awan Komuniti Kerajaan (GCC High), dan Jabatan Pertahanan (DoD). Pengguna dalam rantau ini boleh menggunakan Aplikasi Pengurusan Portal untuk membuat perubahan.

Jika rantau tidak menyokong Visual Studio Code untuk Web, memilih ikon pengedit kod </> dalam bar perintah akan membuka Aplikasi Pengurusan Portal.

Navigasi ke halaman Halaman Web, Borang Asas, Borang Berbilang Langkah, Senarai, atau rekod Templat Web untuk mengedit kod.

Taip Lokasi kod
Halaman web Pilih rekod halaman web.
Pilih rekod kandungan halaman web daripada bahagian Kandungan Disetempatkan.
Salinan halaman boleh diedit dalam medan Salin (HTML) pada tab Umum.
JavaScript Tersuai dan kod CSS Tersuai boleh diedit daripada tab Lanjutan.
Borang asas Pilih rekod borang asas.
Edit JavaScript Tersuai pada tab Tetapan Tambahan.
Borang berbilang langkah Pilih rekod borang berbilang langkah.
Pilih langkah borang berbilang langkah daripada tab Langkah Borang.
Edit JavaScript Tersuai pada tab Pilihan Borang.
Senarai Pilih senarai borang asas.
Edit JavaScript Tersuai pada tab Pilihan.
Templat web Pilih rekod templat web.
Edit Sumber pada tab Umum.

Simpan rekod dan pratonton laman web anda untuk menguji kod anda.

Lihat juga