การติดตั้งและทดสอบ Codex บน VSCode

Codex เป็นเครื่องมือช่วยพัฒนาซอฟต์แวร์จาก OpenAI ที่สามารถทำงานร่วมกับ Visual Studio Code ได้โดยตรง ช่วยให้นักพัฒนาสามารถสอบถามเกี่ยวกับโค้ด วิเคราะห์โครงสร้างโปรเจกต์ แก้ไขไฟล์ ตรวจสอบความเปลี่ยนแปลง และช่วยแก้ไขข้อผิดพลาดได้จากภายใน IDE โดยไม่จำเป็นต้องสลับไปใช้เครื่องมืออื่น

Codex IDE Extension สามารถใช้บริบทจากไฟล์ที่กำลังเปิด โค้ดที่เลือก และข้อมูลภายในโปรเจกต์ เพื่อช่วยให้คำสั่งที่ส่งให้ Codex สั้นลงและตรงกับงานมากขึ้น นอกจากนี้ยังสามารถตรวจสอบการแก้ไขในรูปแบบ Diff ก่อนยอมรับการเปลี่ยนแปลงได้

1. สิ่งที่ต้องเตรียม

ก่อนเริ่มต้นควรเตรียมสิ่งต่อไปนี้

1. Visual Studio Code เวอร์ชันปัจจุบัน
2. บัญชี ChatGPT ที่สามารถใช้งาน Codex ได้
3. โปรเจกต์สำหรับทดสอบ เช่น Vue.js, Nuxt, PHP, Go, Python หรือภาษาอื่น
4. Git สำหรับควบคุมเวอร์ชันของ Source Code
5. อินเทอร์เน็ตสำหรับเข้าสู่ระบบและเรียกใช้งาน Codex

OpenAI ระบุว่า Codex IDE Extension สามารถใช้งานกับ VS Code และโปรแกรมที่พัฒนาต่อยอดจาก VS Code ได้หลายประเภท

2. การติดตั้ง Codex Extension บน VSCode

เปิด Visual Studio Code จากนั้นเลือกเมนู Extensions หรือกด

Ctrl + Shift + X

ค้นหาคำว่า

Codex

จากนั้นเลือกส่วนขยาย Codex ของ OpenAI และกด Install

เมื่อติดตั้งเรียบร้อยแล้ว จะปรากฏไอคอน Codex บริเวณแถบด้านข้างของ VSCode

หากไม่พบไอคอน สามารถเปิด Command Palette ด้วย

Ctrl + Shift + P

แล้วค้นหาคำสั่ง

Codex: Open Codex Sidebar

เอกสาร OpenAI แนะนำวิธีนี้สำหรับเปิด Codex Sidebar ใน VS Code และ IDE ที่รองรับ

3. เข้าสู่ระบบ Codex

เมื่อเปิด Codex Sidebar ครั้งแรก ระบบจะให้เข้าสู่ระบบ

เลือก Sign in with ChatGPT

จากนั้นเข้าสู่ระบบด้วยบัญชี ChatGPT ที่ต้องการใช้งาน

หลังจากเข้าสู่ระบบสำเร็จ Codex จะพร้อมทำงานร่วมกับโปรเจกต์ที่เปิดอยู่ใน VSCode

4. เปิดโปรเจกต์สำหรับทดสอบ

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

ตัวอย่าง

File > Open Folder

เลือกโปรเจกต์ เช่น

my-project/

โครงสร้างตัวอย่าง

หากโปรเจกต์มีไฟล์คำแนะนำ เช่น AGENTS.md หรือเอกสารความรู้ของโครงการ ควรกำหนดแนวทางการทำงาน ข้อจำกัด และมาตรฐานของโปรเจกต์ไว้ในไฟล์ดังกล่าว เพื่อช่วยให้ Codex ทำงานสอดคล้องกับโครงการมากขึ้น

5. ทดสอบการอ่านและวิเคราะห์โปรเจกต์

เริ่มต้นด้วยงานที่ยังไม่แก้ไข Source Code เพื่อทดสอบว่า Codex สามารถอ่านบริบทของโปรเจกต์ได้หรือไม่

ตัวอย่าง Prompt

หาก Codex สามารถอธิบายโครงสร้างและเชื่อมโยงไฟล์ต่าง ๆ ได้ถูกต้อง แสดงว่าการติดตั้งและการเข้าถึง Workspace ทำงานได้ตามปกติ

OpenAI แนะนำให้เริ่มต้นด้วยการให้ Codex อธิบาย Codebase ทำการเปลี่ยนแปลงแบบเจาะจง หรือช่วย Debug ปัญหาในโปรเจกต์

6. ทดสอบการใช้งาน Context จาก Editor

หนึ่งในความสามารถสำคัญของ Codex บน VSCode คือการใช้ไฟล์ที่เปิดอยู่หรือโค้ดที่เลือกเป็น Context

เปิดไฟล์ที่ต้องการทดสอบ แล้วเลือกโค้ดบางส่วน จากนั้นส่ง Prompt เช่น

Codex จะวิเคราะห์จากบริบทของ Editor โดยตรง ทำให้ไม่ต้องคัดลอก Source Code จำนวนมากไปใส่ใน Prompt

7. ทดสอบการแก้ไข Source Code

หลังจากทดสอบการอ่านโค้ดแล้ว สามารถทดสอบการแก้ไขด้วยงานขนาดเล็กก่อน

ตัวอย่าง

หลังจาก Codex ทำงาน ควรตรวจสอบรายการไฟล์ที่ถูกแก้ไขและดู Diff ทุกครั้งก่อนยอมรับการเปลี่ยนแปลง

Codex IDE ถูกออกแบบให้ผู้ใช้สามารถตรวจสอบ Summary และ Diff ของการเปลี่ยนแปลงควบคู่กับ Source Code ก่อนเลือกเก็บเฉพาะการแก้ไขที่ต้องการ

8. ทดสอบการแก้ไข Error

สามารถทดสอบความสามารถด้าน Debug ได้ด้วย Prompt เช่น

รูปแบบคำสั่งลักษณะนี้ช่วยให้ Codex วิเคราะห์ปัญหาก่อนลงมือแก้ไข และลดโอกาสเกิดการเปลี่ยนแปลงส่วนอื่นโดยไม่จำเป็น

9. ทดสอบ Codex ผ่าน Terminal ใน VSCode

นอกจาก IDE Extension แล้ว ยังสามารถใช้ Codex CLI ผ่าน Terminal ภายใน VSCode ได้ด้วย

เปิด Terminal

Terminal > New Terminal

จากนั้นรัน

เมื่อเข้าสู่ Codex CLI สามารถตรวจสอบสถานะปัจจุบันด้วย

ตรวจสอบหรือเปลี่ยนโมเดลด้วย

และตรวจสอบสิทธิ์การทำงานด้วย

เอกสาร Codex CLI ปัจจุบันระบุคำสั่งหลัก เช่น /status, /permissions, /model และ /review สำหรับควบคุมการทำงานของ Codex จาก Terminal

10. ตัวอย่าง Prompt สำหรับทดสอบระบบจริง

สามารถใช้ Prompt ต่อไปนี้เป็นการทดสอบครั้งแรก

จากนั้นจึงทดสอบงานแก้ไข

11. การตรวจสอบว่าติดตั้งสำเร็จหรือไม่

สามารถพิจารณาว่าระบบพร้อมใช้งานเมื่อ

1. เปิด Codex Sidebar ได้
2. เข้าสู่ระบบ ChatGPT สำเร็จ
3. Codex สามารถอ่านไฟล์ภายใน Workspace ได้
4. สามารถอ้างอิงไฟล์หรือโค้ดที่เปิดอยู่ได้
5. สามารถวิเคราะห์โครงสร้างโปรเจกต์ได้
6. สามารถเสนอหรือแก้ไข Source Code ได้
7. สามารถแสดง Diff ของไฟล์ที่เปลี่ยนแปลงได้
8. สามารถเรียกใช้ Codex จาก Terminal ได้ หากติดตั้ง CLI เพิ่มเติม

12. ข้อแนะนำในการใช้งาน

ควร Commit หรือสร้าง Git checkpoint ก่อนให้ Codex ทำงานกับ Source Code ที่สำคัญ เพื่อให้สามารถย้อนกลับการเปลี่ยนแปลงได้หากผลลัพธ์ไม่ตรงตามต้องการ ซึ่งเป็นแนวทางที่ OpenAI แนะนำในเอกสาร Quickstart เช่นกัน

Prompt ที่ดีควรระบุ เป้าหมาย ขอบเขต ไฟล์ที่เกี่ยวข้อง ข้อจำกัด และผลลัพธ์ที่ต้องการ ให้ชัดเจน ตัวอย่างเช่น แทนที่จะใช้คำสั่งว่า “แก้หน้า Dashboard” ควรระบุว่า “ปรับเฉพาะหน้า Dashboard ให้รองรับ Mobile โดยไม่เปลี่ยน API และไม่แก้ Component อื่น”