Web-Dev-For-Beginners/translations/th/8-code-editor/1-using-a-code-editor/README.md

---

การใช้โปรแกรมแก้ไขโค้ด: เชี่ยวชาญ VSCode.dev

ยินดีต้อนรับ!
บทเรียนนี้จะพาคุณจากพื้นฐานไปจนถึงการใช้งานขั้นสูงของ VSCode.dev—โปรแกรมแก้ไขโค้ดบนเว็บที่ทรงพลัง คุณจะได้เรียนรู้วิธีแก้ไขโค้ดอย่างมั่นใจ จัดการโปรเจกต์ ติดตามการเปลี่ยนแปลง ติดตั้งส่วนขยาย และทำงานร่วมกันอย่างมืออาชีพ—all ผ่านเบราว์เซอร์ โดยไม่ต้องติดตั้งอะไรเลย

---

วัตถุประสงค์การเรียนรู้

เมื่อจบบทเรียนนี้ คุณจะสามารถ:

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

---

สิ่งที่ต้องเตรียมก่อนเริ่ม

เริ่มต้นด้วยการ สมัครบัญชี GitHub ฟรี ซึ่งช่วยให้คุณจัดการคลังโค้ดและทำงานร่วมกันทั่วโลก หากคุณยังไม่มีบัญชี สร้างบัญชีที่นี่

---

ทำไมต้องใช้โปรแกรมแก้ไขโค้ดบนเว็บ?

โปรแกรมแก้ไขโค้ด อย่าง VSCode.dev คือศูนย์บัญชาการของคุณสำหรับการเขียน แก้ไข และจัดการโค้ด ด้วยอินเทอร์เฟซที่ใช้งานง่าย ฟีเจอร์มากมาย และการเข้าถึงทันทีผ่านเบราว์เซอร์ คุณสามารถ:

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

เมื่อคุณคุ้นเคยกับ VSCode.dev แล้ว คุณจะพร้อมรับมือกับงานเขียนโค้ดจากทุกที่ ทุกเวลา

---

เริ่มต้นใช้งาน VSCode.dev

ไปที่ VSCode.dev—ไม่ต้องติดตั้ง ไม่ต้องดาวน์โหลด การลงชื่อเข้าใช้ด้วย GitHub จะปลดล็อกการเข้าถึงเต็มรูปแบบ รวมถึงการซิงค์การตั้งค่า ส่วนขยาย และคลังโค้ดของคุณ หากมีการแจ้งเตือน ให้เชื่อมต่อบัญชี GitHub ของคุณ

หลังจากโหลดแล้ว พื้นที่ทำงานของคุณจะมีลักษณะดังนี้:

![Default VSCode.dev](../images/default-vscode-dev มีสามส่วนหลักจากซ้ายไปขวา:

• แถบกิจกรรม: ไอคอนต่างๆ เช่น 🔎 (ค้นหา), ⚙️ (การตั้งค่า), ไฟล์, การควบคุมต้นฉบับ ฯลฯ
• แถบด้านข้าง: เปลี่ยนบริบทตามไอคอนในแถบกิจกรรมที่เลือก (ค่าเริ่มต้นคือ Explorer เพื่อแสดงไฟล์)
• พื้นที่แก้ไข/โค้ด: ส่วนที่ใหญ่ที่สุดทางด้านขวา—ที่ที่คุณจะแก้ไขและดูโค้ดจริงๆ

คลิกผ่านไอคอนเพื่อสำรวจฟีเจอร์ต่างๆ แต่กลับมาที่ Explorer เพื่อรักษาตำแหน่งของคุณ

---

การเปิดคลังโค้ด GitHub

วิธีที่ 1: จากโปรแกรมแก้ไข

1. ไปที่ VSCode.dev คลิก "Open Remote Repository."

   

   ![Palette Menu](../images/palette-menu.pngopen remote repository.”

   • เลือกตัวเลือก
   • วาง URL คลังโค้ด GitHub ของคุณ (เช่น https://github.com/microsoft/Web-Dev-For-Beginners) แล้วกด Enter

หากสำเร็จ คุณจะเห็นโปรเจกต์ทั้งหมดโหลดและพร้อมแก้ไข!

---

วิธีที่ 2: เปิดทันทีผ่าน URL

เปลี่ยน URL คลังโค้ด GitHub ใดๆ ให้เปิดโดยตรงใน VSCode.dev โดยการแทนที่ github.com ด้วย vscode.dev/github
ตัวอย่าง:

• GitHub: https://github.com/microsoft/Web-Dev-For-Beginners
• VSCode.dev: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

ฟีเจอร์นี้ช่วยให้เข้าถึงโปรเจกต์ใดๆ ได้อย่างรวดเร็ว

---

การแก้ไขไฟล์ในโปรเจกต์ของคุณ

เมื่อคลังโค้ดของคุณเปิดแล้ว คุณสามารถ:

1. สร้างไฟล์ใหม่

• ในแถบด้านข้าง Explorer ไปที่โฟลเดอร์ที่คุณต้องการหรือใช้ราก
• คลิกไอคอน ‘New file ...’
• ตั้งชื่อไฟล์ของคุณ กด Enter และไฟล์ของคุณจะปรากฏทันที

![Create a new file](../images/create-new-file 2. แก้ไขและบันทึกไฟล์

• คลิกที่ไฟล์ใน Explorer เพื่อเปิดในพื้นที่โค้ด
• ทำการเปลี่ยนแปลงตามต้องการ
• VSCode.dev จะบันทึกการเปลี่ยนแปลงของคุณโดยอัตโนมัติ แต่คุณสามารถกด Ctrl+S เพื่อบันทึกด้วยตนเอง

![Edit a file](../images/edit-a-file.png. ติดตามและคอมมิตการเปลี่ยนแปลงด้วยการควบคุมเวอร์ชัน

VSCode.dev มี Git ควบคุมเวอร์ชันในตัว!

• คลิกไอคอน 'Source Control' เพื่อดูการเปลี่ยนแปลงทั้งหมดที่ทำ
• ไฟล์ในโฟลเดอร์ Changes แสดงการเพิ่ม (สีเขียว) และการลบ (สีแดง)
  ![View changes](../images/working-tree.png การเปลี่ยนแปลงโดยคลิก + ข้างไฟล์เพื่อเตรียมสำหรับคอมมิต
• ยกเลิก การเปลี่ยนแปลงที่ไม่ต้องการโดยคลิกไอคอนย้อนกลับ
• พิมพ์ข้อความคอมมิตที่ชัดเจน จากนั้นคลิกเครื่องหมายถูกเพื่อคอมมิตและส่ง

เพื่อกลับไปยังคลังโค้ดของคุณบน GitHub ให้เลือกเมนูแฮมเบอร์เกอร์ที่มุมบนซ้าย

![Stage & commit changes](../images/edit-vscode.dev Up with Extensions

ส่วนขยายช่วยให้คุณเพิ่มภาษา ธีม ดีบักเกอร์ และเครื่องมือเพิ่มประสิทธิภาพให้กับ VSCode.dev—ทำให้ชีวิตการเขียนโค้ดของคุณง่ายขึ้นและสนุกขึ้น

การเรียกดูและจัดการส่วนขยาย

• คลิกไอคอน Extensions ในแถบกิจกรรม

• ค้นหาส่วนขยายในช่อง 'Search Extensions in Marketplace'

  ![Extension details](../images/extension-details:

  • Installed: ส่วนขยายทั้งหมดที่คุณเพิ่ม
  • Popular: ส่วนขยายยอดนิยมในอุตสาหกรรม
  • Recommended: แนะนำตามการทำงานของคุณ

  ![View extensions](

---

1. ติดตั้งส่วนขยาย

• ป้อนชื่อส่วนขยายในช่องค้นหา คลิกที่ส่วนขยาย และดูรายละเอียดในโปรแกรมแก้ไข

• กดปุ่ม Install สีน้ำเงิน ในแถบด้านข้าง หรือ ในพื้นที่โค้ดหลัก

  ![Install extensions](../images/install-extension 2. ปรับแต่งส่วนขยาย

• ค้นหาส่วนขยายที่คุณติดตั้ง

• คลิกไอคอน Gear → เลือก Extension Settings เพื่อปรับแต่งพฤติกรรมตามที่คุณต้องการ

  ![Modify extension settings](../images/extension-settings 3. จัดการส่วนขยาย คุณสามารถ:

• Disable: ปิดใช้งานส่วนขยายชั่วคราวในขณะที่ยังคงติดตั้งอยู่

• Uninstall: ลบออกอย่างถาวรหากไม่ต้องการใช้งานอีกต่อไป

  ค้นหาส่วนขยาย กดไอคอน Gear และเลือก ‘Disable’ หรือ ‘Uninstall’ หรือใช้ปุ่มสีน้ำเงินในพื้นที่โค้ด

---

งานที่ต้องทำ

ทดสอบทักษะของคุณ: สร้างเว็บไซต์เรซูเม่โดยใช้ vscode.dev

---

การสำรวจเพิ่มเติมและการศึกษาด้วยตนเอง

• เจาะลึกเพิ่มเติมด้วย เอกสาร VSCode Web อย่างเป็นทางการ
• สำรวจฟีเจอร์พื้นที่ทำงานขั้นสูง คีย์ลัด และการตั้งค่า

---

ตอนนี้คุณพร้อมที่จะเขียนโค้ด สร้าง และทำงานร่วมกัน—จากทุกที่ บนอุปกรณ์ใดๆ โดยใช้ VSCode.dev!

---

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้