- Générer du code avec l'IA : Copilot, Claude, Cursor

Vue d'ensemble des outils IA pour le code

Les outils IA pour le développement se divisent en trois catégories selon leur niveau d'autonomie :

• Autocomplétion inline (Copilot, Supermaven) — suggèrent du code token par token pendant la frappe
• Éditeurs IA (Cursor, Windsurf) — édition multi-fichiers, chat contextualisé, agent terminal
• Agents autonomes (Claude Code, Devin) — lisent, écrivent, exécutent des commandes de façon autonome

Ces catégories se complètent : l'autocomplétion accélère la frappe au quotidien, les éditeurs IA gèrent les tâches de quelques fichiers, les agents autonomes gèrent les refactorings et les features complexes.

GitHub Copilot — autocomplétion et Workspace

GitHub Copilot est le pionnier de l'autocomplétion IA. Alimenté par les modèles GPT-4o et Claude Sonnet selon le contexte, il est intégré dans VS Code, JetBrains et Neovim.

// Cas d'usage 1 : complétion depuis un commentaire
// Angular service pour gérer un panier d'achat avec Signals
// Copilot complète le reste du service :

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<CartItem[]>([]);

  // Copilot suggère toutes ces méthodes d'après le commentaire initial
  addItem(product: Product, quantity = 1) {
    this.items.update(items => {
      const existing = items.find(i => i.productId === product.id);
      if (existing) {
        return items.map(i => i.productId === product.id
          ? { ...i, quantity: i.quantity + quantity }
          : i
        );
      }
      return [...items, { productId: product.id, price: product.price, quantity }];
    });
  }

  // Copilot continue à compléter removeItem, clearCart, total computed...
}

// Cas d'usage 2 : Copilot Chat dans VS Code
// Sélectionner un bloc de code + Ctrl+I → "/explain" pour explication
// "/fix" pour correction automatique
// "/test" pour générer des tests unitaires
// "/doc" pour générer la JSDoc

# Copilot CLI — suggestions shell
gh copilot suggest "trouver tous les fichiers TypeScript modifiés cette semaine"
# → git diff --name-only --since="1 week ago" -- "*.ts"

gh copilot explain "git rebase -i HEAD~3"
# → Explication détaillée du rebase interactif sur les 3 derniers commits

Prix : 10$/mois (individuel), 19$/mois (Business avec contrôles d'entreprise), inclus dans GitHub Copilot Enterprise.

Claude Code — agent CLI multi-fichiers

Claude Code est un agent IA en ligne de commande développé par Anthropic. Sa différence principale avec Copilot et Cursor : il lit l'intégralité du projet avant d'agir, exécute des commandes shell, lance des tests, et itère jusqu'à ce que la tâche soit terminée.

# Installation
npm install -g @anthropic-ai/claude-code

# Lancer depuis la racine du projet
claude

# Exemples de tâches complexes :
# > Ajoute une pagination Signal-based au composant ProductListComponent
#   avec infinite scroll et un état de chargement
#
# > Refactorise tous les composants qui utilisent @Input() décorateur
#   vers input() signal-based. Garde les outputs comme EventEmitter pour l'instant.
#
# > Analyse les performances de l'app. Identifie les composants qui se re-rendent
#   trop souvent et propose des optimisations avec computed() et OnPush.
#
# > Génère des tests Jasmine complets pour UserService incluant
#   les cas d'erreur HTTP et les cas limites (utilisateur null, liste vide)
#
# > Le build TypeScript échoue. Lis les erreurs et corrige-les.

# Claude Code peut aussi être utilisé sans interface interactive
echo "Ajoute un type guard isUser()" | claude --print

Cursor — éditeur IA natif

Cursor est un fork de VS Code avec l'IA intégrée au niveau de l'éditeur, pas comme plugin. Le mode Composer permet d'éditer plusieurs fichiers simultanément depuis une seule instruction en langage naturel.

# Composer (Ctrl+I dans Cursor) — édition multi-fichiers
# Citer des fichiers avec @, des symboles avec #, des docs web avec @web

Composer> @src/app/products Crée un composant ProductFilter avec :
  - Filtrage par catégorie (Signal)
  - Filtrage par prix min/max (Signal)
  - Debounce 300ms sur la recherche textuelle
  - Résultats via computed() Angular
  - Template Bootstrap 5 avec form-select et range inputs

# Cursor comprend les fichiers existants via @src/app/products
# et génère ProductFilter en respectant le style du projet

Composer> @package.json @angular.json Migre de Angular 17 vers 18.
  Lis d'abord le CHANGELOG officiel @web angular.io/guide/update-to-version-18
  puis identifie et corrige les breaking changes dans le projet.

# Chat (Ctrl+L) — questions sur le code ouvert
Chat> #ProductService Pourquoi ce service se déclenche-t-il deux fois ?
# Cursor analyse ProductService et identifie la cause

Prix : 20$/mois (Pro, inclut GPT-4o et Claude Sonnet), 40$/mois (Business).

Comparatif technique

Écrire des prompts efficaces pour le code

La qualité du code généré dépend directement de la qualité du prompt. Un prompt vague génère du code générique. Un prompt précis génère du code adapté à ton projet.

Prompt pour générer un composant Angular

# ❌ Prompt vague
"Crée un composant Angular pour un formulaire"

# ✅ Prompt précis et contextualisé
"""
Crée un composant Angular 18 standalone nommé ContactFormComponent.

CONTEXTE :
- Projet : app Angular avec Bootstrap 5, Signals, standalone components
- Formulaire de contact avec validation et envoi vers une API REST
- Le service d'envoi existe déjà : ContactService.sendMessage(dto: ContactDto): Observable

COMPOSANT REQUIS :
- Réactif forms (FormGroup, FormControl, Validators)
- Champs : name (required, min 2 chars), email (required, email format),
           subject (required), message (required, min 20 chars)
- Gestion états : idle / loading / success / error avec Signals
- Template Bootstrap 5 : form-control, form-floating labels, invalid-feedback
- Bouton submit désactivé pendant le chargement, spinner inline
- Message de succès avec ng-bootstrap toast après envoi

CONTRAINTES :
- Pas de inline styles, utiliser uniquement les classes Bootstrap
- Les messages d'erreur doivent être traduits en français
- Gérer les erreurs HTTP (400/500) avec des messages différents
"""

Prompt pour générer des tests unitaires

# Prompt optimisé pour les tests Jasmine/Karma Angular
"""
Génère des tests unitaires complets pour UserService.

CLASSE À TESTER (coller le code ici) :
@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);
  users = signal([]);

  loadUsers(): Observable {
    return this.http.get('/api/users').pipe(
      tap(users => this.users.set(users))
    );
  }

  getUserById(id: number): Observable {
    return this.http.get(`/api/users/${id}`);
  }
}

TESTS REQUIS :
- loadUsers() : succès (vérifie le signal mis à jour), erreur HTTP 404, erreur HTTP 500
- getUserById() : succès avec id valide, 404 pour id inexistant
- Utiliser HttpClientTestingModule + HttpTestingController
- Chaque test doit être indépendant (setup dans beforeEach, teardown dans afterEach)
"""

CLAUDE.md et .cursorrules — contexte permanent

Ces fichiers permettent de donner à l'IA le contexte permanent de ton projet : stack, conventions, patterns à utiliser ou éviter. L'IA les lit à chaque session et adapte sa génération de code.

# CLAUDE.md — à la racine du projet Angular
# Lu automatiquement par Claude Code à chaque session

## Stack & Versions
- Angular 18.2, TypeScript 5.5, Bootstrap 5.3
- RxJS 7.8, NgRx 18, Jest (pas Karma)

## Conventions de code
- Composants : TOUJOURS standalone: true, jamais NgModule
- Change detection : TOUJOURS signal-based (signal(), computed(), effect())
  Ne jamais créer de propriété de classe classique pour l'état du composant
- Imports : organiser en 3 blocs (Angular, Third-party, Local) séparés par ligne vide
- Nommage : PascalCase composants, camelCase méthodes, kebab-case fichiers
- Pas de barrel files (index.ts) — imports directs uniquement

## Ce qu'il faut ÉVITER
- @Input() décorateur → utiliser input() signal
- @Output() EventEmitter → utiliser output()
- Subject + asObservable() pour l'état → utiliser signal()
- CommonModule → utiliser les imports spécifiques (NgClass, NgStyle, AsyncPipe)
- any TypeScript → typer explicitement
- console.log en dehors des environnements de dev

## Patterns à utiliser
- Services : inject() dans le constructeur (pas d'injection dans le constructor())
- HTTP : httResource() pour les requêtes réactives, HttpClient.get() pour one-shot
- Erreurs : never throw raw Error — utiliser Result type ou discriminated unions
- Tests : describe/it pattern, TestBed.runInInjectionContext() pour les services

## Structure des dossiers
src/app/
  features/          ← composants et services par feature
  shared/
    components/      ← composants réutilisables
    services/        ← services transversaux
    types/           ← interfaces et types TypeScript

Workflow concret Angular + IA

Voici un workflow typique pour développer une feature Angular avec l'aide de l'IA :

# 1. PLANIFICATION avec Claude Code (pas de code encore)
> Décris le workflow pour implémenter un système de notifications en temps réel
  avec Server-Sent Events dans notre app Angular. Quels fichiers créer,
  quelles étapes dans quel ordre ? Ne génère pas encore de code.

# Claude propose l'architecture : SSE service → notification store → toast component

# 2. GÉNÉRATION du service SSE (Copilot ou Claude Code)
> Implémente NotificationService qui :
  - Se connecte via SSE à /api/events
  - Parse les messages JSON {type, data}
  - Expose les notifications via Signal
  - Gère la reconnexion automatique (backoff exponentiel) si la connexion tombe

# 3. VÉRIFICATION et itération
> Lance ng build et ng test. Corrige les erreurs.
# Claude exécute, lit les erreurs, corrige, répète

# 4. TESTS
> Génère des tests Jest complets pour NotificationService
  en mockant EventSource avec un mock manuel

# 5. REVUE sécurité (voir section suivante)
> Analyse NotificationService pour des vulnérabilités de sécurité
  (injection, XSS, exposition de données sensibles)

Revue sécurité du code généré

Les LLMs peuvent générer du code fonctionnel mais vulnérable. Voici les vulnérabilités les plus fréquentes dans le code Angular généré par IA :

XSS — innerHTML et bypassSecurityTrust

// ❌ Code fréquemment généré par l'IA — DANGEREUX
@Component({
  template: `<div [innerHTML]="userContent"></div>`
})
// Si userContent vient d'une API ou d'un champ utilisateur → XSS possible

// ❌ Autre pattern dangereux généré par l'IA
constructor(private sanitizer: DomSanitizer) {}
getHtml() {
  return this.sanitizer.bypassSecurityTrustHtml(this.content);
  // bypassSecurityTrust* désactive la protection Angular → XSS
}

// ✅ Alternative sûre : utiliser le texte brut
@Component({ template: `<div>{{ userContent }}</div>` })
// Angular échappe automatiquement le contenu dans les interpolations {{ }}

Injection dans les requêtes HTTP

// ❌ Interpolation directe dans les URLs — risque d'injection
const url = `/api/users/${this.userInput}`;
// Si userInput = "../admin/secrets" → path traversal

// ✅ Utiliser HttpParams qui encode correctement
const params = new HttpParams().set('userId', this.userInput);
this.http.get('/api/users', { params });

• Vérifier l'absence de bypassSecurityTrust* dans le code généré
• S'assurer que toutes les données utilisateur passent par les HttpParams
• Vérifier que les tokens JWT ne sont pas stockés dans localStorage (préférer cookies httpOnly)
• Tester avec OWASP ZAP ou Snyk Code les endpoints générés

Limites et précautions

• Hallucinations d'API : l'IA peut inventer des méthodes ou des propriétés qui n'existent pas (vérifier dans la doc officielle)
• Dépréciations : les LLMs ont une date de coupure de connaissance — ils peuvent générer du code utilisant des APIs dépréciées en Angular 18+
• Confidentialité : ne jamais envoyer de tokens, clés API, mots de passe ou données personnelles dans les prompts
• Dépendance cognitive : comprendre et relire tout le code généré — l'utiliser comme point de départ, pas comme vérité absolue
• Tests insuffisants : l'IA génère des tests qui passent mais ne testent pas forcément les cas importants — vérifier la couverture