MR Visualizer

Rivedi le Merge Request di GitLab direttamente in VS Code, con la stessa vista della tab Changes di GitLab: a sinistra il codice prima del merge, a destra il codice nuovo, con le differenze evidenziate.

Puoi scorrere tutti i file modificati uno sotto l'altro oppure guardarli uno alla volta, passando da un file all'altro con le frecce in alto.

Funzionalità

• MR del branch corrente in un clic: l'estensione trova da sola la Merge Request aperta sul branch su cui stai lavorando e ne mostra tutte le modifiche.
• A che punto sei, anche senza MR: se sul branch non ci sono MR aperte compare l'avviso "Nessuna MR aperta su questo branch" e il pannello mostra comunque le modifiche del branch rispetto a main, comprese quelle non ancora committate e i file nuovi. Lo stesso succede se il progetto non è su GitLab.
• Annulla una modifica dal visualizzatore: l'icona ↶ sul lato delle aggiunte, all'inizio della prima riga di ogni blocco, annulla quel blocco; quella nell'intestazione annulla tutte le modifiche al file. Ogni volta viene chiesta una conferma.
• Titolo e descrizione della MR: nella colonna di sinistra, sotto l'elenco dei file, il riquadro Merge Request permette di modificarli e salvarli su GitLab. Il pulsante ✨ (magic) suggerisce il testo a partire dalle modifiche.
• Vista affiancata: a sinistra il codice pre-merge, a destra il nuovo, con le righe e le parole modificate evidenziate. Se preferisci, c'è anche la vista Inline in un'unica colonna.
• Due modi di navigare:
  • Tutti i file: i diff uno sotto l'altro, come su GitLab. Ogni file si può chiudere e riaprire, e ci sono i pulsanti Collapse all / Expand all.
  • Un file: un file alla volta, con le frecce ‹ › in alto, il contatore (es. 3 / 12) e un menu per saltare a un file qualsiasi.
• Conferma dei file revisionati: ogni file ha una checkbox Confermato, presente sia nel pannello sia nell'albero laterale. In cima alla MR un riepilogo mostra quanti file hai confermato e quali mancano. Le conferme restano salvate anche se chiudi VS Code, e decadono da sole se il file cambia con un nuovo push, come il "Viewed" di GitLab.
• Albero dei file modificati nella barra laterale, con lo stato di ogni file (A aggiunto, M modificato, D eliminato, R rinominato) e le righe +/−. Clicca un file per andare al suo diff.
• Intestazione della MR: numero (!42, che apre la MR su GitLab), titolo, autore ed eventuale stato Draft.
• Scorciatoie da ogni file: Open file apre il file nell'editor, Compare in editor lo apre nel diff editor nativo di VS Code.
• Segue il tema di VS Code (chiaro, scuro, alto contrasto).
• Veloce anche su MR grandi: i diff si caricano solo quando li raggiungi e i file molto grandi partono chiusi.

Lingua

L'estensione usa la stessa lingua di VS Code, che di default è quella del tuo sistema. Al momento è disponibile in italiano e inglese; per qualsiasi altra lingua si usa l'inglese.

Per averla in italiano VS Code deve essere in italiano, cioè deve essere installato il Language Pack italiano (Italian Language Pack for Visual Studio Code). Di solito VS Code lo propone da solo al primo avvio su un PC in italiano. Se è in inglese, puoi cambiare lingua così:

1. Ctrl+Shift+P → Configure Display Language;
2. scegli Italiano (se manca, installa il language pack dall'elenco);
3. riavvia VS Code.

Requisiti

• VS Code 1.90 o successivo.
• Git installato, con l'integrazione Git di VS Code attiva (lo è di default).
• Il progetto aperto deve essere un repository git clonato da GitLab (gitlab.com o un GitLab aziendale).
• Per i progetti privati serve un Personal Access Token di GitLab con scope read_api (vedi sotto).

Installazione

Dal Visual Studio Marketplace:

• Da VS Code: apri la vista Estensioni (Ctrl+Shift+X), cerca MR Visualizer e clicca Install.
• Da Quick Open (Ctrl+P): incolla ext install devastuxx.mr-visualizer e premi Invio.
• Da terminale: code --install-extension devastuxx.mr-visualizer.

Dopo l'installazione compare l'icona MR Visualizer nella barra delle attività (a sinistra).

Senza accesso al Marketplace (per esempio in reti aziendali chiuse) puoi installare il file mr-visualizer-<versione>.vsix: nella vista Estensioni clicca sui … in alto a destra, scegli Install from VSIX… e seleziona il file.

Primo utilizzo

1. Apri in VS Code il progetto e fai il checkout del branch della MR, per esempio feature/login.

2. Clicca l'icona MR Visualizer nella barra delle attività. L'estensione cerca subito la MR aperta su quel branch.

3. Alla prima richiesta a GitLab ti viene chiesto un access token:

   • su GitLab apri le impostazioni del tuo profilo (Edit profile → Access tokens) e clicca Add new token;
   • seleziona lo scope read_api per la sola lettura, oppure api se vuoi anche modificare titolo e descrizione delle MR;
   • crea il token;
   • incollalo nella casella che VS Code ti mostra.

   Il token viene salvato nel portachiavi sicuro di VS Code (SecretStorage) e non ti viene più chiesto.

4. Se la MR esiste, si apre il pannello con tutte le modifiche e l'albero dei file si popola. Se non esiste, vedi l'avviso "Nessuna MR aperta su questo branch" e il pannello mostra le modifiche del branch (vedi sotto).

Puoi rilanciare la ricerca in qualsiasi momento con MR Visualizer: Open Merge Request of Current Branch dalla Command Palette (Ctrl+Shift+P) o con l'icona in cima all'albero.

Navigazione nel pannello

Senza MR: le modifiche del branch

Quando il branch non ha una MR aperta, l'estensione mostra le modifiche fatte dal punto in cui il branch si è separato dal branch di destinazione. Il branch di destinazione è main, configurabile con mrVisualizer.defaultTargetBranch, e se esiste si usa la sua versione remota (origin/main). Le modifiche includono:

• i commit del branch;
• le modifiche non committate;
• i file nuovi non ancora aggiunti a git (esclusi quelli in .gitignore).

L'area di staging (git add) non viene toccata. In alto compare Nessuna merge request. Dopo aver modificato i file premi Refresh per aggiornare la vista.

Puoi aprire questa vista anche se la MR esiste, con MR Visualizer: Show Changes of Current Branch o l'icona del branch in cima all'albero.

Annullare una modifica (revert)

• ↶ su un blocco, sul lato delle aggiunte (colonna di destra in vista affiancata), all'inizio della prima riga del blocco: annulla solo quel blocco. Gli altri blocchi, anche se vicini, restano come sono.
• ↶ nell'intestazione del file: annulla tutte le modifiche a quel file. Un file aggiunto viene eliminato, uno eliminato viene ripristinato.

Il revert modifica il file nella tua working copy, dopo una conferma:

• Senza MR: la vista si aggiorna subito.
• Con una MR: la modifica comparirà dopo commit e push. Serve aver fatto il checkout del branch della MR.

Se il file è cambiato rispetto a quanto mostrato, il revert non tocca nulla e chiede di aggiornare la vista. Non è disponibile per i file binari.

Titolo e descrizione della MR

Il riquadro Merge Request nella colonna di sinistra, sotto l'elenco dei file, mostra titolo e descrizione della MR aperta:

1. modificali;
2. premi Salva (oppure Annulla modifiche per tornare ai valori salvati).

Suggerimento automatico (✨ magic)

Accanto a Titolo e a Descrizione c'è il pulsante ✨, che propone il testo partendo da commit, file modificati e diff della MR:

• Con un modello linguistico in VS Code (per esempio GitHub Copilot) il testo viene scritto dal modello. La prima volta VS Code chiede il permesso di usarlo.
• Senza un modello, o se il modello non risponde, il titolo viene dal commit (se è uno solo) o dal nome del branch, e la descrizione elenca commit e file.
• Lingua: quella di VS Code, oppure quella già usata in titolo, descrizione e commit.
• Prefisso Draft:: se il titolo lo ha, viene mantenuto, così la MR resta in bozza.

Il suggerimento riempie solo il campo: rivedilo, correggilo e poi premi Salva. Annulla modifiche torna al testo salvato.

Salvataggio

Servono un token con scope api e i permessi per modificare la MR. Se il token salvato è read_api, al primo salvataggio te ne viene chiesto uno nuovo. Se nel frattempo qualcuno ha modificato la MR su GitLab, ti viene chiesto se sovrascriverla. Quello che scrivi resta conservato anche se nascondi il riquadro.

Confronto manuale tra branch

Non serve una MR per usare la vista: MR Visualizer: Compare Branches… ti fa scegliere un branch sorgente e uno di destinazione e mostra le differenze come le mostrerebbe GitLab.

Il confronto parte dal punto in cui i due branch si sono separati (merge-base), quindi i commit arrivati nel frattempo sul branch di destinazione non compaiono come modifiche. Con l'icona Swap puoi invertire sorgente e destinazione.

Comandi

Tutti i comandi sono nella Command Palette sotto la categoria MR Visualizer. Con VS Code in italiano compaiono tradotti (es. Apri la Merge Request del branch corrente, Confronta branch…).

Impostazioni

Dalle Impostazioni di VS Code (Ctrl+,), cercando "MR Visualizer":

Problemi comuni

"Target branch … not found" Il branch di destinazione per la vista senza MR non esiste né in remoto né in locale (es. il progetto usa master o develop). Imposta mrVisualizer.defaultTargetBranch.

Il revert dice che la working copy non corrisponde Il file è cambiato dopo che la vista è stata caricata, oppure, con una MR, la tua copia locale non è allineata alla MR. Premi Refresh (e, con una MR, fai git pull) e riprova.

"Nessuna MR aperta su questo branch" ma la MR esiste

• Controlla di essere sul branch giusto: deve essere il source branch della MR.
• La MR deve essere aperta: le MR chiuse o già mergiate non vengono mostrate.
• Le MR aperte da un fork vivono sul progetto originale: apri il repository con il remote del progetto di destinazione.

Ti viene chiesto il token anche se l'hai già inserito Il token è scaduto, è stato revocato oppure non ha lo scope necessario: read_api per leggere, api per modificare titolo e descrizione. Creane uno nuovo e inseriscilo, oppure usa Set GitLab Access Token.

"Remote … is not a GitLab project URL" o GitLab non raggiungibile L'estensione usa il remote del branch corrente (o origin) per capire su quale GitLab cercare. Se il tuo GitLab ha un indirizzo web diverso da quello SSH, ad esempio il remote è git@ssh.gitlab.azienda.it:team/progetto.git ma il sito è https://gitlab.azienda.it, oppure se GitLab è installato sotto un sotto-percorso, imposta mrVisualizer.gitlabUrl.

"The commits of !N are not available locally" L'estensione prova da sola un git fetch. Se non basta, esegui git fetch a mano e premi Refresh.

Il diff mostra "Binary file not shown" o "No content changes" Il primo è un file binario (immagini, archivi…). Il secondo è un file solo rinominato o di cui sono cambiati solo i permessi.

Supporto

Per problemi, domande o suggerimenti scrivi a dev@test.test.

Privacy

• L'estensione contatta solo l'istanza GitLab del tuo repository: per leggere le MR e, solo quando premi Salva, per aggiornarne titolo e descrizione (API v4).
• Il token resta nel portachiavi sicuro di VS Code e viene inviato solo a quell'istanza.
• Solo quando premi ✨: commit, elenco dei file e diff della MR (fino a circa 24.000 caratteri) vengono inviati al modello linguistico configurato in VS Code (per esempio GitHub Copilot), secondo le condizioni di quel servizio. Senza un modello non viene inviato nulla.
• Il codice e i diff vengono letti dal repository git locale: a parte il caso ✨ qui sopra, niente viene caricato altrove.