GORAGOD.com

freelance, web developer, web designer, hosting, domain name

เขียนโค้ดไวขึ้น ด้วย Copilot บน VSCode - AI ที่ช่วยคุณเขียนโปรแกรม!

เขียนโค้ดไวขึ้น ด้วย Copilot บน VSCode - AI ที่ช่วยคุณเขียนโปรแกรม!

GitHub Copilot เปรียบเสมือน "นักบินผู้ช่วย" (Copilot) ที่เป็น AI คอยนั่งข้างๆ และช่วยเราเขียนโค้ด ทำให้เราทำงานได้เร็วขึ้น ลดการเขียนโค้ดซ้ำๆ ซากๆ (Boilerplate) และยังช่วยแนะนำแนวทางการเขียนหรือแม้กระทั่งช่วยเรียนรู้ภาษาใหม่ๆ ได้อีกด้วย

สิ่งที่ต้องมีก่อนเริ่ม (Prerequisites)

  1. โปรแกรม Visual Studio Code ติดตั้งบนเครื่องของคุณเรียบร้อยแล้ว (ถ้ายังไม่มี ดาวน์โหลดได้ที่ code.visualstudio.com)

  2. บัญชี GitHub Copilot เป็นบริการของ GitHub จึงต้องใช้บัญชี GitHub ในการยืนยันตัวตน

  3. การสมัครสมาชิก GitHub Copilot Copilot เป็นบริการแบบมีค่าใช้จ่าย (มีช่วงทดลองใช้ฟรี) คุณต้องสมัครใช้บริการในบัญชี GitHub ของคุณก่อน

    • นักเรียน, อาจารย์ และผู้ดูแลโครงการ Open Source ที่มีชื่อเสียง สามารถขอใช้งานได้ฟรีผ่าน GitHub Education

ขั้นตอนที่ 1 การติดตั้ง Extension ใน VS Code

หัวใจของการใช้งานคือการติดตั้งส่วนขยาย (Extension) ของ Copilot ครับ ปัจจุบันแนะนำให้ติดตั้ง 2 ตัวนี้เพื่อให้ได้ประสบการณ์ใช้งานเต็มรูปแบบ

  1. เปิด VS Code ขึ้นมา

  2. ไปที่แท็บ Extensions (ไอคอนรูปสี่เหลี่ยม 4 อันซ้อนกันที่แถบด้านซ้าย หรือกด Ctrl+Shift+X)

  3. ในช่องค้นหา พิมพ์ว่า GitHub Copilot

  4. คุณจะเจอ Extension หลัก 2 ตัว ให้กด Install ทั้งสองตัว

    • GitHub Copilot ตัวหลักสำหรับให้คำแนะนำโค้ดแบบ Inline (ขึ้นมาเป็นสีเทาๆ)

    • GitHub Copilot Chat ตัวสำหรับสนทนา, ถาม-ตอบ, สั่งให้สร้างโค้ด, อธิบายโค้ด, หาบั๊ก ผ่านหน้าต่างแชท

ขั้นตอนที่ 2 การยืนยันตัวตน (Authentication)

หลังจากติดตั้งเสร็จ VS Code จะขอให้คุณลงชื่อเข้าใช้บัญชี GitHub:

  1. จะมี Pop-up เด้งขึ้นมาที่มุมขวาล่าง ให้คลิก "Sign in to GitHub"

  2. VS Code จะเปิดเบราว์เซอร์ขึ้นมา เพื่อให้คุณยืนยันการเข้าถึงของแอปพลิเคชัน

  3. อาจมีการให้ใส่โค้ดที่แสดงบน VS Code เพื่อยืนยันอุปกรณ์

  4. เมื่อยืนยันสำเร็จ คุณจะเห็นข้อความอนุญาต (Authorize) ให้คลิกยอมรับ

  5. กลับมาที่ VS Code, ที่แถบสถานะด้านล่าง (Status Bar) คุณจะเห็นไอคอนของ Copilot พร้อมทำงาน (ไม่มีเครื่องหมายขีดฆ่า)

วิธีการใช้งาน Copilot ในสถานการณ์ต่างๆ

นี่คือส่วนที่สนุกที่สุดครับ มาดูกันว่า Copilot ช่วยอะไรเราได้บ้าง

1. การเติมโค้ดอัตโนมัติ (Inline Suggestions)

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

วิธีใช้

  • เริ่มเขียนโค้ด เช่น พิมพ์ชื่อฟังก์ชัน หรือเริ่มเขียนลอจิกบางอย่าง

  • รอคำแนะนำ Copilot จะแสดงโค้ดแนะนำขึ้นมาเอง

  • ยอมรับ (Accept) กดปุ่ม Tab เพื่อรับคำแนะนำทั้งหมด

  • ปฏิเสธ (Reject) กดปุ่ม Esc หรือพิมพ์ต่อไปเองเพื่อไม่สนใจคำแนะนำ

  • ดูคำแนะนำอื่นๆ กด Alt + ] (หรือ Option + ] บน Mac) เพื่อดูคำแนะนำถัดไป หรือ Alt + [ เพื่อย้อนกลับ

ตัวอย่าง (Python)

# แค่พิมพ์ชื่อฟังก์ชันแบบนี้
def calculate_factorial(n):
    # Copilot จะเสนอโค้ดส่วนที่เหลือให้เป็นสีเทาๆ
    if n == 0:
        return 1
    else:
        return n * calculate_factorial(n-1)

    # กด Tab เพื่อยอมรับ

2. เปลี่ยนคอมเมนต์ให้เป็นโค้ด (Comment-to-Code)

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

เคล็ดลับ ยิ่งคอมเมนต์ชัดเจนและละเอียดมากเท่าไหร่ โค้ดที่ได้ก็จะยิ่งตรงความต้องการมากขึ้น

ตัวอย่าง (JavaScript)

// Function to fetch user data from an API endpoint by user ID
 // and return the user's name and email
// หลังจากพิมพ์คอมเมนต์เสร็จ แล้วกด Enter
 // Copilot จะเสนอโค้ดฟังก์ชันให้ทันที
 async function getUserData(userId) {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    return {
        name: data.name,
        email: data.email
    };
}

3. การใช้งาน Copilot Chat

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

วิธีเปิด Chat

  • คลิกไอคอน Copilot Chat ที่แถบ Activity Bar ด้านซ้าย

  • กด Ctrl+Alt+I

คุณสามารถใช้ Chat ทำอะไรได้บ้าง

  • ถามคำถามทั่วไปเกี่ยวกับการเขียนโค้ด

    "How to sort an array of objects by a property in JavaScript?"

    "อธิบายความแตกต่างระหว่าง let, const, var ใน JavaScript หน่อย"

  • สั่งให้สร้างโค้ด (Generate Code)

    @workspace /new create a new express server with a route for /api/products

    ใช้ @workspace เพื่อให้ Copilot เข้าใจบริบทของโปรเจกต์คุณ
    "ช่วยสร้างฟังก์ชัน React component สำหรับฟอร์มล็อกอินให้หน่อย มีช่อง username, password และปุ่ม submit"

  • อธิบายโค้ด (Explain Code)

    1. ลากคลุม (Select) โค้ดส่วนที่ต้องการทำความเข้าใจ

    2. คลิกขวา -> Copilot -> Explain This

    3. หรือเปิดหน้าต่าง Chat แล้วพิมพ์ /explain

  • หาบั๊กและแก้ไข (Fix Bugs)

    1. ลากคลุมโค้ดที่มีปัญหา

    2. ในหน้าต่าง Chat พิมพ์ /fix หรือถามตรงๆ ว่า "ช่วยหาบั๊กในโค้ดส่วนนี้แล้วแก้ให้หน่อย"

  • สร้าง Unit Tests

    1. เปิดไฟล์ที่มีฟังก์ชันที่คุณต้องการทดสอบ

    2. ในหน้าต่าง Chat พิมพ์ /tests แล้วตามด้วยชื่อฟังก์ชัน หรือแค่ /tests เพื่อให้มันสร้างสำหรับโค้ดที่เลือกไว้

    @workspace /tests for the calculate_factorial function

  • ปรับปรุงโค้ด (Refactor & Improve)

    1. ลากคลุมโค้ดที่ต้องการปรับปรุง

    2. คลิกขวา -> Copilot -> Start Chat แล้วพิมพ์ว่า "ช่วย Refactor โค้ดนี้ให้คลีนและอ่านง่ายขึ้นหน่อย"

4. ใช้ในการเรียนรู้

เมื่อคุณกำลังเรียนรู้ภาษาหรือเฟรมเวิร์กใหม่ๆ Copilot จะเป็นเพื่อนที่ดีที่สุดของคุณ

ตัวอย่าง:
คุณกำลังหัดเขียน Rust แต่ไม่รู้ว่าจะอ่านไฟล์ยังไง:

"in Rust, how to read a text file into a string?"

Copilot Chat จะให้คำตอบพร้อมตัวอย่างโค้ดที่คุณสามารถนำไปใช้ได้ทันที

สรุปคีย์ลัดที่สำคัญ (Key Shortcuts)

การกระทำ Windows/Linux macOS
แสดงคำแนะนำแบบ Inline พิมพ์โค้ดไปเรื่อยๆ พิมพ์โค้ดไปเรื่อยๆ
ยอมรับคำแนะนำ Tab Tab
ปฏิเสธคำแนะนำ Esc Esc
ดูคำแนะนำถัดไป/ก่อนหน้า Alt + ] / Alt + [ Option (⌥) + ] / Option (⌥) + [
เปิด/ปิด Copilot (ชั่วคราว) คลิกไอคอนที่ Status Bar คลิกไอคอนที่ Status Bar
เปิด Copilot Chat Ctrl + Alt + I Cmd (⌘) + Option (⌥) + I

ข้อควรปฏิบัติและเคล็ดลับ (Best Practices)

  1. ตรวจสอบโค้ดเสมอ Copilot เป็นเครื่องมือช่วย ไม่ใช่คนเขียนแทน ห้ามเชื่อโค้ดที่ได้มา 100% ควรตรวจสอบความถูกต้อง, ความปลอดภัย, และประสิทธิภาพของโค้ดทุกครั้ง

  2. ใช้สำหรับงานที่น่าเบื่อ เหมาะมากสำหรับเขียนโค้ดซ้ำๆ, Boilerplate, ตั้งค่าโปรเจกต์เบื้องต้น, หรือเขียน Unit tests

  3. ระบุความต้องการให้ชัดเจน ในการเขียนคอมเมนต์หรือการคุยกับ Chat ยิ่งคุณให้บริบทและอธิบายสิ่งที่ต้องการได้ชัดเจนเท่าไหร่ ผลลัพธ์ก็จะยิ่งดีขึ้น

  4. เรื่องความเป็นส่วนตัว โค้ดที่คุณเขียน (รวมถึงคอมเมนต์) จะถูกส่งไปที่เซิร์ฟเวอร์ของ GitHub เพื่อประมวลผล หากคุณทำงานกับโค้ดที่เป็นความลับสูงของบริษัท ควรตรวจสอบนโยบายขององค์กรก่อนใช้งาน

GitHub Copilot เป็นเครื่องมือที่เปลี่ยนวิธีการเขียนโค้ดไปอย่างสิ้นเชิง มันช่วยลดเวลา, ลดความผิดพลาดเล็กๆ น้อยๆ และทำให้เราโฟกัสกับการแก้ปัญหาเชิงตรรกะที่สำคัญกว่าได้มากขึ้น ขอให้สนุกกับการเขียนโค้ดครับ

0SHAREFacebookLINE it!

เรื่องที่เกี่ยวข้อง

^