แก้ไขโค้ดด้วย Visual Studio Code สําหรับเว็บ (ตัวอย่าง)

[หัวข้อนี้เป็นเอกสารก่อนวางจําหน่ายและอาจมีการเปลี่ยนแปลง]

จากสตูดิโอออกแบบ คุณสามารถแก้ไขรหัสไซต์ได้โดยใช้ Visual Studio Code สําหรับ Web คุณลักษณะนี้ช่วยให้คุณสามารถแก้ไขเนื้อหาแบบคงที่, HTML, CSS, Liquid และ JavaScript สำหรับเมตาดาต้าของเว็บไซต์ต่อไปนี้:

เมตาดาต้า	เนื้อหา
ฟอร์มขั้นสูง (แบบฟอร์มหลายขั้นตอน)	JavaScript
ฟอร์มพื้นฐาน	JavaScript
ส่วนย่อยของเนื้อหา	เนื้อหาในส่วนย่อยของเนื้อหาที่รองรับทั้งหมด
รายการ	JavaScript
ไฟล์เว็บ	ดูและดาวน์โหลดไฟล์สื่อ แก้ไขไฟล์ข้อความ (โค้ด)
เว็บเพจ	เนื้อหาที่รองรับทั้งหมด (ตามภาษา), JavaScript และ CSS
เทมเพลตเว็บ	เนื้อหาที่รองรับทั้งหมด

โน้ต

คุณจะไม่สามารถสร้างเรกคอร์ดของเมตาดาต้า เพิ่มและแก้ไขเนื้อหา โค้ด และดู/ดาวน์โหลดไฟล์แนบได้เท่านั้น

Visual Studio Code สําหรับเว็บให้ประสบการณ์การใช้งาน Microsoft Visual Studio Code ที่ติดตั้งได้ฟรีและไม่มีศูนย์แก่คุณอย่างสิ้นเชิงในเบราว์เซอร์ ให้คุณเรียกดูโค้ดไซต์และเปลี่ยนแปลงโค้ดเล็กน้อยได้อย่างรวดเร็วและปลอดภัย ข้อมูลเพิ่มเติม: Visual Studio Code สําหรับ Web experience.

สําคัญ

• คุณลักษณะนี้เป็นคุณลักษณะพรีวิว
• คุณลักษณะการแสดงตัวอย่างไม่ได้มีไว้สำหรับการนำไปใช้งานจริง และอาจมีการจำกัดฟังก์ชันการทำงาน คุณลักษณะเหล่านี้สามารถใช้ได้ก่อนการเปิดตัวอย่างเป็นทางการ เพื่อให้ลูกค้าสามารถเข้าใช้งานได้ก่อนเวลาและให้ข้อคิดเห็น

โน้ต

• ครั้งแรกที่ Visual Studio Code สำหรับเว็บ โหลดอาจใช้เวลาสักครู่ เนื่องจากกำลังติดตั้งส่วนขยายที่จำเป็นสำหรับฟีเจอร์นี้
• ไฟล์สร้าง ลบ และเปลี่ยนชื่อการดําเนินการไม่ได้รับการสนับสนุน
• คุณลักษณะนี้ใช้ส่วนขยายเว็บเครื่องมือ Power Platform ส่วนขยายเว็บจะถูกจํากัดโดย Sandbox ของเบราว์เซอร์ จึงมีข้อจํากัดเมื่อเทียบกับส่วนขยายปกติ
  • Power Platform CLI ไม่ได้รับการสนับสนุน
  • คุณลักษณะส่วนขยายเว็บของเครื่องมือ Power Platform ถูกจํากัดไว้ที่ประสบการณ์การแก้ไขโค้ด Power Pages
  • คุณลักษณะนี้ไม่พร้อมใช้งานใน Government Community Cloud (GCC), Government Community Cloud (GCC High) และกระทรวงกลาโหม (DoD) ผู้ใช้ในภูมิภาคเหล่านี้จะใช้ แอปการจัดการพอร์ทัล เพื่อแก้ไขโค้ด โปรดดู การแก้ไขโค้ดในแอปการจัดการพอร์ทัล สำหรับข้อมูลเพิ่มเติม

แก้ไขโค้ดมีอยู่ในสตูดิโอออกแบบ

คุณสามารถเริ่มการแก้ไขรหัสไซต์ของคุณโดยใช้ Visual Studio Code สําหรับเว็บจากโฮมเพจ Power Pages โดยเลือกรหัสไซต์ แก้ไข จากเมนูดรอปดาวน์ Edit

คุณยังสามารถแก้ไขโค้ดในสตูดิโอออกแบบได้จากส่วนต่อไปนี้:

• แก้ไขโค้ดของเว็บเพจจากพื้นที่ทำงานเพจ
• โค้ดเทมเพลตส่วนหัวจากพื้นที่ทำงานเพจ
• แก้ไขโค้ด CSS แบบกำหนดเองจากพื้นที่ทำงานการกำหนดลักษณะ
• แก้ไขโค้ด JavaScript ที่กำหนดเองสำหรับแบบฟอร์มหลายขั้นตอน
• แก้ไขโค้ด JavaScript ที่กำหนดเองสำหรับฟอร์มพื้นฐาน
• แก้ไข JavaScript แบบกำหนดเองสำหรับรายการ
• แก้ไขส่วนย่อยของเนื้อหา
• แก้ไขเว็บเทมเพลต
• ดูและดาวน์โหลดไฟล์เว็บสื่อ (รูปภาพ)
• แก้ไขไฟล์เว็บแบบยึดข้อความ (CSS, JavaScript, อื่น ๆ)

มาดูวิธีการแก้ไขโค้ดโดยใช้พื้นที่เหล่านี้กัน

แก้ไขโค้ดของเว็บเพจจากพื้นที่ทำงานเพจ

เมื่อคุณเปิดสตูดิโอออกแบบ Power Pages คุณจะเห็นตัวเลือก แก้ไขโค้ด ในเมนู Pages¹ และมุมขวาบนของหน้าจอ²

โค้ดเทมเพลตส่วนหัวจากพื้นที่ทำงานเพจ

เลือก แก้ไขส่วนหัวของไซต์ แล้วเลือก แก้ไขโค้ด เพื่อเปิดโปรแกรมแก้ไขโค้ด

แก้ไขโค้ด CSS แบบกำหนดเองจากพื้นที่ทำงานการกำหนดลักษณะ

ไปที่ พื้นที่ทำงานการกำหนดลักษณะ และเลือกเมนู และเลือกเมนู ของ CSS แบบกำหนดเองเพื่อเปิดตัวแก้ไขโค้ด

มุมมองการดําเนินการของ Power Pages

มุมมอง Power Pages Actions สามารถเข้าถึงได้ที่ด้านล่างของ File Explorer ช่วยให้คุณสามารถจัดการไซต์ Power Pages ได้โดยตรงภายในตัวแก้ไข ซึ่งจะช่วยลดความจําเป็นในการสลับไปยังสตูดิโอออกแบบของ Power Pages โดยช่วยให้นักพัฒนาสามารถทํางานทั่วไปได้อย่างรวดเร็วจากภายในตัวแก้ไข

การดําเนินการที่พร้อมใช้งาน

• แสดงตัวอย่างไซต์
  การดําเนินการนี้จะล้าง แคชการกําหนดค่า และเปิดไซต์ใน VS Code ซึ่งช่วยให้นักพัฒนาสามารถแสดงตัวอย่างและทดสอบการเปลี่ยนแปลงไปยังรหัสไซต์โดยไม่จําเป็นต้องสลับบริบทไปยังสตูดิโอออกแบบ Power Pages

• เปิดในสตูดิโอออกแบบ Power Pages
  หลังจากทําการเปลี่ยนแปลงโค้ดแล้ว ให้ใช้การดําเนินการนี้เพื่อไปที่สตูดิโอออกแบบ Power Pages ซึ่งจะเป็นประโยชน์สําหรับการกําหนดค่าผู้ให้บริการการรับรองความถูกต้อง บทบาทเว็บ และการตั้งค่าไซต์อื่น ๆ ที่ไม่สามารถแก้ไขได้ในตัวแก้ไขโค้ด

• เปิดใน VS Code Desktop
  ถ้าติดตั้ง VS Code Desktop แล้ว การดําเนินการนี้จะเปิดไซต์ในแอปเดสก์ท็อป นอกจากนี้ยังทริกเกอร์การดาวน์โหลดไซต์เพื่อให้แน่ใจว่ามีโค้ดพร้อมใช้งานภายในเครื่องและพร้อมสําหรับการแก้ไข

รวมการแจ้งเตือนข้อขัดแย้ง

ถ้าคุณกําลังทํางานร่วมกับนักพัฒนารายอื่น อาจมีสถานการณ์ที่คุณจะทํางานบนโค้ดต้นฉบับเดียวกัน ในกรณีที่คุณพยายามบันทึกการเปลี่ยนแปลงไปยังไฟล์ที่ล้าสมัย คุณจะได้รับการแจ้งเตือนให้ เปรียบเทียบ หรือ เขียนทับ การเปลี่ยนแปลง

การเปรียบเทียบโค้ดจะแสดงโค้ดปัจจุบันควบคู่ไปกับโค้ดของคุณและอนุญาตให้คุณย้อนกลับไปใช้การเปลี่ยนแปลงที่มีอยู่ ยอมรับการเปลี่ยนแปลงทีละรายการหรือใช้การเปลี่ยนแปลงและเขียนทับเนื้อหาที่มีอยู่

คุณจะตรวจสอบเนื้อหาล่าสุดและรวมหรือเขียนทับโค้ดหรือยกเลิกการเปลี่ยนแปลงได้

บทช่วยสอน: แก้ไขรหัสไซต์โดยใช้ Visual Studio Code สําหรับเว็บ

ในบทช่วยสอนนี้ คุณจะทําตามการแก้ไขรหัสไซต์โดยใช้ Visual Studio Code สําหรับเว็บ

ขั้นตอนที่ 1: แก้ไขรหัสไซต์โดยใช้ Visual Studio Code สําหรับเว็บ

1. เปิดเว็บไซต์ของคุณใน Power Pages design studio

2. ที่มุมบนขวา เลือก แก้ไขรหัส

   

3. เลือก เปิด Visual Studio Code จากกล่องโต้ตอบการยืนยัน

4. ลงชื่อเข้าใช้ Visual Studio Code โดยใช้ข้อมูลประจําตัวสภาพแวดล้อมของคุณ

5. รอให้ส่วนขยายเว็บ Power Platform Tools เริ่มต้นและโค้ดของเว็บเพจโหลดในบานหน้าต่างด้านซ้าย

ขั้นตอนที่ 2: อัปเดตเนื้อหาและโค้ด

1. ตัวสำรวจทางด้านซ้ายของหน้าจอจะโหลดเมตาดาต้าของการกำหนดค่าเว็บไซต์ที่เกี่ยวข้อง ซึ่งสามารถแก้ไขได้โดยใช้ Visual Code สำหรับเว็บ

   

2. ทำการเปลี่ยนแปลงไฟล์เมตาดาต้าที่เกี่ยวข้อง แล้วกด Ctrl+S เพื่อบันทึกการเปลี่ยนแปลง

3. ไปที่สตูดิโอออกแบบ และเลือก ซิงค์ เพื่อดึงการอัปเดตทั้งหมดในเซสชันสตูดิโอออกแบบปัจจุบันของคุณ

   

4. เลือก ตัวอย่าง เพื่อดูการเปลี่ยนแปลงบนไซต์ Power Pages

การใช้ Visual Studio Code สําหรับเว็บหรือ Visual Studio Code Desktop

ผู้ใช้สามารถแก้ไข แก้ไข แก้จุดบกพร่อง และแสดงตัวอย่างการเปลี่ยนแปลงการแก้ไขหน้าโดยใช้ Visual Studio Code สําหรับเว็บโดยไม่จําเป็นต้องใช้เครื่องมือภายนอก Visual Studio Code Desktop มีคุณลักษณะขั้นสูงอื่น ๆ สําหรับการแก้ไขเมตาดาต้าของไซต์ทั้งหมด และรวมเข้ากับกระบวนการ GitHub เฟรมเวิร์ก และการรวมอย่างต่อเนื่อง/การพัฒนาอย่างต่อเนื่อง (CI/CD)

ลักษณะการทำงาน	VS Code สำหรับเว็บ	VS Code Desktop
สร้างเรกคอร์ดเมตาดาต้าการกำหนดค่าเว็บไซต์ใหม่	ไม่	จำกัดเฉพาะเว็บเพจ เทมเพลตเพจ เทมเพลตเว็บ ตัวอย่างเนื้อหา และไฟล์เว็บ
การแก้ไขไซต์โดยตรง	ใช่	ไม่
การแก้ไขเมตาดาต้าของไซต์	จำกัดเฉพาะการแก้ไขเว็บเพจ ส่วนย่อยของเนื้อหา ฟอร์มพื้นฐาน แบบฟอร์มหลายขั้นตอน รายการ และเทมเพลตเว็บ	การกําหนดค่าเมตาดาต้าของ Power Pages ทั้งหมด
การแสดงตัวอย่างไซต์	ที่วางแผนไว้	ที่วางแผนไว้
การรองรับ Power Platform CLI	ไม่	ใช่
เวิร์กโฟลว์ที่ผูกกับ CPU และที่เก็บข้อมูลขั้นสูง - ReactJS หรือการสนับสนุนเครื่องมือสร้างเฟรมเวิร์กอื่น ๆ	ไม่	ใช่
GitHub รวมกับความสามารถต่าง ๆ เช่น การเช็คอินโค้ด การเช็คเอาท์ การจัดการความขัดแย้ง และการผสาน	ไม่	ใช่

การแก้ไขโค้ดในแอปการจัดการพอร์ทัล

โน้ต

• การใช้ Visual Studio Code สําหรับเว็บเพื่อแก้ไขเว็บไซต์ไม่ได้รับการสนับสนุนใน Government Community Cloud (GCC), Government Community Cloud (GCC High) และกระทรวงกลาโหม (DoD) ผู้ใช้ในภูมิภาคเหล่านี้สามารถใช้ แอปการจัดการพอร์ทัล เพื่อทําการเปลี่ยนแปลงได้

ถ้าภูมิภาคไม่รองรับ Visual Studio Code สําหรับเว็บ การเลือกไอคอน<ตัวแก้ไขโค้ด /> ในแถบคําสั่งจะเปิดแอปการจัดการพอร์ทัล

ไปที่เรกคอร์ดของ เว็บเพจ, ฟอร์มพื้นฐาน, แบบฟอร์มหลายขั้นตอน, รายการ หรือ เทมเพลตเว็บ ที่เกี่ยวข้องเพื่อแก้ไขโค้ด

ชนิด	ตำแหน่งโค้ด
เว็บเพจ	เลือกเรกคอร์ดของเว็บเพจ เลือกเรกคอร์ดเนื้อหาของเว็บเพจจากส่วน เนื้อหาที่แปลเป็นภาษาท้องถิ่น สำเนาของเพจสามารถแก้ไขได้ในฟิลด์ สำเนา (HTML) บนแท็บ โค้ด ทั่วไป JavaScript แบบกำหนดเอง และ CSS แบบกำหนดเอง สามารถแก้ไขได้จากแท็บ ขั้นสูง
แบบฟอร์มพื้นฐาน	เลือกบันทึกข้อมูลรูปแบบพื้นฐาน แก้ไข JavaScript แบบกําหนดเองบนแท็บการตั้งค่าเพิ่มเติม
แบบฟอร์มหลายขั้นตอน	เลือกเรกคอร์ด ฟอร์มหลายชั้นเลือกขั้นตอนฟอร์มหลายชั้นจากแท็บขั้นตอนฟอร์ม แก้ไข JavaScript แบบกําหนดเองบนแท็บตัวเลือกฟอร์ม
รายการ	เลือกบันทึกรายการ แก้ไข JavaScript แบบกําหนดเองบนแท็บตัวเลือก
เทมเพลตเว็บ	เลือกเรกคอร์ดเทมเพลตเว็บ แก้ไขแหล่งข้อมูลบนแท็บทั่วไป

บันทึกเรกคอร์ดและดูตัวอย่างเว็บไซต์เพื่อทดสอบโค้ดของคุณ

ดูเพิ่มเติมที่

• ใช้ Visual Studio Code และ CLI Microsoft Power Platform