Salta al contenuto principale

12 - Copilot Edits e Agent Mode

Editing multi-file e Agent Mode self-healing in Copilot: Plan Mode, Next Edit Suggestions, symbol-aware editing e confronto tra Edit Mode e Agent Mode.

Cosa ne pensi di questo articolo?

12 - Copilot Edits e Agent Mode
GitHub CopilotFoto:Mikhail NilovPexels

In Breve

Editing multi-file e Agent Mode self-healing in Copilot: Plan Mode, Next Edit Suggestions, symbol-aware editing e confronto tra Edit Mode e Agent Mode.

Copilot Edits e Agent Mode: Editing Multi-File e Sviluppo Autonomo nell'IDE

Fino ad ora abbiamo esplorato Copilot come assistente per suggerimenti inline e come agente autonomo che lavora su GitHub. Esiste però un territorio intermedio estremamente potente: Copilot Edits e Agent Mode, che portano le capacità di editing multi-file e di esecuzione autonoma direttamente nel tuo IDE. Invece di modificare un file alla volta, puoi descrivere un cambiamento che coinvolge più file e lasciare che Copilot coordini tutte le modifiche in modo coerente.

In questo articolo esploreremo in dettaglio le modalità di editing avanzato disponibili: Edit Mode per modifiche multi-file guidate, Agent Mode per esecuzione autonoma con self-healing, Plan Mode per pianificazione prima dell'azione, e Next Edit Suggestions (NES) per un flusso di editing predittivo e fluido.

Panoramica della Serie

#ArticoloFocus
1Foundation e MindsetSetup e mentalità
2Ideazione e RequisitiDa idea a MVP
3Architettura BackendAPI e database
4Struttura FrontendUI e componenti
5Prompt EngineeringPrompt e Agenti MCP
6Testing e QualitàUnit, integration, E2E
7DocumentazioneREADME, API docs, ADR
8Deploy e DevOpsDocker, CI/CD
9EvoluzioneScalabilità e manutenzione
10Coding AgentSviluppo autonomo
11Code Review AutomaticaReview AI-powered
12Sei qui → Edits e Agent ModeEditing multi-file
13GitHub SparkMicro-app AI-native
14Copilot SpacesContesto condiviso
15Modelli AIMulti-model e selezione
16PersonalizzazioneCustom instructions
17EnterpriseAdozione organizzativa
18EstensioniCopilot Extensions
19SicurezzaSecurity e compliance

Le Modalità di Editing di Copilot

Copilot offre diverse modalità di interazione nell'IDE, ciascuna progettata per un livello diverso di autonomia e complessità. Comprendere le differenze è fondamentale per scegliere la modalità giusta per ogni situazione.

Confronto delle Modalità di Editing

ModalitàAutonomiaScopeIDE SupportatiCaso d'Uso
Inline Suggestions Minima Riga/blocco corrente Tutti Completamento codice in tempo reale
Edit Mode Media File specificati VS Code, Visual Studio, JetBrains Modifiche coordinate su più file selezionati
Agent Mode Alta Intero progetto VS Code, Visual Studio, JetBrains Task autonomi con self-healing
Plan Mode Controllata Intero progetto VS Code, JetBrains, Eclipse, Xcode Pianificazione prima dell'esecuzione
Coding Agent Massima Repository completo GitHub (cloud) Task completamente autonomi (PR)

Copilot Edits: Editing Multi-File

Copilot Edits è la modalità che permette di descrivere un cambiamento in linguaggio naturale e applicarlo contemporaneamente a più file. A differenza dei suggerimenti inline che operano sul contesto immediato, Edits prende in considerazione la relazione tra i file selezionati e genera modifiche coerenti.

Workflow di Copilot Edits

  1. Seleziona i file: Aggiungi al contesto di Copilot i file che devono essere modificati
  2. Descrivi il cambiamento: Spiega in linguaggio naturale cosa vuoi ottenere
  3. Rivedi le modifiche: Copilot mostra un diff per ogni file con le modifiche proposte
  4. Itera: Se le modifiche non sono perfette, raffina la richiesta
  5. Applica: Accetta le modifiche che ritieni corrette, rifiuta le altre

Come Accedere a Copilot Edits

Attivazione nelle Diverse IDE

IDEShortcutMenuNote
VS Code Ctrl+Shift+I (Win/Linux) / Cmd+Shift+I (Mac) View > Copilot Edits Pannello dedicato nel sidebar
Visual Studio Ctrl+Shift+. Edit > Copilot Edits Integrato nel pannello Copilot Chat
JetBrains Ctrl+Shift+I Tools > Copilot > Edits IntelliJ IDEA, WebStorm, PyCharm, etc.

Esempio Pratico: Refactoring Multi-File

Immaginiamo di voler estrarre la logica di validazione da un controller in un middleware dedicato, aggiornando contemporaneamente il controller, le route e i test.

Stato iniziale - Controller con validazione inline
// File: src/controllers/user.controller.ts (PRIMA)
import {{ '{' }} Request, Response } from 'express';
import {{ '{' }} UserService } from '../services/user.service';

export class UserController {{ '{' }}
  constructor(private userService: UserService) {{ '{' }}}

  async createUser(req: Request, res: Response) {{ '{' }}
    // Validazione inline nel controller
    const {{ '{' }} email, name, password } = req.body;

    if (!email || !email.includes('@')) {{ '{' }}
      return res.status(400).json({{ '{' }} error: 'Invalid email' });
    }
    if (!name || name.length < 2) {{ '{' }}
      return res.status(400).json({{ '{' }} error: 'Name too short' });
    }
    if (!password || password.length < 8) {{ '{' }}
      return res.status(400).json({{ '{' }} error: 'Password too short' });
    }

    const user = await this.userService.create({{ '{' }} email, name, password });
    res.status(201).json(user);
  }

  async updateUser(req: Request, res: Response) {{ '{' }}
    const {{ '{' }} id } = req.params;
    const {{ '{' }} email, name } = req.body;

    if (email && !email.includes('@')) {{ '{' }}
      return res.status(400).json({{ '{' }} error: 'Invalid email' });
    }
    if (name && name.length < 2) {{ '{' }}
      return res.status(400).json({{ '{' }} error: 'Name too short' });
    }

    const user = await this.userService.update(id, {{ '{' }} email, name });
    res.json(user);
  }
}
Prompt per Copilot Edits
Estrai tutta la logica di validazione dal UserController in un
middleware dedicato. Crea:
1. Un file src/middleware/validation.middleware.ts con funzioni
   di validazione riutilizzabili usando class-validator
2. Un file src/dto/user.dto.ts con le classi DTO per CreateUser e UpdateUser
3. Aggiorna il controller per rimuovere la validazione inline
4. Aggiorna src/routes/user.routes.ts per usare il middleware di validazione
5. Aggiorna i test in tests/controllers/user.controller.test.ts

Copilot Edits analizza i 5 file e genera modifiche coordinate. Vediamo il risultato per ciascun file.

File generato - src/dto/user.dto.ts
// File: src/dto/user.dto.ts (GENERATO da Copilot Edits)
import {{ '{' }} IsEmail, IsString, MinLength, IsOptional } from 'class-validator';

export class CreateUserDto {{ '{' }}
  @IsEmail({{ '{' }}}, {{ '{' }} message: 'Invalid email format' })
  email: string;

  @IsString()
  @MinLength(2, {{ '{' }} message: 'Name must be at least 2 characters' })
  name: string;

  @IsString()
  @MinLength(8, {{ '{' }} message: 'Password must be at least 8 characters' })
  password: string;
}

export class UpdateUserDto {{ '{' }}
  @IsOptional()
  @IsEmail({{ '{' }}}, {{ '{' }} message: 'Invalid email format' })
  email?: string;

  @IsOptional()
  @IsString()
  @MinLength(2, {{ '{' }} message: 'Name must be at least 2 characters' })
  name?: string;
}
File generato - src/middleware/validation.middleware.ts
// File: src/middleware/validation.middleware.ts (GENERATO)
import {{ '{' }} Request, Response, NextFunction } from 'express';
import {{ '{' }} validate } from 'class-validator';
import {{ '{' }} plainToInstance } from 'class-transformer';

export function validateBody(dtoClass: any) {{ '{' }}
  return async (req: Request, res: Response, next: NextFunction) => {{ '{' }}
    const dtoInstance = plainToInstance(dtoClass, req.body);
    const errors = await validate(dtoInstance, {{ '{' }}
      whitelist: true,
      forbidNonWhitelisted: true
    });

    if (errors.length > 0) {{ '{' }}
      const messages = errors.flatMap(err =>
        Object.values(err.constraints || {{ '{' }}})
      );
      return res.status(400).json({{ '{' }}
        error: 'Validation failed',
        details: messages
      });
    }

    req.body = dtoInstance;
    next();
  };
}
File aggiornato - src/controllers/user.controller.ts
// File: src/controllers/user.controller.ts (DOPO - senza validazione)
import {{ '{' }} Request, Response } from 'express';
import {{ '{' }} UserService } from '../services/user.service';

export class UserController {{ '{' }}
  constructor(private userService: UserService) {{ '{' }}}

  async createUser(req: Request, res: Response) {{ '{' }}
    // La validazione è gestita dal middleware
    const {{ '{' }} email, name, password } = req.body;
    const user = await this.userService.create({{ '{' }} email, name, password });
    res.status(201).json(user);
  }

  async updateUser(req: Request, res: Response) {{ '{' }}
    const {{ '{' }} id } = req.params;
    const {{ '{' }} email, name } = req.body;
    const user = await this.userService.update(id, {{ '{' }} email, name });
    res.json(user);
  }
}

Edit Mode vs Agent Mode

La differenza fondamentale tra Edit Mode e Agent Mode sta nel livello di autonomia e nel tipo di azioni che Copilot può compiere.

Differenze Operative

AspettoEdit ModeAgent Mode
File di lavoro Solo i file esplicitamente selezionati Trova e modifica file autonomamente
Creazione file Non crea nuovi file Può creare nuovi file e cartelle
Esecuzione comandi Non esegue comandi terminal Può eseguire comandi (npm, build, test)
Auto-correzione Richiede feedback manuale Rileva errori e si auto-corregge
Contesto File selezionati + file aperti Intero workspace + terminal output
Conferma utente Richiesta per ogni modifica Richiesta solo per comandi terminal
Velocità Più veloce (meno contesto) Più lento (analisi approfondita)
Rischio Basso (scope limitato) Medio (più azioni autonome)

Agent Mode: Sviluppo Autonomo nell'IDE

Agent Mode è la modalità più avanzata di Copilot nell'IDE. A differenza di Edit Mode, l'agente può navigare il filesystem, creare file, eseguire comandi nel terminale e, soprattutto, auto-correggersi quando qualcosa va storto.

Self-Healing: Auto-Correzione Intelligente

La caratteristica più distintiva di Agent Mode è il self-healing. Quando l'agente genera codice che produce errori (compilazione, lint, test), analizza autonomamente il messaggio di errore e prova a correggere il problema, ripetendo il ciclo fino al successo o al raggiungimento del limite di iterazioni.

Ciclo di Self-Healing

  1. Generazione: L'agente scrive il codice in base alla richiesta
  2. Verifica: Esegue il build o i test per verificare la correttezza
  3. Analisi errore: Se c'è un errore, legge il messaggio di errore completo
  4. Diagnosi: Identifica la causa (tipo mancante, import errato, sintassi)
  5. Correzione: Applica il fix e torna al punto 2
  6. Successo o escalation: Se dopo N iterazioni non riesce, chiede aiuto all'utente

Tipi di Errori Gestiti

Errori che Agent Mode Gestisce Autonomamente

Tipo di ErroreEsempioStrategia di FixSuccess Rate
Errori di tipo TypeScript Property 'x' does not exist on type 'Y' Aggiunge la proprietà o corregge il tipo Alto (90%+)
Import mancanti Cannot find module '../services/user' Aggiunge l'import corretto o crea il file Alto (95%+)
Errori di sintassi Unexpected token, expected ';' Corregge la sintassi Alto (95%+)
Dipendenze mancanti Cannot find package 'lodash' Esegue npm install Alto (90%+)
Test falliti Expected 42 but received undefined Analizza il test e corregge l'implementazione Medio (60-70%)
Errori runtime TypeError: Cannot read property of undefined Aggiunge null check o corregge la logica Medio (50-70%)
Errori di configurazione Invalid configuration option 'x' Corregge il file di configurazione Medio (60-80%)
Errori logici complessi Risultato errato senza messaggio chiaro Potrebbe necessitare aiuto umano Basso (30-40%)

Come Abilitare e Configurare Agent Mode

Configurazione VS Code - settings.json
// .vscode/settings.json
{{ '{' }}
  // Abilita Agent Mode (abilitato di default nelle versioni recenti)
  "github.copilot.chat.agent.enabled": true,

  // Configura quali comandi l'agente può eseguire senza conferma
  "github.copilot.chat.agent.autoApprove": {{ '{' }}
    // Comandi che non richiedono conferma
    "allowedCommands": [
      "npm test",
      "npm run lint",
      "npm run build",
      "npx tsc --noEmit"
    ],
    // Comandi che richiedono sempre conferma
    "blockedCommands": [
      "rm",
      "git push",
      "npm publish",
      "docker"
    ]
  },

  // Limite di iterazioni per il self-healing
  "github.copilot.chat.agent.maxIterations": 5,

  // File e cartelle che l'agente non può modificare
  "github.copilot.chat.agent.protectedPaths": [
    ".env",
    ".env.*",
    "secrets/",
    "*.key",
    "*.pem"
  ]
}

Guardrail di Sicurezza

Agent Mode include guardrail progettati per prevenire azioni potenzialmente pericolose. È fondamentale configurarli correttamente, soprattutto in ambienti di produzione.

Protezioni Attive di Default

  • Conferma richiesta per ogni comando terminal
  • Non può accedere a file .env
  • Non può eseguire git push senza conferma
  • Non modifica file di configurazione del sistema
  • Limite di iterazioni per evitare loop infiniti
  • Non può installare dipendenze senza conferma

Protezioni Personalizzabili

  • Lista di comandi auto-approvati
  • Lista di comandi bloccati
  • Percorsi protetti (non modificabili)
  • Numero massimo di iterazioni
  • Timeout per singola operazione
  • Notifiche per operazioni sensibili

Plan Mode: Pianificazione Prima dell'Azione

Plan Mode è una modalità che aggiunge un passaggio di pianificazione prima dell'esecuzione. Invece di iniziare subito a modificare file, Copilot analizza la richiesta, pone domande chiarificatrici se necessario, e costruisce un piano di esecuzione dettagliato che puoi approvare, modificare o rifiutare prima che qualsiasi codice venga toccato.

Come Attivare il Plan Mode

Attivazione in Diversi IDE

IDEMetodoDettaglio
VS Code Shift+Tab nella chat di Copilot Alterna tra Agent Mode e Plan Mode
JetBrains Icona "Plan" nella toolbar di Copilot Chat Disponibile in tutte le IDE JetBrains
Eclipse Menu Copilot > Plan Mode Integrato nel pannello Copilot
Xcode Menu Copilot > Plan Mode Supporto nativo

Workflow del Plan Mode

  1. Richiesta: Descrivi il task in linguaggio naturale
  2. Analisi: Copilot analizza il codebase e identifica i file rilevanti
  3. Domande (opzionale): Se la richiesta è ambigua, pone domande chiarificatrici
  4. Piano: Genera un piano strutturato con:
    • File da creare, modificare o eliminare
    • Ordine delle operazioni
    • Dipendenze tra le modifiche
    • Comandi da eseguire
  5. Review: Tu esamini il piano e puoi modificarlo
  6. Esecuzione: Dopo approvazione, il piano viene eseguito step by step

Quando Usare il Plan Mode

Scenari Ideali per Plan Mode

ScenarioPerché Plan ModeAlternativa
Refactoring complesso Vuoi verificare che il piano tocchi tutti i file necessari Agent Mode potrebbe saltare file
Nuova feature multi-componente Vuoi validare l'architettura prima dell'implementazione Edit Mode richiederebbe troppo lavoro manuale
Migrazione di libreria Vuoi vedere l'elenco completo dei file impattati Agent Mode potrebbe dimenticare file
Task con requisiti ambigui Le domande chiarificatrici evitano lavoro inutile Agent Mode potrebbe assumere e sbagliare
Codice critico Vuoi il controllo totale su ogni modifica Nessuna: Plan Mode è la scelta migliore

Esempio Pratico: Plan Mode per Feature Complessa

Richiesta in Plan Mode
Aggiungi un sistema di notifiche in-app al progetto.
Requisiti:
- Modello Notification con titolo, messaggio, tipo, letto/non letto
- Service per CRUD notifiche
- Controller con endpoint REST
- Componente Angular con icona campanella e badge contatore
- WebSocket per aggiornamenti real-time
- Test per service e controller
Piano generato da Copilot
# Piano di Implementazione: Sistema Notifiche

## Domande Chiarificatrici
1. Vuoi persistere le notifiche su database o solo in memoria?
   -> Risposta: Database (PostgreSQL con Prisma)
2. Le notifiche devono essere per utente specifico o broadcast?
   -> Risposta: Per utente, con possibilità di broadcast
3. Quale libreria WebSocket preferisci?
   -> Risposta: Socket.io (gia presente nelle dipendenze)

## File da Creare (5)
1. src/models/notification.model.ts - Schema Prisma e tipi
2. src/services/notification.service.ts - Business logic
3. src/controllers/notification.controller.ts - Endpoint REST
4. src/gateways/notification.gateway.ts - WebSocket gateway
5. frontend/src/app/components/notification-bell/ - Componente Angular

## File da Modificare (4)
1. prisma/schema.prisma - Aggiungere modello Notification
2. src/routes/index.ts - Registrare route notifiche
3. src/app.ts - Registrare WebSocket gateway
4. frontend/src/app/app.component.ts - Aggiungere notification-bell

## Comandi da Eseguire (3)
1. npx prisma migrate dev --name add-notifications
2. npm test -- --testPathPattern=notification
3. npm run build

## Ordine di Esecuzione
Phase 1: Backend (modello, service, controller)
Phase 2: WebSocket (gateway, eventi)
Phase 3: Frontend (componente, integrazione)
Phase 4: Test e verifica

## Stima: ~45 minuti di esecuzione agent

Next Edit Suggestions (NES)

Next Edit Suggestions è una funzionalità che predice la sequenza di modifiche che probabilmente farai dopo un'operazione iniziale. Invece di suggerire solo il completamento della riga corrente, NES analizza il pattern della tua modifica e anticipa dove dovrai intervenire successivamente.

Come Funziona NES

Il meccanismo è intuitivo: fai una modifica in un punto del codice, e Copilot identifica automaticamente altri punti del file (o del progetto) che devono essere aggiornati di conseguenza. Un indicatore visuale appare nel gutter dell'editor, mostrando dove sono disponibili suggerimenti di modifica.

Interazione con NES

AzioneShortcutEffetto
Navigare al prossimo suggerimento Tab Il cursore si sposta al prossimo punto di modifica
Accettare il suggerimento Tab (quando sul suggerimento) La modifica viene applicata
Rifiutare il suggerimento Esc Il suggerimento scompare
Vedere tutti i suggerimenti Icone nel gutter dell'editor Indicatori visivi mostrano tutte le posizioni

Casi d'Uso di NES

Scenari in cui NES Eccelle

ScenarioModifica InizialeSuggerimenti NES
Rinomina variabile Rinomini userData in userProfile Suggerisce l'aggiornamento in tutti i punti dove la variabile è usata
Aggiunta parametro Aggiungi un parametro options a una funzione Suggerisce di aggiornare tutti i chiamanti e il JSDoc
Cambio tipo Cambi il tipo di ritorno da string a UserResponse Suggerisce aggiornamenti nei consumatori del valore
Aggiunta campo Aggiungi un campo avatar all'interfaccia User Suggerisce aggiornamenti nelle factory, test, mapping
Cambio pattern Converti un callback in async/await Suggerisce la conversione in tutti i pattern simili nel file
Aggiunta import Usi un nuovo tipo nel file Suggerisce l'import statement corretto

Esempio: Rinomina con NES

Supponiamo di rinominare una variabile data in userProfile in un file con 15 occorrenze. Senza NES, dovresti cercare e sostituire manualmente o usare il refactoring dell'IDE. Con NES, il processo diventa fluido.

Flusso di editing con NES
// Step 1: Rinomini la prima occorrenza
const userProfile = await fetchUserData(userId);
//    ^^^^^^^^^^^  modifica manuale

// Step 2: NES mostra indicatori nel gutter su tutte le altre occorrenze
// Linea 15: [NES] data.name  ->  userProfile.name
// Linea 23: [NES] data.email ->  userProfile.email
// Linea 31: [NES] return data; -> return userProfile;
// Linea 45: [NES] if (data) -> if (userProfile)

// Step 3: Premi Tab per navigare al primo suggerimento
// Step 4: Premi Tab per accettare
// Step 5: Ripeti fino a completare tutte le occorrenze

// Risultato: tutte le 15 occorrenze aggiornate con pochi Tab

Indicatori nel Gutter

NES utilizza indicatori visuai nel gutter dell'editor (la colonna a sinistra dei numeri di riga) per mostrare dove sono disponibili suggerimenti. In VS Code, gli indicatori includono anche syntax highlighting nel suggerimento per facilitare la review visiva della modifica proposta.

Vantaggi di NES

  • Editing 3-5x più veloce per modifiche ripetitive
  • Riduce errori di rinomina parziale
  • Funziona anche cross-file
  • Comprende il contesto semantico
  • Non richiede regex o find-replace
  • Predice anche modifiche non ovvie

Limitazioni di NES

  • Disponibile solo in VS Code (per ora)
  • Potrebbe suggerire modifiche non desiderate
  • Non sempre trova tutte le occorrenze
  • La qualità dipende dalla chiarezza del pattern
  • Non gestisce refactoring complessi
  • Richiede attenzione nella review dei suggerimenti

Editing Symbol-Aware

Per linguaggi come C++ e C#, Copilot ha integrato una comprensione a livello di compilatore che va oltre il semplice pattern matching testuale. L'editing symbol-aware analizza simboli, tipi e dipendenze tra file, permettendo operazioni di refactoring semanticamente corrette su scala progetto.

Come Funziona

A differenza dell'editing tradizionale basato su testo, l'editing symbol-aware utilizza le informazioni del Language Server Protocol (LSP) per comprendere:

  • Dichiarazioni: Dove un simbolo è definito
  • Riferimenti: Dove un simbolo è utilizzato
  • Tipi: Il tipo di ogni simbolo e le sue relazioni
  • Scope: La visibilità di ogni simbolo
  • Dipendenze: Quali file dipendono da un simbolo

Supporto Symbol-Aware per Linguaggio

LinguaggioIDELivello di SupportoOperazioni Supportate
C++ Visual Studio 2026 Completo Rinomina, cambio firma, estrai metodo, sposta tipo
C# Visual Studio 2026 Completo Rinomina, cambio firma, estrai interfaccia, genera implementazione
TypeScript VS Code Parziale (via LSP) Rinomina con NES, aggiornamento import
Java JetBrains Parziale Rinomina, aggiornamento riferimenti
Python VS Code / JetBrains Base Rinomina con suggerimenti contestuali

Esempio: Cambio Firma di Metodo in C#

Editing symbol-aware - Cambio firma metodo
// PRIMA: Metodo originale in UserService.cs
public async Task<User> GetUserById(int id)
{{ '{' }}
    return await _repository.FindAsync(id);
}

// MODIFICA: Aggiungi parametro 'includeOrders' alla firma
public async Task<User> GetUserById(int id, bool includeOrders = false)
{{ '{' }}
    var user = await _repository.FindAsync(id);
    if (includeOrders)
    {{ '{' }}
        user.Orders = await _orderRepository.FindByUserIdAsync(id);
    }
    return user;
}

// SYMBOL-AWARE: Copilot identifica TUTTI i 23 chiamanti nel progetto
// e suggerisce aggiornamenti per ciascuno:

// File: UserController.cs (linea 45)
// PRIMA:  var user = await _userService.GetUserById(id);
// DOPO:   var user = await _userService.GetUserById(id, false);

// File: OrderController.cs (linea 78)
// PRIMA:  var user = await _userService.GetUserById(userId);
// DOPO:   var user = await _userService.GetUserById(userId, true);

// File: UserServiceTests.cs (linea 112)
// PRIMA:  var result = await service.GetUserById(1);
// DOPO:   var result = await service.GetUserById(1, false);

// ... e cosi via per tutti i 23 riferimenti

Esempi Pratici Avanzati

Vediamo alcuni scenari reali in cui le diverse modalità di editing si combinano per risolvere problemi complessi.

Esempio 1: Aggiungere una Feature con Agent Mode

Prompt per Agent Mode - Aggiungere paginazione
Aggiungi paginazione a tutti gli endpoint che restituiscono liste.

Requisiti:
- Query params: page (default 1), limit (default 20, max 100)
- Risposta: {{ '{' }} data: T[], meta: {{ '{' }} page, limit, total, totalPages } }
- Endpoint coinvolti: GET /users, GET /orders, GET /products
- Aggiorna i test esistenti per verificare la paginazione
- Aggiorna la documentazione OpenAPI

Pattern da seguire: vedi src/utils/pagination.ts (se esiste) o crealo

Agent Mode analizza il codebase, trova i 3 endpoint, crea l'utility di paginazione, modifica i controller e i service, aggiorna i test e la documentazione. Se un test fallisce durante il processo, l'agente analizza l'errore e si auto-corregge.

Esempio 2: Usare Plan Mode per Migrazione

Prompt per Plan Mode - Migrazione libreria
Migra il progetto da Moment.js a Day.js.

Contesto:
- Moment.js e usato in 15 file
- Usiamo i plugin: timezone, relative-time, duration
- I test usano mock di Moment.js
- Il formato delle date in DB e ISO 8601

Requisiti:
- Sostituire tutti gli import di moment con dayjs
- Configurare i plugin equivalenti
- Aggiornare i format string se necessario
- Aggiornare tutti i test
- Rimuovere moment dalle dipendenze
- Verificare che il build compili senza errori
Piano generato da Plan Mode
# Piano di Migrazione: Moment.js -> Day.js

## Analisi Impatto
File impattati: 15
Test impattati: 8
Plugin da sostituire: 3

## Phase 1: Setup (5 min)
1. npm install dayjs
2. Creare src/utils/dayjs-config.ts con plugin

## Phase 2: Migrazione File (20 min)
File da modificare (ordine per dipendenze):
1. src/utils/date-helpers.ts (utility condiviso)
2. src/services/report.service.ts
3. src/services/scheduling.service.ts
4. src/controllers/report.controller.ts
... (altri 11 file)

## Phase 3: Test (10 min)
1. Aggiornare mock in tests/setup.ts
2. Aggiornare assertion nei test
3. Eseguire test suite completa

## Phase 4: Cleanup (5 min)
1. npm uninstall moment @types/moment
2. Verificare build
3. Verificare bundle size (atteso: -200KB)

## Rischi Identificati
- Il plugin timezone di Day.js ha API diversa
- Alcuni format string sono diversi
- I mock nei test potrebbero richiedere refactoring

Best Practice per le Modalità di Editing

Guida alla Scelta della Modalità

SituazioneModalità ConsigliataMotivazione
Completare una singola funzione Inline Suggestions Veloce, contesto immediato sufficiente
Modificare 2-3 file correlati Edit Mode Controllo sui file, modifica coordinata
Implementare una feature completa Agent Mode Crea file, esegue comandi, si auto-corregge
Refactoring critico con molti file Plan Mode Piano verificabile prima dell'esecuzione
Rinomina e aggiornamenti ripetitivi NES Predittivo, veloce, Tab per navigare
Cambio firma metodo in progetto grande Symbol-Aware + NES Comprensione semantica cross-file
Task non urgente, codebase sconosciuto Plan Mode + Agent Mode Prima pianifica, poi esegui con supervisione

Troubleshooting e Problemi Comuni

Le modalità di editing avanzato possono presentare problemi in determinate situazioni. Ecco come diagnosticare e risolvere i problemi più comuni.

Problemi Comuni e Soluzioni

ProblemaCausaSoluzione
Agent Mode non trova file rilevanti Struttura non convenzionale o file nascosti Specifica i percorsi dei file nel prompt
Self-healing loop infinito Errore strutturale che il fix non risolve Interrompi, correggi manualmente il problema base
Edit Mode modifica troppo Prompt troppo ampio Sii specifico su cosa modificare e cosa NON toccare
NES non appare Estensione non aggiornata o feature disabilitata Aggiorna l'estensione, verifica settings
Plan Mode genera piano incompleto Contesto insufficiente o progetto troppo grande Aggiungi più contesto o limita lo scope
Comandi terminal falliscono Environment non configurato o dipendenze mancanti Verifica che il progetto compili manualmente prima
Modifiche incoerenti tra file L'agente perde il contesto tra le modifiche Suddividi in task più piccoli o usa Plan Mode

Quando Fermare l'Agente

Segnali di Allarme

  • Più di 3 iterazioni sullo stesso errore
  • Le modifiche peggiorano il problema
  • L'agente modifica file non pertinenti
  • Il codice generato non ha senso logico
  • Vengono aggiunte dipendenze non necessarie
  • I test passano ma la logica è sbagliata

Azioni Correttive

  • Premi Ctrl+C per interrompere
  • Usa git diff per vedere tutti i cambiamenti
  • Fai git stash o git checkout per ripristinare
  • Riformula la richiesta con più contesto
  • Suddividi il task in sotto-task
  • Passa a Plan Mode per avere più controllo

Riepilogo e Prossimi Passi

Le modalità di editing avanzato di Copilot trasformano il modo in cui lavoriamo nel nostro IDE. Da suggerimenti inline a editing multi-file coordinato, da agente autonomo con self-healing a pianificazione prima dell'azione, ogni modalità ha il suo posto nel toolkit dello sviluppatore moderno.

Punti Chiave

  1. Edit Mode per modifiche coordinate su file specifici: tu scegli i file, Copilot genera le modifiche coerenti.
  2. Agent Mode per task autonomi con self-healing: l'agente esplora il progetto, esegue comandi e si auto-corregge.
  3. Plan Mode per controllo totale: pianifica prima, esegui dopo. Ideale per task complessi e codice critico.
  4. Next Edit Suggestions per editing fluido: Tab per navigare, Tab per accettare. Rinomina e aggiornamenti ripetitivi in pochi secondi.
  5. Symbol-Aware editing per refactoring semantico: comprensione a livello di compilatore per C++ e C# in Visual Studio.

Progresso della Serie

#ArticoloStato
1Foundation e MindsetCompletato
2Ideazione e RequisitiCompletato
3Architettura BackendCompletato
4Struttura FrontendCompletato
5Prompt EngineeringCompletato
6Testing e QualitàCompletato
7DocumentazioneCompletato
8Deploy e DevOpsCompletato
9EvoluzioneCompletato
10Coding AgentCompletato
11Code Review AutomaticaCompletato
12Copilot Edits e Agent ModeCompletato
13GitHub SparkProssimo
14Copilot SpacesIn arrivo
15Modelli AIIn arrivo
16PersonalizzazioneIn arrivo
17EnterpriseIn arrivo
18EstensioniIn arrivo
19SicurezzaIn arrivo

Nel prossimo articolo esploreremo GitHub Spark, la piattaforma per creare micro-applicazioni AI-native direttamente dal browser usando il linguaggio naturale, senza necessità di scrivere codice o configurare infrastruttura.

Prova Questi Strumenti

Strumenti gratuiti correlati a questo argomento.

Commenti

Caricamento commenti...

Accedi per commentare

Discuti questo articolo nella community

Unisciti al gruppo Telegram per discutere con altri sviluppatori, fare domande e condividere le tue esperienze.

Ti è piaciuto questo articolo?

Esplora altri contenuti sul blog o scopri i miei progetti