*** # การใช้โปรแกรมแก้ไขโค้ด: เชี่ยวชาญ [VSCode.dev](https://vscode.dev) **ยินดีต้อนรับ!** บทเรียนนี้จะพาคุณจากพื้นฐานไปจนถึงการใช้งานขั้นสูงของ [VSCode.dev](https://vscode.dev)—โปรแกรมแก้ไขโค้ดบนเว็บที่ทรงพลัง คุณจะได้เรียนรู้วิธีแก้ไขโค้ดอย่างมั่นใจ จัดการโปรเจกต์ ติดตามการเปลี่ยนแปลง ติดตั้งส่วนขยาย และทำงานร่วมกันอย่างมืออาชีพ—all ผ่านเบราว์เซอร์ โดยไม่ต้องติดตั้งอะไรเลย *** ## วัตถุประสงค์การเรียนรู้ เมื่อจบบทเรียนนี้ คุณจะสามารถ: - ใช้โปรแกรมแก้ไขโค้ดได้อย่างมีประสิทธิภาพในทุกโปรเจกต์ ทุกที่ - ติดตามงานของคุณได้อย่างราบรื่นด้วยระบบควบคุมเวอร์ชันในตัว - ปรับแต่งและเพิ่มประสิทธิภาพการทำงานของคุณด้วยการปรับแต่งโปรแกรมแก้ไขและส่วนขยาย *** ## สิ่งที่ต้องเตรียมก่อนเริ่ม เริ่มต้นด้วยการ **สมัครบัญชี [GitHub](https://github.com) ฟรี** ซึ่งช่วยให้คุณจัดการคลังโค้ดและทำงานร่วมกันทั่วโลก หากคุณยังไม่มีบัญชี [สร้างบัญชีที่นี่](https://github.com/) *** ## ทำไมต้องใช้โปรแกรมแก้ไขโค้ดบนเว็บ? **โปรแกรมแก้ไขโค้ด** อย่าง VSCode.dev คือศูนย์บัญชาการของคุณสำหรับการเขียน แก้ไข และจัดการโค้ด ด้วยอินเทอร์เฟซที่ใช้งานง่าย ฟีเจอร์มากมาย และการเข้าถึงทันทีผ่านเบราว์เซอร์ คุณสามารถ: - แก้ไขโปรเจกต์บนอุปกรณ์ใดก็ได้ - หลีกเลี่ยงความยุ่งยากในการติดตั้ง - ทำงานร่วมกันและมีส่วนร่วมได้ทันที เมื่อคุณคุ้นเคยกับ VSCode.dev แล้ว คุณจะพร้อมรับมือกับงานเขียนโค้ดจากทุกที่ ทุกเวลา *** ## เริ่มต้นใช้งาน VSCode.dev ไปที่ **[VSCode.dev](https://vscode.dev)**—ไม่ต้องติดตั้ง ไม่ต้องดาวน์โหลด การลงชื่อเข้าใช้ด้วย GitHub จะปลดล็อกการเข้าถึงเต็มรูปแบบ รวมถึงการซิงค์การตั้งค่า ส่วนขยาย และคลังโค้ดของคุณ หากมีการแจ้งเตือน ให้เชื่อมต่อบัญชี GitHub ของคุณ หลังจากโหลดแล้ว พื้นที่ทำงานของคุณจะมีลักษณะดังนี้: ![Default VSCode.dev](../images/default-vscode-dev มีสามส่วนหลักจากซ้ายไปขวา: - **แถบกิจกรรม:** ไอคอนต่างๆ เช่น 🔎 (ค้นหา), ⚙️ (การตั้งค่า), ไฟล์, การควบคุมต้นฉบับ ฯลฯ - **แถบด้านข้าง:** เปลี่ยนบริบทตามไอคอนในแถบกิจกรรมที่เลือก (ค่าเริ่มต้นคือ *Explorer* เพื่อแสดงไฟล์) - **พื้นที่แก้ไข/โค้ด:** ส่วนที่ใหญ่ที่สุดทางด้านขวา—ที่ที่คุณจะแก้ไขและดูโค้ดจริงๆ คลิกผ่านไอคอนเพื่อสำรวจฟีเจอร์ต่างๆ แต่กลับมาที่ _Explorer_ เพื่อรักษาตำแหน่งของคุณ *** ## การเปิดคลังโค้ด GitHub ### วิธีที่ 1: จากโปรแกรมแก้ไข 1. ไปที่ [VSCode.dev](https://vscode.dev) คลิก **"Open Remote Repository."** ![Open remote repository](../../../../8-code-editor/images/open-remote-repository ใช้ _Command Palette_ (Ctrl-Shift-P หรือ Cmd-Shift-P บน Mac) ![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](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) *** ## การสำรวจเพิ่มเติมและการศึกษาด้วยตนเอง - เจาะลึกเพิ่มเติมด้วย [เอกสาร VSCode Web อย่างเป็นทางการ](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) - สำรวจฟีเจอร์พื้นที่ทำงานขั้นสูง คีย์ลัด และการตั้งค่า *** **ตอนนี้คุณพร้อมที่จะเขียนโค้ด สร้าง และทำงานร่วมกัน—จากทุกที่ บนอุปกรณ์ใดๆ โดยใช้ VSCode.dev!** --- **ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้