Personnaliser GitHub Copilot dans VS Code

// Code généré par Copilot
function getUserData(id) {  // ❌ Pas de types malgré TypeScript requis
  return fetch('/api/users/' + id)  // ❌ Les template literals devraient être utilisés
}

// Code correct suivant les conventions de l'équipe
async function getUserData(id: string): Promise<UserData> {
  return await fetch(`/api/users/${id}`)
}

Développeur : "Crée un composant React"
GitHub Copilot : "Composant de classe généré"
Développeur : "Non, utilise un composant fonctionnel, avec TypeScript, et des définitions de types pour les props..."

# Pour le prochain composant aussi...
Développeur : "Crée un autre composant..."
GitHub Copilot : "Voici un composant de classe..."
Développeur : "J'ai dit composant fonctionnel !"

Développeur : "Aide-moi à implémenter l'authentification utilisateur"
Copilot : "Je vais suggérer une implémentation générale utilisant JWT"
Développeur : "Nous utilisons Auth0..."
Copilot : "D'accord. Laissez-moi implémenter Auth0..."
Développeur : "Et nous avons un flux d'authentification interne..."

# Directives de codage à l'échelle du projet

## Style de code
- Utiliser des éléments HTML5 sémantiques (header, main, section, article)
- Prioriser les fonctionnalités JavaScript modernes (const/let, fonctions fléchées, template literals)
- Toujours inclure les définitions de types TypeScript

## Conventions de nommage
- Noms de composants, interfaces, alias de types : PascalCase
- Variables, fonctions, méthodes : camelCase
- Membres de classe privés : préfixe underscore (_)
- Constantes : ALL_CAPS

## Qualité du code
- Utiliser des noms de variables et de fonctions significatifs
- Ajouter des commentaires pour la logique complexe
- Implémenter la gestion des erreurs pour les saisies utilisateur et les appels API
- Préférer async/await aux callbacks

## Sécurité
- Ne jamais coder en dur des informations sensibles
- Toujours valider les valeurs d'entrée
- Utiliser des placeholders pour prévenir les injections SQL

---
applyTo: "**/*.tsx"
---

# Directives de développement React

- Prioriser les composants fonctionnels sur les composants de classe
- Exploiter les hooks personnalisés pour séparer la logique de gestion d'état
- Toujours définir les props avec des interfaces TypeScript
- Utiliser les classes utilitaires Tailwind CSS pour le style
- Mémoïser avec React.memo si nécessaire

---
applyTo: "src/server/**/*.ts"
---

# Directives de développement Backend

- Placer les contrôleurs dans `src/controllers/`
- Placer la logique de service dans `src/services/`
- Implémenter l'accès aux données en utilisant le pattern repository
- Charger les variables d'environnement depuis `.env`
- Centraliser la gestion des erreurs avec des middlewares
- Utiliser Winston pour la journalisation

{
  "github.copilot.chat.codeGeneration.useInstructionFiles": true
}

---
agent: 'agent'
model: 'GPT-4o'
tools: ['search/codebase']
description: 'Generate a React component'
---

Generate a React component with the following requirements:

Component name: ${input:componentName:Enter component name}
Props: ${input:props:Enter props comma-separated (e.g., title, onClick, isDisabled)}

## Generation Rules
- Implement in TypeScript
- Use functional components
- Define props with an interface
- Style with Tailwind CSS
- Manage state with React Hooks as needed
- Document props with JSDoc comments

---
agent: 'agent'
description: 'Generate a RESTful API route'
---

Generate a CRUD API for the following entity:

Entity name: ${input:entity:Entity name}
Fields: ${input:fields:Specify fields comma-separated}

## Implementation Requirements
- Use Express.js
- Implement in TypeScript
- Place router in `src/routes/`
- Place controller in `src/controllers/`
- Use express-validator for validation
- Implement proper error handling
- Use standard JSON response format

---
agent: 'agent'
tools: ['search/codebase']
description: 'Auto-generate unit tests'
---

Selected code: ${selection}

Generate comprehensive unit tests for the above code.

## Test Requirements
- Use Jest
- Maximize test coverage
- Cover both normal and error cases
- Consider edge cases
- Use mocks and stubs appropriately
- Write descriptive describe/it statements for each test case

---
agent: 'agent'
description: 'Conduct a code review'
---

Selected code: ${selection}

Conduct a code review from the following perspectives:

## Review Perspectives
1. **Security**: Presence of vulnerabilities
2. **Performance**: Optimization opportunities
3. **Code Quality**: Readability, maintainability
4. **Error Handling**: Proper exception handling
5. **Testability**: Ease of testing
6. **Coding Standards**: Compliance with project conventions

Provide improvement suggestions with specific code examples.

.github/skills/
├── webapp-testing/
│   ├── SKILL.md
│   └── example-test.spec.ts
└── github-actions-debugging/
    ├── SKILL.md
    └── troubleshooting-guide.md

---
name: webapp-testing
description: Generate E2E tests using Playwright. Use this when you need to test user interactions.
---

# Web Application Testing with Playwright

This skill supports the generation of end-to-end (E2E) tests using Playwright.

## Test Generation Rules

1. **Selector Priority**: 
   - Prioritize `getByRole`
   - Next, `getByLabel`
   - As a last resort, `getByTestId`

2. **Test Structure**:
   - Each test should be independently executable
   - Implement proper setup/teardown
   - Write clear assertions

3. **Best Practices**:
   - Use Page Object Model pattern
   - Waits are executed implicitly
   - Take screenshots only on failure

## Template Example

Generate tests based on the following example-test.spec.ts.

```typescript
import { test, expect } from '@playwright/test';

test('user can log in successfully', async ({ page }) => {
  await page.goto('/login');
  
  await page.getByRole('textbox', { name: 'Email' }).fill('user@test.com');
  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
  await page.getByRole('button', { name: 'Sign in' }).click();
  
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

`.github/skills/webapp-testing/example-test.spec.ts`

```typescript
import { test, expect } from '@playwright/test';

test('user can add item to cart', async ({ page }) => {
  await page.goto('/products');
  
  const product = page.getByRole('article').filter({ hasText: 'Product Name' });
  await product.getByRole('button', { name: 'Add to Cart' }).click();
  
  await expect(page.getByRole('status', { name: 'Cart' })).toContainText('1 item');
});

test('user can complete checkout', async ({ page }) => {
  await page.goto('/cart');
  
  await page.getByRole('button', { name: 'Checkout' }).click();
  await page.getByRole('textbox', { name: 'Card Number' }).fill('4242424242424242');
  await page.getByRole('button', { name: 'Place Order' }).click();
  
  await expect(page.getByRole('heading')).toContainText('Order Confirmed');
});

---
name: github-actions-failure-debugging
description: Debug GitHub Actions workflow failures. Use when CI fails.
---

# GitHub Actions Failure Debugging

This skill provides an efficient process for debugging GitHub Actions workflow failures.

## Debugging Process

When debugging GitHub Actions workflows that failed on a Pull Request, follow these steps:

1. **Check Workflow Execution Status**
   - Use the `list_workflow_runs` tool to check recent executions and statuses for the PR

2. **Get Log Summary**
   - Use the `summarize_job_log_failures` tool to get an AI summary of failed job logs
   - Understand issues without overwhelming the context window

3. **Identify Root Cause**
   - Classify the issue type from error messages:
     * Dependency issues
     * Test failures
     * Build errors
     * Permission errors
     * Timeouts

4. **Propose Solutions**
   - Provide specific fixes for identified problems
   - Suggest workflow file modifications as needed

## Common Issues and Solutions

### Dependency Issues
- Node.js version mismatch
- Package installation failure
→ Check `package-lock.json`, clear cache

### Test Failures
- Missing environment variables
- Test data issues
→ Verify environment variable settings, validate test seed data

### Permission Errors
- Insufficient GITHUB_TOKEN scope
- Incorrect secrets configuration
→ Check permissions and secrets in repository settings

---
name: 'planner'
description: 'Agent specialized in pre-implementation planning'
tools:
  - 'search/codebase'
  - 'githubRepo'
toolsets:
  - 'read-only'
model: 'GPT-4o'
---

# Implementation Planning Agent

You are an agent specialized in creating implementation plans. You don't write code, only create implementation plans.

## Responsibilities

1. **Requirements Analysis**: Analyze user requirements in detail
2. **Impact Investigation**: Identify files and components that need changes
3. **Task Decomposition**: Break down implementation into small tasks
4. **Risk Identification**: Identify potential issues

## Plan Format

### 1. Overview
[Purpose of implementation and expected results]

### 2. Impact Scope
- List of files requiring changes
- Affected components

### 3. Implementation Steps
1. [Details of Step 1]
   - Required changes
   - Notes
2. [Details of Step 2]
   ...

### 4. Testing Strategy
- Unit test targets
- E2E test scenarios

### 5. Risks and Countermeasures
| Risk | Countermeasure |
|------|----------------|
| ...  | ...            |

After plan approval, hand off to the implementation agent.

---
name: 'security-reviewer'
description: 'Agent that reviews code from a security perspective'
tools:
  - 'search/codebase'
model: 'Claude Sonnet 3.5'
---

# Security Review Agent

You are an agent that detects code vulnerabilities as a security expert.

## Review Items

### 1. Authentication & Authorization
- [ ] Proper authentication mechanism implementation
- [ ] No authorization check leaks
- [ ] Session management safety

### 2. Input Validation
- [ ] Sanitize all user inputs
- [ ] SQL injection countermeasures
- [ ] XSS countermeasures
- [ ] CSRF countermeasures

### 3. Data Protection
- [ ] No hardcoded sensitive information
- [ ] Proper use of encryption
- [ ] No sensitive information output to logs

### 4. Dependencies
- [ ] Use of packages with known vulnerabilities
- [ ] Recommend updating to latest versions

### 5. API Security
- [ ] Rate limiting implementation
- [ ] Proper CORS configuration
- [ ] Safe API key management

## Report Format

For each detected issue, report:
- **Severity**: Critical / High / Medium / Low
- **Description**: What is the problem
- **Impact**: Impact if exploited
- **Fix Method**: Specific code examples

Critical/High vulnerabilities require immediate fixes.

---
name: 'frontend-dev'
description: 'Agent specialized in frontend development'
tools:
  - 'search/codebase'
  - 'terminal'
  - 'edit'
model: 'GPT-4o'
---

# Frontend Development Agent

You are an expert in frontend development using React/TypeScript/Tailwind CSS.

## Development Principles

### Component Design
- Prioritize reusability
- Follow single responsibility principle
- Keep props minimal
- Appropriate abstraction level

### State Management
- Manage local state with useState/useReducer
- Keep global state to minimum necessary
- Prevent unnecessary re-renders

### Styling
- Use Tailwind CSS utility classes
- Minimize custom CSS
- Implement responsive design mobile-first

### Performance
- Prevent unnecessary re-renders with React.memo
- Memoize callbacks with useCallback
- Cache heavy calculations with useMemo
- Optimize images (next/image, etc.)

## Implementation Flow

1. Clarify component responsibilities
2. Define props interface
3. Design state management
4. Implement JSX structure
5. Apply styling
6. Verify accessibility (ARIA attributes)
7. Implement responsive support

Always preview in browser after implementation to verify functionality.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "github-token",
      "description": "GitHub Personal Access Token",
      "password": true
    },
    {
      "type": "promptString",
      "id": "db-connection",
      "description": "Database Connection String",
      "password": true
    }
  ],
  "servers": {
    "github-server": {
      "type": "http",
      "url": "https://github-mcp.com",
      "headers": {
        "Authorization": "Bearer ${input:github-token}"
      }
    },
    "database-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${input:db-connection}"
      }
    },
    "filesystem-server": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/workspace"]
    }
  }
}

{
  "chat.mcp.servers": {
    "perplexity-search": {
      "type": "http",
      "url": "https://perplexity-mcp.com/api",
      "env": {
        "PERPLEXITY_API_KEY": "${env:PERPLEXITY_API_KEY}"
      }
    },
    "slack-integration": {
      "command": "docker",
      "args": ["run", "-i", "slack-mcp-server"],
      "env": {
        "SLACK_TOKEN": "${env:SLACK_BOT_TOKEN}"
      }
    }
  }
}

# Exemple de prompt

@agent Get recent issues from GitHub repository contoso/my-app,
and list them in order of priority.

# Actions de Copilot
1. Appeler l'outil `list_issues` du serveur MCP GitHub
2. Trier les issues récupérées par priorité
3. Répondre au format markdown

# Exemple de prompt

Retrieve all users from the database and
aggregate the count of active users.

# Actions de Copilot
1. Exécuter l'outil `query` du serveur MCP de base de données
2. SQL: SELECT COUNT(*) FROM users WHERE is_active = true
3. Formater et afficher les résultats

// custom-mcp-server/index.ts
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server(
  {
    name: "custom-api-server",
    version: "1.0.0",
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

// Tool definition
server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "fetch_user_data",
        description: "Fetch user data",
        inputSchema: {
          type: "object",
          properties: {
            userId: { type: "string", description: "User ID" },
          },
          required: ["userId"],
        },
      },
    ],
  };
});

// Tool execution
server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "fetch_user_data") {
    const userId = request.params.arguments?.userId;
    // API request implementation
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    
    return {
      content: [{ type: "text", text: JSON.stringify(data, null, 2) }],
    };
  }
  throw new Error("Unknown tool");
});

// Start server
const transport = new StdioServerTransport();
await server.connect(transport);

{
  "name": "custom-mcp-server",
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "latest"
  },
  "bin": {
    "custom-mcp-server": "./index.js"
  }
}

my-microservice/
├── .github/
│   ├── copilot-instructions.md          # Normes de développement globales
│   ├── instructions/
│   │   ├── backend.instructions.md     # Spécifique au backend
│   │   ├── frontend.instructions.md    # Spécifique au frontend
│   │   └── infra.instructions.md       # Spécifique à l'infrastructure
│   ├── agents/
│   │   ├── planner.md                   # Agent de planification
│   │   ├── implementer.md              # Agent d'implémentation
│   │   ├── reviewer.md                  # Agent de revue
│   │   └── deployer.md                  # Agent de déploiement
│   ├── skills/
│   │   ├── api-testing/
│   │   │   ├── SKILL.md
│   │   │   └── sample-api-test.ts
│   │   └── k8s-deployment/
│   │       ├── SKILL.md
│   │       └── deployment-template.yaml
│   └── prompts/
│       ├── create-service.prompt.md
│       ├── add-endpoint.prompt.md
│       └── generate-migration.prompt.md
└── .vscode/
    └── mcp.json                         # Configuration MCP

# Requête à l'agent @planner
Je veux ajouter une fonctionnalité d'authentification utilisateur.
Implémenter une authentification basée sur OAuth et tokens JWT.

# Implémenter avec l'agent @implementer
Sur la base du plan ci-dessus, implémenter le middleware d'authentification.

# Utiliser le Prompt File
/generate-tests

# Vérifier avec l'agent @security-reviewer
Effectuer une revue de sécurité du middleware d'authentification implémenté.

# Exploiter MCP + K8s Skill
@agent Generate deployment configuration for the authentication service using kubernetes-skill.

{
  "github.copilot.chat.models": [
    {
      "id": "my-custom-model",
      "name": "Custom GPT-4",
      "endpoint": "https://api.openai.com/v1/chat/completions",
      "apiKey": "${env:OPENAI_API_KEY}",
      "model": "gpt-4-turbo-preview"
    },
    {
      "id": "local-llm",
      "name": "Local LLaMA",
      "endpoint": "http://localhost:8080/v1/chat/completions",
      "model": "llama-3-70b-instruct"
    }
  ]
}

Semaine 1 : Configurer les Custom Instructions
Semaine 2 : Convertir les tâches fréquentes en Prompt Files
Semaine 3 : Essai d'introduction des Custom Agents
Semaine 4 : Intégration externe avec les serveurs MCP

// Gérer les clés API avec des variables d'environnement
{
  "chat.mcp.servers": {
    "secure-api": {
      "env": {
        "API_KEY": "${env:MY_API_KEY}"  // Ne pas coder en dur
      }
    }
  }
}

# team-wiki/copilot-usage.md

## Utilisation des Custom Agents

- `@planner` : Planification avant implémentation
- `@implementer` : Implémentation du code
- `@reviewer` : Revue de code
- `@deployer` : Travaux de déploiement

## Référence rapide des Prompt Files

- `/create-component` : Générer un composant React
- `/add-api-route` : Ajouter un endpoint API
- `/generate-tests` : Auto-générer du code de test