如同其他的工具，在Github Copilot裡可以進行客製化，比較常用的是客製指引 (custom instructions)，也就是告訴Github Copilot產生程式的時候可以依據我們的指引去產生程式，尤其是當我們要開發一個專案時，會有我們自己想要的開發方式，例如，Github Copilot產生next.js專案時，預設採用tailwind來寫css，可是，如果我們不想使用tailwind，就必須要告訴Github Copilot。雖然我們可以透過chat來告訴Github Copilot，但是，有點麻煩，而且多人開發時，可能會有不同的要求，甚至要求之間會有衝突，所以，最好是要有一個統一的指引。所以，Github Copilot會有不同層次的指引，個人層次、程式庫(repository)層次、跨程式庫層次，我們以下會以repository層次為例來進行說明。

產生客製指引檔

首先，我們來產生一個新的指引檔，在Chat視窗中，點選設定按鈕 (Configure Chat…)，會看到「Generate Instructions」。

image.png

Copilot就會自動根據我們目前的程式碼產生指引

image.png

萬一設定有問題，會一直無法產生內容，copilot會請我們手動編輯檔案:

<aside> ❓

原來是我的程式碼有衝突，所以，被卡住了。但是，後來發現可能是因為Chat歷史內容太大了。

</aside>

image.png

可以看到copilot根據我們前面的程式碼，產生了以下的指引:

# Copilot Instructions for testCopilot (Next.js)

## Project Overview
- This is a Next.js project using the App Router and TypeScript, bootstrapped with `create-next-app`.
- Main pages are located in `src/app/` (e.g., `page.tsx`, `intro/page.tsx`, `teacher/page.tsx`, etc.).
- The project is designed as a "輔大資管碩士新生資訊系統" with pages for intro, teachers, courses, rules, contact, and login.

## Architecture & Patterns
- Each route/page is a React component under `src/app/{route}/page.tsx`.
- Shared assets (e.g., images) are stored in `/public`.
- Uses Next.js `<Image />` for image optimization and `<Link />` for navigation.
- Inline styles are used for rapid prototyping; for production, prefer CSS modules in `page.module.css`.
- Teacher data is hardcoded in `teacher/page.tsx` for demo; consider moving to API or static JSON for scalability.

## Developer Workflows
- **Start dev server:** `npm run dev` (default port: 3000)
- **Edit pages:** Modify files in `src/app/` and save to auto-reload.
- **Add images:** Place in `/public` and reference with `/filename` in `<Image />`.
- **Add new pages:** Create a folder under `src/app/{route}/` and add `page.tsx`.
- **Debug:** Use browser console and Next.js error overlay.

## Conventions & Integration
- Use English for code, Chinese for UI text/content.
- Navigation bar is manually coded in `page.tsx`.
- No custom API routes or backend integration yet.
- No global state management; use React hooks locally.
- No test files or CI/CD scripts present.

## Examples
- To add a new teacher, update the `teachers` array in `teacher/page.tsx`.
- To add a new info page, create `src/app/{newroute}/page.tsx` and link from the navbar.
- To update the campus map, replace `/public/campus-map.jpg` and update `<Image />` props in `page.tsx`.

## Key Files
- `src/app/page.tsx` (Home, navigation, intro)
- `src/app/teacher/page.tsx` (Teacher list, details)
- `src/app/course/page.tsx` (Course info)
- `src/app/rules2/page.tsx` (Rules)
- `src/app/contact/page.tsx` (Contact info)
- `src/app/login/page.tsx` (Login stub)
- `public/campus-map.jpg` (Campus map image)
- `README.md` (Basic Next.js usage)

---

If any conventions or workflows are unclear, please ask for clarification or provide feedback to improve these instructions.

這個instruction算是滿簡單的，一個典型的指引包含專案介紹、資料夾的結構、使用的程式庫(libraries)及框架(frameworks)、程式規範 (coding standard)、介面的指導原則(guidelines)。

利用指引檔檢查及修改程式

我們先打開page.tsx，假如我們故意加了一個<img>，這個部分其實是不符合規範。

import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  return (
    <main style={{padding: '2rem'}}>
      <h1 style={{fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem'}}>輔大資管碩士新生資訊系統</h1>
      <nav style={{marginBottom: '2rem'}}>
        <Link href="/intro">系所簡介</Link> |{' '}
        <Link href="/teacher">師資介紹</Link> |{' '}
        <Link href="/course">課程資訊</Link> |{' '}
        <Link href="/rules2">修業規則</Link> |{' '}
        <Link href="/contact">聯絡資訊</Link> |{' '}
        <Link href="/login">新生登入</Link>
      </nav>
      <section>
        <h2>系所簡介</h2>
        <p>輔仁大學資訊管理學系，課程涵蓋 AI、大數據、系統分析等領域，師資專業且平易近人。</p>
        <h2>歡迎信</h2>
        <p>親愛的新生，歡迎加入輔大資管所大家庭！恭喜你成為我們的一員，這裡有友善的師長、資源豐富的環境，以及溫暖互助的學長姐們，陪你一起成長。</p>
        <h2>校園地圖</h2>
        <img src="/campus-map.jpg"></img>
  <Image src="/campus-map.jpg" alt="校園地圖" width={800} height={400} style={{maxWidth: '100%', marginTop: '1rem'}} />
      </section>
    </main>
  );
}

我們請copilot幫我們檢查一下:

image.png