GORAGOD.com

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

เพิ่มพลังให้ GitHub Copilot สอนให้รู้จักโปรเจกต์ของคุณด้วย Custom Instructions ระดับ Repository

เพิ่มพลังให้ GitHub Copilot สอนให้รู้จักโปรเจกต์ของคุณด้วย Custom Instructions ระดับ Repository

GitHub Copilot เป็นเครื่องมือที่ทรงพลังและช่วยให้นักพัฒนาเขียนโค้ดได้เร็วขึ้นอย่างมาก แต่ในบางครั้ง Copilot ก็อาจจะยังไม่ "เข้าใจ" บริบทเฉพาะของโปรเจกต์ที่เรากำลังทำอยู่ เช่น สถาปัตยกรรม, Framework ที่ใช้, หรือข้อตกลงในการเขียนโค้ดของทีม

ข่าวดีคือ GitHub ได้เปิดตัวฟีเจอร์ Custom Instructions สำหรับ Repository ซึ่งเปรียบเสมือนการสร้าง "คู่มือ" ให้ Copilot อ่านและทำความเข้าใจโปรเจกต์ของเราโดยเฉพาะ ทำให้คำแนะนำที่ได้มีความแม่นยำและสอดคล้องกับโปรเจกต์มากขึ้น

บทความนี้จะอธิบายวิธีการสร้างและใช้งานฟีเจอร์นี้อย่างละเอียด

Custom Instructions สำหรับ Repository คืออะไร?

มันคือไฟล์ Markdown พิเศษที่เราสร้างขึ้นใน Repository ของเราเอง โดยใช้ชื่อและตำแหน่งที่กำหนดคือ

.github/copilot/instructions.md

เมื่อไฟล์นี้ถูกสร้างและ push ขึ้นไปบน GitHub แล้ว ทุกครั้งที่คุณ (หรือเพื่อนร่วมทีม) เปิดโปรเจกต์นี้และใช้งาน Copilot (ทั้งในรูปแบบ Chat หรือ Autocomplete), Copilot จะนำข้อมูลในไฟล์ instructions.md นี้ไปเป็นบริบทเพิ่มเติมก่อนที่จะสร้างคำตอบหรือคำแนะนำโค้ดให้เรา

ทำไมเราถึงควรใช้?

การสร้างไฟล์นี้มีประโยชน์หลายอย่าง

  1. ความแม่นยำที่สูงขึ้น Copilot จะรู้ว่าโปรเจกต์ของคุณใช้ Framework อะไร (เช่น React, Vue, Django), ใช้ Library UI ตัวไหน (เช่น Material-UI, Tailwind CSS) หรือมีหลักการออกแบบอย่างไร ทำให้โค้ดที่แนะนำมานั้นถูกต้องและพร้อมใช้งานทันที

  2. รักษามาตรฐานของโค้ด (Coding Standards) คุณสามารถระบุข้อตกลงของทีมลงไปได้ เช่น "ฟังก์ชันทั้งหมดต้องมี Docstring ในรูปแบบ...”, "ใช้ camelCase สำหรับชื่อตัวแปร" หรือ "import แบบเรียงตามลำดับตัวอักษร"

  3. ลดการอธิบายซ้ำซ้อน แทนที่จะต้องคอยบอก Copilot Chat ในทุกๆ ครั้งว่า "ช่วยเขียนคอมโพเนนต์ React โดยใช้ Tailwind CSS" คุณสามารถระบุไว้ในไฟล์นี้ครั้งเดียว Copilot ก็จะจำได้ตลอดการทำงานในโปรเจกต์นี้

  4. ช่วยนักพัฒนาใหม่ (Onboarding) เมื่อมีสมาชิกใหม่เข้าร่วมทีม พวกเขาสามารถใช้ Copilot เพื่อเรียนรู้และเขียนโค้ดตามมาตรฐานของโปรเจกต์ได้เร็วขึ้น เพราะ Copilot รู้ "กฎ" ของบ้านอยู่แล้ว

เราควรใส่อะไรในไฟล์ instructions.md บ้าง?

คุณสามารถเขียนอะไรก็ได้ที่เป็นประโยชน์เพื่อให้ Copilot เข้าใจโปรเจกต์ของคุณมากขึ้น โดยใช้ภาษา Markdown ธรรมดา เนื้อหาที่แนะนำให้ใส่ ได้แก่:

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

  • Frameworks และ Libraries หลักที่ใช้ เช่น React 18, Next.js 14, Prisma ORM, Python 3.11, Django 5.0

  • สถาปัตยกรรม (Architecture) โปรเจกต์นี้ใช้สถาปัตยกรรมแบบไหน เช่น Monorepo, Microservices, MVC (Model-View-Controller)

  • รูปแบบและข้อตกลงในการเขียนโค้ด (Coding Style & Conventions)

    • การตั้งชื่อไฟล์, ตัวแปร, ฟังก์ชัน

    • รูปแบบการจัดการ State (เช่น Redux Toolkit, Zustand)

    • การจัดการ Error Handling

  • แนวทางการเขียนเทส (Testing Guidelines)

    • ใช้ Framework อะไรในการเทส (เช่น Jest, Pytest)

    • ไฟล์เทสควรอยู่ที่ไหน และมีโครงสร้างอย่างไร

  • ข้อมูลสำคัญอื่นๆ

    • ตำแหน่งของไฟล์สำคัญ เช่น models.py, api/routes.ts

    • ตัวอย่างการเรียกใช้ API Endpoint

# Custom Instructions for Our E-commerce Project

## Project Overview
This is a web application for an e-commerce platform built with Next.js and Tailwind CSS. The backend is a separate Django REST Framework API.

## Key Technologies
- **Frontend:** Next.js 14 (App Router), React 18, TypeScript.
- **Styling:** Tailwind CSS. Do not use custom CSS files unless absolutely necessary. Use `@apply` for complex components.
- **State Management:** Zustand. Create a new store for each feature domain.
- **Data Fetching:** React Query (TanStack Query) for interacting with the backend API.
- **Testing:** Jest and React Testing Library. Test files must be located alongside the component, with the `.test.tsx` extension (e.g., `Button.test.tsx`).

## Coding Conventions
- Use functional components with hooks.
- All components must be typed using TypeScript.
- Name components using `PascalCase` (e.g., `ProductCard`).
- Name variables and functions using `camelCase` (e.g., `fetchProducts`).
- All API calls must include error handling using try/catch blocks.

## How to write a test
When asked to write a test for a component, follow this structure:
1. Import React, `render`, `screen` from `@testing-library/react`.
2. Import the component to be tested.
3. Use a `describe` block for the component.
4. Use `it` blocks to describe what is being tested.
5. Render the component and use `screen.getBy...` to find elements.
6. Use `expect` to make assertions.

ขั้นตอนการสร้างไฟล์ Custom Instructions

  1. เปิดโปรเจกต์ของคุณใน VS Code หรือ Editor ที่คุณต้องการ

  2. ที่ Root Directory ของโปรเจกต์, สร้างโฟลเดอร์ใหม่ชื่อ .github (หากยังไม่มี)

  3. เข้าไปในโฟลเดอร์ .github แล้วสร้างโฟลเดอร์ซ้อนอีกชั้นหนึ่งชื่อ copilot

  4. ในโฟลเดอร์ copilot, สร้างไฟล์ใหม่ชื่อ instructions.md

  5. เขียนเนื้อหาที่ต้องการลงในไฟล์ instructions.md โดยอ้างอิงจากตัวอย่างด้านบนและปรับให้เข้ากับโปรเจกต์ของคุณ

  6. Commit และ Push ไฟล์ .github/copilot/instructions.md ขึ้นไปยัง Remote Repository ของคุณ (เช่น GitHub)

เพียงเท่านี้ GitHub Copilot ก็พร้อมที่จะทำงานในโปรเจกต์ของคุณอย่างชาญฉลาดและเป็นอันหนึ่งอันเดียวกันกับทีมของคุณแล้ว

สรุป

ฟีเจอร์ Custom Instructions สำหรับ Repository เป็นการอัปเกรดที่เรียบง่ายแต่ทรงพลังอย่างยิ่ง มันช่วยเปลี่ยน GitHub Copilot จากผู้ช่วยเขียนโค้ดทั่วไป ให้กลายเป็น "เพื่อนร่วมทีม" ที่เข้าใจบริบทและวัฒนธรรมการทำงานของโปรเจกต์เราอย่างแท้จริง ลองนำไปปรับใช้กับโปรเจกต์ของคุณดู แล้วจะพบว่า GitHub Copilot จะกลายเป็นผู้ช่วยที่ฉลาดและเข้าใจงานของคุณมากขึ้นอย่างไม่น่าเชื่อ

0SHAREFacebookLINE it!

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

^