แบบฝึกหัด - สํารวจส่วนติดต่อผู้ใช้ Visual Studio Code

เสร็จสมบูรณ์เมื่อ

Visual Studio Code มีเครื่องมือสําหรับนักพัฒนาที่เพิ่งเริ่มใช้งาน แต่ยังขยายได้และขั้นสูงเพียงพอสําหรับนักพัฒนามืออาชีพ

ในแบบฝึกหัดนี้ คุณเปิด Visual Studio Code และสํารวจอินเทอร์เฟสผู้ใช้ให้เสร็จสิ้นอย่างรวดเร็ว

เปิด Visual Studio Code และตรวจสอบหน้ายินดีต้อนรับ

1. ใช้เมนูเริ่มต้นของ Windows เพื่อเปิด Visual Studio Code

   หากคุณเปิดเมนูเริ่มต้นของ Windows คุณควรเห็น Visual Studio Code แสดงเป็นแอปพลิเคชันที่เพิ่มล่าสุด คุณยังสามารถเลื่อนลงเพื่อค้นหา Visual Studio Code ได้อีกด้วย

   อีกตัวเลือกหนึ่งคือพิมพ์ Visual Studio Code ในกล่องค้นหา Windows บนถาดเปิดใช้งานที่ด้านล่างของหน้าจอ

2. โปรดสังเกตว่า Visual Studio Code จะเปิดหน้า "ยินดีต้อนรับ" ที่มีลิงก์และข้อมูลอื่น ๆ

   ครั้งแรกที่คุณเปิด Visual Studio Code หน้า ยินดีต้อนรับ จะแสดงการฝึกปฏิบัติที่เป็นประโยชน์บางอย่าง เช่นเนื้อหา เริ่มต้นใช้งานด้วย VS Code คุณสามารถตรวจสอบข้อมูลนี้ได้ในเวลาพักผ่อนของคุณอีกครั้ง

3. เมื่อต้องการปิดหน้า ยินดีต้อนรับ ให้เลือกปุ่ม ปิด (แสดงเป็น X ในอินเทอร์เฟซ)

   แต่ละหน้าที่ถูกเปิดในตัวแก้ไขจะมีปุ่ม ปิด (X) อยู่ทางด้านขวาของชื่อหน้า แท็บ หน้า ยินดีต้อนรับ จะแสดงในส่วนซ้ายบนของหน้าต่าง รหัส Visual Studio ด้านล่างเมนูหลัก ถ้าคุณวางตัวชี้เมาส์ไว้เหนือ X จะมีคําว่า ปิด ปรากฏขึ้น

ตรวจสอบแถบกิจกรรมและแถบด้านข้าง

1. โปรดสังเกตว่า แถบด้านข้าง ทางด้านขวาของ แถบกิจกรรม ถูกยุบ

   คุณอาจโปรดทราบว่า แถบกิจกรรม เป็นรายการแนวตั้งของไอคอนทางด้านซ้ายสุดของหน้าต่าง Visual Studio Code เนื้อหาของแถบด้านข้างจะขึ้นอยู่กับสิ่งที่ถูกเลือกในปัจจุบันจากแถบกิจกรรม

2. วางตัวชี้เมาส์ของคุณไว้เหนือ แถบกิจกรรม แล้วเลื่อนตัวชี้เมาส์ไปวางเหนือไอคอนแต่ละไอคอนเพื่อแสดงป้ายชื่อ

   ป้ายชื่อจะปรากฏขึ้นเมื่อคุณโฮเวอร์เหนือไอคอน คุณควรเห็นปุ่มแถบกิจกรรมที่แสดงในรูปภาพต่อไปนี้:

   

   จากบนลงล่าง ไอคอนแถบกิจกรรมคือ: Explorer, Search, Source Control, Run และ Debug, ส่วนขยาย, บัญชี และจัดการ

3. บนแถบกิจกรรม เลือก Explorer

   แถบด้านข้างควรเปิดและแสดงข้อมูลตามบริบท

4. โปรดสังเกตว่าแถบด้านข้างจะมีป้ายชื่อ EXPLORER อยู่ในขณะนี้

   มุมมอง EXPLORER ใช้เพื่อเข้าถึง/สํารวจโฟลเดอร์โครงการและไฟล์โค้ด

   Visual Studio Code จะจดจําประวัติการทํางานของคุณและเปิดไฟล์โครงการล่าสุดเมื่อเปิด เนื่องจากนี่เป็นครั้งแรกที่คุณเปิด Visual Studio Code จะไม่มีการเปิดโฟลเดอร์โครงการ

5. บนแถบกิจกรรม ให้เลือกส่วนขยาย

6. โปรดสังเกตว่า แถบด้านข้าง จะมีป้ายชื่อ ส่วนขยายอยู่ในขณะนี้

7. ใช้เวลาสักครู่เพื่อตรวจสอบข้อมูลที่แสดงในมุมมองส่วนขยาย

   ส่วนขยายของ Visual Studio Code ช่วยให้คุณสามารถเพิ่มภาษาการเขียนโค้ด ตัวดีบัก และเครื่องมืออื่นๆ ไปยังสภาพแวดล้อมได้เพื่อสนับสนุนเวิร์กโฟลว์การพัฒนาของคุณ คุณจะติดตั้งส่วนขยาย C# ในภายหลังในมอดูลนี้

8. บนแถบกิจกรรม เพื่อปิดแถบด้านข้างส่วนขยาย ให้เลือกส่วนขยาย

ตรวจสอบตัวเลือกเมนูด้านบน

1. เมื่อต้องการดูตัวเลือกเมนู ไฟล์ เลือก ไฟล์

2. โปรดสังเกตตัวเลือกใหม่เปิดบันทึก และปิดที่แสดงอยู่บนเมนู ไฟล์

3. ใช้เวลาสักครู่เพื่อตรวจสอบตัวเลือกเมนู แก้ไข จากนั้นแต่ละรายการเมนูระดับบนสุดอื่น ๆ

4. โปรดสังเกตว่าเมนูหลายเมนูมีตัวเลือกสําหรับการโต้ตอบกับโค้ดของคุณ

   เช่น:

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

5. บนเมนู เทอร์มินัล ให้เลือก เทอร์มินัลใหม่

6. ใช้เวลาสักครู่ในการตรวจสอบเนื้อหาของแผงเทอร์มินัล

   คุณสามารถสลับไปมาระหว่างแท็บ (PROBLEMS, OUTPUT, DEBUG CONSOLE และ TERMINAL) และวางเมาส์ชี้เหนือปุ่ม (ขวาบน) เพื่อแสดงป้ายชื่อปุ่มได้

7. โปรดสังเกตว่าแผงเทอร์มินัลมีพรอมต์คําสั่ง

   สามารถใช้แผงเทอร์มินัลเพื่อเรียกใช้คําสั่งอินเทอร์เฟซบรรทัดคําสั่ง (CLI) ได้ คุณจะใช้คําสั่ง .NET CLI ในภายหลังในโมดูลนี้

8. ที่มุมขวาบนของแผงเทอร์มินัล เลือก X (Close Panel)

9. บนเมนู มุมมอง ให้เลือก ชุดคําสั่ง

   สามารถใช้ชุดแบบสีคําสั่งเพื่อค้นหาและเรียกใช้คําสั่งที่มีประโยชน์ได้ทุกรูปแบบ คุณไม่มีเวลา (หรือความจําเป็น) ในการตรวจสอบรายละเอียดในตอนนี้ แต่ควรทราบตําแหน่งที่จะค้นหาชุดคําสั่ง

10. ที่พรอมต์ชุดแบบสีคําสั่ง ให้พิมพ์ ส่วนขยาย

    โปรดสังเกตว่ารายการคําสั่งจะถูกกรองตามรายการของคุณ

11. หากต้องการอัปเดตรายการคําสั่งที่กรองแล้ว ให้เปลี่ยนส่วนขยายเพื่อช่วย

12. จากรายการของตัวเลือกคําสั่ง ให้เลือกวิธีใช้: ตัวแก้ไขแบบโต้ตอบ Playground

    เอกสาร Editor Playground ที่เปิดในตัวแก้ไขมีรายการของกิจกรรมแบบโต้ตอบ

13. จากรายการหัวข้อย่อยของกิจกรรมแบบโต้ตอบ ให้เลือก การจัดรูปแบบ

14. ใช้เวลาสักครู่ในการอ่านเกี่ยวกับตัวเลือกการจัดรูปแบบ

    คุณจะใช้คําสั่งการจัดรูปแบบโค้ดในระหว่างกิจกรรมเมื่อคุณเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม C#

15. ปิดเอกสาร Editor Playground

ซึ่งเสร็จสิ้นการแนะนําส่วนติดต่อผู้ใช้ของ Visual Studio Code เมื่อคุณเริ่มเขียนโค้ด เอกสารการฝึกอบรมจะชี้ให้เห็นวิธีการที่ Visual Studio Code สามารถช่วยเพิ่มประสิทธิภาพการทํางานของคุณได้