Bagikan melalui

Edit kode dengan Visual Studio Code for the Web (pratinjau)

  • Artikel

[Topik ini adalah dokumentasi prarilis dan dapat berubah.]

Dari studio desain, Anda dapat mengedit kode situs Visual Studio Code for the Web. Fitur ini memungkinkan Anda mengedit konten statis, HTML, CSS, Liquid, dan JavaScript untuk metadata situs web berikut:

Metadata Konten
Formulir lanjutan (formulir multilangkah) JavaScript
Formulir dasar JavaScript
cuplikan konten Semua konten cuplikan konten yang didukung
Daftar JavaScript
File Web Melihat dan mengunduh file media. Edit file teks (kode).
Halaman web Semua konten yang didukung (per bahasa), JavaScript, dan CSS
Template Web Semua Konten yang didukung

Catatan

Anda tidak akan dapat membuat rekaman metadata, hanya menambah dan mengedit konten, kode, dan melihat/mengunduh lampiran file.

Visual Studio Code for the Web memberikan pengalaman Microsoft Visual Studio Code tanpa penginstalan gratis yang berjalan seluruhnya di browser, memungkinkan Anda menelusuri kode situs dan membuat perubahan kode ringan dengan cepat dan aman. Informasi lebih lanjut: pengalaman Visual Studio Code for the Web.

Penting

  • Ini adalah fitur pratinjau.
  • Fitur pratinjau tidak dibuat untuk penggunaan produksi dan mungkin memiliki fungsionalitas yang dibatasi. Fitur ini tersedia sebelum rilis resmi agar pelanggan bisa memperoleh akses awal dan memberikan tanggapan.

Demo menggunakan Visual Studio Code for the Web untuk mengedit situs Power Pages.

Catatan

  • Pertama kali Visual Studio Code for the Web dimuat mungkin memerlukan waktu karena akan menginstal ekstensi yang diperlukan untuk fitur ini.
  • Operasi Buat, Hapus, dan Ganti Nama File tidak didukung.
  • Fitur ini akan memanfaatkan ekstensi web Power Platform Tools. Ekstensi web dibatasi oleh sandbox browser dan oleh karena itu memiliki batasan dibandingkan ekstensi biasa.
    • Power PlatformCLI-tidak didukung.
    • Fitur ekstensi web Power Platform Tools terbatas pada pengalaman pengeditan kode Power Pages.
    • Fitur ini tidak tersedia di Government Community Cloud (GCC), Government Community Cloud (GCC High), dan Department of Defense (DoD). Pengguna di kawasan ini akan menggunakan aplikasi Manajemen Portal untuk mengedit kode. Lihat Mengedit kode di aplikasi Manajemen Portal untuk informasi lebih lanjut.

Mengedit kode yang tersedia di studio desain

Anda dapat mulai mengedit kode situs Anda menggunakan Visual Studio Kode untuk Web dari Power Pages halaman beranda dengan memilih opsi Edit kode situs dari menu tarik-turun Edit .

Anda juga dapat mengedit kode di studio desain dari area berikut:

Lihat cara mengedit kode menggunakan area ini.

Mengedit kode halaman web dari ruang kerja Halaman

Saat membuka studio desain Power Pages, Anda melihat pilihan Edit kode di menuHalaman 1 dan sudut kanan atas layar2.

Mengedit kode dari ruang kerja Halaman.

Kode template header dari ruang kerja Halaman

Pilih Edit header situs , lalu pilih Edit kode untuk membuka editor kode.

Mengedit kode dari header Halaman.

Mengedit kode kustom CSS dari ruang kerja gaya

Buka ruang kerja gaya dan pilih menu Edit kode CSS kustom yang tersedia untuk membuka editor kode.

Edit kode dari CSS Kustom.

Menggabungkan pemberitahuan konflik

Jika Anda berkolaborasi dengan pengembang lain, mungkin ada situasi saat Anda mengerjakan kode sumber yang sama. Dalam aktivitas tersebut Anda mencoba menyimpan perubahan pada file yang usang, Anda akan menerima pemberitahuan untuk Membandingkan atau Menimpa perubahan.

Membandingkan kode akan menampilkan kode saat ini di samping kode Anda dan memungkinkan Anda kembali ke perubahan yang ada, menerima setiap perubahan secara individual atau menggunakan perubahan Anda dan menimpa konten yang ada.

Menggabungkan konflik dalam kode.

Anda akan dapat meninjau konten terbaru dan menggabungkan atau menimpa kode atau menghapus perubahan.

Tutorial: Mengedit kode situs menggunakan Visual Studio Code for the Web

Dalam tutorial ini, Anda dapat mengedit kode situs menggunakan Visual Studio Code for the Web.

Langkah 1: Edit kode situs menggunakan Visual Studio Kode untuk Web

  1. Buka situs Anda di Studio desain Power Pages

  2. Di sudut kanan atas, pilih edit kode

    Membuka dalam Visual Studio Code dari studio desain.

  3. Pilih Buka Visual Studio Code dari dialog konfirmasi.

  4. Masuk ke Visual Studio Code menggunakan kredensial lingkungan.

  5. Tunggu ekstensi web Power Platform Tools untuk menginisialisasi, dan kode halaman web dimuat di panel kiri.

Langkah 2: Perbarui konten dan kode

  1. Penjelajah di sisi kiri layar memuat metadata konfigurasi situs web terkait yang dapat diedit menggunakan Visual Code for the Web.

    Menu explorer untuk ruang kerja tanpa judul yang menampilkan file web.

  2. Buat perubahan ke file metadata masing-masing, lalu tekan Ctrl+S untuk menyimpan perubahan.

  3. Buka studio desain, lalu pilih Sinkronisasi untuk menarik semua pembaruan dalam sesi studio desain Anda saat ini.

    Antarmuka untuk memungkinkan pengguna memilih tombol Sinkronisasi untuk mensinkronisasi perubahan yang dibuat dalam Visual Studio Code ke studio desain.

  4. Pilih pratinjau untuk melihat perubahan di situs Power Pages.

Menggunakan Visual Studio Kode untuk Web atau Visual Studio Desktop Kode

Pengguna dapat mengedit, men-debug, dan mempratinjau perubahan pada pengeditan halaman menggunakan Visual Studio Code for the Web tanpa harus menggunakan alat eksternal. Visual Studio Code Desktop menyediakan fitur canggih lainnya untuk mengedit semua metadata situs dan mengintegrasikan dengan GitHub, kerangka kerja, dan proses integrasi berkelanjutan/pengembangan berkelanjutan (CI/CD).

Fitur VS Code untuk Web VS Code Desktop
Membuat rekaman metadata konfigurasi situs web baru No Terbatas untuk halaman web, template halaman, template web, cuplikan konten, dan file web.
Pengeditan situs langsung Ya No
Pengeditan metadata situs Terbatas untuk mengedit halaman web, cuplikan konten, formulir dasar, formulir multilangkah, daftar, dan template web. Semua Konfigurasi metadata Power Pages
Pratinjau situs Direncanakan Direncanakan
Dukungan Power Platform CLI No Ya
Alur kerja terikat penyimpanan dan CPU tingkat lanjut - ReactJS atau dukungan alat pembuatan kerangka kerja lainnya No Ya
Integrasi GitHub dengan kemampuan seperti check-in kode, check-out, mengelola konflik, dan penggabungan. No Ya

Pengeditan kode di aplikasi manajemen portal

Catatan

  • Menggunakan Visual Studio Kode untuk Web untuk mengedit situs web tidak didukung di Government Community Cloud (GCC), Government Community Cloud (GCC High), dan Department of Defense (DoD). Pengguna di kawasan ini dapat menggunakan aplikasi Manajemen Portal untuk membuat perubahan mereka.

Jika kawasan tidak mendukung Visual Studio Code for the Web, memilih ikon editor kode </> di bilah perintah akan membuka aplikasi Manajemen Portal.

Navigasikan ke rekaman Halaman Web, Formulir Dasar, Formulir Multilangkah, Daftar, atau Template Web untuk mengedit kode.

Tipe Lokasi kode
Halaman Web Pilih Rekaman halaman web.
Pilih rekaman konten halaman web dari bagian Konten yang dilokalkan.
Salinan halaman dapat diedit dalam bidang Salin (HTML) pada tab Umum.
JavaScript kustom dan Kode CSS kustom dapat diedit dari tab Tingkat Lanjut.
Formulir Dasar Pilih rekaman formulir dasar.
Edit JavaScript Kustom pada tab Pengaturan Tambahan.
Formulir multilangkah Pilih rekaman formulir multilangkah.
Pilih langkah formulir multilangkah dari tab Langkah Formulir.
Edit JavaScript Kustom di tab Pilihan Formulir.
Daftar Pilih rekaman daftar.
Edit JavaScript Kustom pada tab Pilihan.
Template web Pilih rekaman template web.
Edit Sumber pada tab Umum.

Simpan rekaman, dan pratinjau situs web Anda untuk menguji kode Anda.

Baca juga