Visual Studio Live Share può farlo?

Pubblicato: 2022-03-10
Riassunto veloce ↬ Collaborare sui documenti d'ufficio è un problema risolto. Collaborare sul codice è ancora una cosa piuttosto difficile da fare. Questo perché condividere solo il codice non è sufficiente. Per collaborare davvero, uno sviluppatore deve essere in grado di condividere l'intero ambiente. VS Live Share è un nuovo servizio che ti consente di fare esattamente questo e potresti essere sorpreso di quanta condivisione puoi effettivamente fare.

Alcuni mesi fa, Microsoft ha rilasciato il suo servizio gratuito di Visual Studio (VS) Live Share. VS Live Share è una collaborazione a livello di Google Docs per il codice. Più sviluppatori possono collaborare allo stesso file contemporaneamente senza mai uscire dal proprio editor.

Dopo il rilascio di Live Share, mi sono reso conto che molti di noi si sono rassegnati a essere isolati nel nostro codice e non siamo nemmeno consapevoli che ci sono modi migliori per lavorare con un servizio come VS Live Share. Ciò è in parte dovuto al fatto che siamo bloccati nelle vecchie abitudini e in parte perché semplicemente non siamo consapevoli di ciò che tutto VS Live Share può fare. L'ultima parte con cui posso aiutarti!

In questo articolo, esamineremo le funzionalità e le migliori pratiche per VS Live Share che rendono la collaborazione degli sviluppatori facile come essere un "ippopotamo anonimo".

elenco di animali anonimi in Google Docs
Google Docs offre un modo interessante per gestire i partecipanti anonimi (Anteprima grande)

Condividi il tuo codice

Live Share viene fornito come estensione sia per Visual Studio che per Visual Studio Code (VS Code). In questo articolo, ci concentreremo su VS Code.

vs pagina readme dell'estensione della condivisione in tempo reale del codice
(Grande anteprima)

Puoi anche installarlo tramite VS Live Share Extension Pack, che include le seguenti estensioni, tutte di cui parleremo in questo articolo...

  • VS Live Share
  • VS Condivisione audio dal vivo
  • Estensione di Slack Chat
Altro dopo il salto! Continua a leggere sotto ↓

Una volta installata l'estensione, sarà necessario accedere al servizio VS Live Share. Puoi farlo aprendo la tavolozza dei comandi Ctrl/Cmd + Maiusc + P e seleziona "Accedi con il browser". Se non accedi e provi ad avviare una nuova sessione di condivisione, ti verrà chiesto di accedere in quel momento.

vs tavolozza dei comandi del codice che mostra l'opzione per accedere con il browser
Usa la tavolozza dei comandi VS Code per avviare una nuova sessione di Live Share (anteprima grande)

Esistono diversi modi per avviare una sessione VS Live Share. Puoi farlo dalla tavolozza dei comandi, puoi fare clic sul pulsante "Condividi" nella barra degli strumenti in basso, oppure puoi utilizzare la vista esploratore di VS Live Share nella barra laterale.

vs codice con caselle disegnate attorno alle diverse parti dell'interfaccia utente che possono essere utilizzate per avviare una sessione di condivisione live
Ci sono una miriade di modi per avviare una nuova sessione VS Live Share (anteprima grande)

Un link viene copiato negli appunti. È quindi possibile inviare quel collegamento ad altri e loro possono partecipare alla sessione di Live Share, a condizione che utilizzino anche VS Code. Quale, non lo siamo tutti?

Ora puoi collaborare proprio come se stessi lavorando su un normale vecchio documento Word:

L'altra persona non solo può vedere il tuo codice, ma può modificarlo, salvarlo, eseguirlo e persino eseguirne il debug. Per te, vengono visualizzati come un cursore con un nome su di esso. Ti presenti nel loro editor allo stesso modo.

Esplora VS Live Share

L'esploratore di VS Live Share si presenta come una nuova icona nella barra delle azioni, che è quella barra delle icone all'estrema destra del mio schermo (l'estrema sinistra della tua per il posizionamento predefinito della barra delle azioni). Questa è una sorta di "ground zero" per tutto VS Live Share. Da qui puoi avviare sessioni, terminarle, condividere terminali, server e vedere chi è connesso.

vs viewlet di condivisione dal vivo
VS Live Share Explorer è una vista preliminare di tutto ciò che riguarda Live Share (anteprima grande)

È una buona idea associare una scorciatoia da tastiera a questa vista di VS Live Share Explorer in modo da poter passare rapidamente da quella ai tuoi file. Puoi farlo premendo Ctrl/Cmd + K (o Ctrl/Cmd + S ) e quindi cercando "Mostra Live Share". Ho legato il mio a Ctrl/Cmd + L , che non sembra essere legato a nient'altro. Trovo che questa scorciatoia sia intuitiva ( L per Live Share) e facile da premere sulla tastiera.

la schermata di associazione della tastiera nel codice vs con un'associazione creata per il viewlet di condivisione live vs
È possibile creare un'associazione per il viewlet di VS Live Share Explorer (anteprima grande)

Condividi codice di sola lettura

Quando inizi una nuova sessione di condivisione, verrai avvisato in tal modo e ti verrà chiesto se desideri condividere il tuo spazio di lavoro in sola lettura. Se selezioni la sola lettura, le persone potranno vedere il tuo codice e seguire i tuoi movimenti, ma non potranno interagire.

rispetto alla notifica del codice che richiede all'utente di scegliere la condivisione di sola lettura
Le sessioni di condivisione sono di lettura e scrittura per impostazione predefinita, ma puoi renderle di sola lettura (anteprima grande)

Questa modalità è utile quando condividi con qualcuno di cui non ti fidi necessariamente, forse un fornitore, un partner o un ex estraneo.

È anche particolarmente utile per gli istruttori. Si noti che al momento della stesura di questo documento, VS Live Share è bloccato su 5 utenti simultanei. Dato che probabilmente vorrai di più in modalità di sola lettura, specialmente se stai insegnando a un gruppo, puoi aumentare il limite a 30 aggiungendo la seguente riga al tuo file Impostazioni utente: Ctrl/Cmd + , .

 "liveshare.features": "experimental"

Modifica il comportamento di unione predefinito

Chiunque abbia il collegamento può partecipare alla sessione di Live Share. Quando si uniscono, vedrai un pop-up che ti informa. Allo stesso modo, quando si disconnettono, ricevi una notifica. Questo è il comportamento predefinito per VS Live Share.

vs notifica del codice con il nome della persona che ha aderito alla sessione di condivisione live
VS Code ti avviserà ogni volta che qualcuno si unisce alla tua sessione (anteprima grande)

È una buona idea modificare questa impostazione in modo da dover approvare manualmente qualcuno prima che possa partecipare alla sessione. Questo per proteggerti nel caso in cui vai a pranzo e ti dimentichi di disconnettere la tua sessione. I tuoi colleghi non possono accedere nuovamente, modificare una lettera nella stringa di connessione al database e poi ridere mentre trascorri le prossime quattro ore cercando di capire come la tua vita sia andata così terribilmente storta.

Per abilitarlo, aggiungi la seguente riga al tuo file Impostazioni utente Ctrl/Cmd + , .

 "liveshare.guestApprovalRequired": true

Ora ti verrà chiesto quando qualcuno vuole unirsi. Se blocchi qualcuno, viene bloccato per la durata della sessione. Se provano a partecipare di nuovo, non verrai avvisato e verranno rifiutati senza tante cerimonie da VS Live Share.

Vai e goditi il ​​pranzo. Il tuo computer è al sicuro.

Concentrati sui follower

Per impostazione predefinita, chiunque si unisca alla tua sessione di Live Share ti "segue". Ciò significa che il loro editor caricherà qualsiasi file in cui ti trovi e scorrerà ogni volta che scorri. Anche se cambi file, i partecipanti vedranno esattamente quello che vedi tu.

Nel momento in cui una persona apporta modifiche a un file, non ti segue più. Quindi, se state lavorando entrambi su un file insieme e poi passate a un file diverso, non verranno automaticamente con voi. Ciò può creare molta confusione con te che parli del codice nel file in cui ti trovi mentre l'altra persona sta guardando qualcosa di completamente diverso.

Oltre a dirci dove ti trovi (che funziona, tra l'altro), c'è un pratico comando chiamato "Focus Participants" che si trova nella tavolozza dei comandi Ctrl/Cmd + Shift + P .

vs tavolozza dei comandi del codice che mostra il comando di messa a fuoco della condivisione live
Accedi al comando "focus" dalla tavolozza dei comandi di VS Code (anteprima grande)

Puoi anche accedervi come icona nella vista VS Live Share Explorer.

vs codice live share explorer focus icona
Invia una richiesta di follow facendo clic sull'icona di follow nel viewlet di VS Live Share Explorer (anteprima grande)

Questo concentrerà i tuoi partecipanti sulla prossima cosa su cui fai clic o scorri. Per impostazione predefinita, le richieste di attivazione di VS Live Share vengono accettate in modo implicito. Se non vuoi che le persone possano concentrarti su di te, puoi aggiungere la seguente riga al tuo file Impostazioni utente.

 "liveshare.focusBehavior": "prompt" 

Tieni inoltre presente che puoi seguire i partecipanti. Se fai clic sul loro nome nella vista VS Live Share Explorer, inizierai a seguirli.

Poiché il follow viene disattivato non appena l'altra persona inizia a modificare il codice, può essere difficile sapere esattamente quando le persone ti stanno seguendo e quando non lo sono. Un posto in cui puoi cercare è nella vista VS Live Share Explorer. Ti dirà il file in cui si trova una persona, ma non se ti sta seguendo o meno.

Una buona pratica è semplicemente ricordare che la messa a fuoco cambia sempre in modo che le persone possano vedere o meno ciò che vedi in un dato momento.

Debug come una squadra

I partecipanti possono condividere qualsiasi sessione di debug eseguita. Se avvii una sessione di debug, avranno la stessa identica esperienza che ottieni tu. Se si interrompe dalla tua parte, si interrompe dalla loro e ottengono la visualizzazione completa del debug in tutto il tuo codice.

Possono entrare, uscire, oltre, aggiungere orologi, valutare nella Console di debug; qualsiasi debug che puoi fare, lo possono fare anche loro e possono controllarlo.

Il debug può essere avviato anche dai partecipanti. Per impostazione predefinita, tuttavia, VS Code non consente l'avvio remoto del debugger. Per abilitarlo, aggiungi la seguente riga al tuo file Impostazioni utente Ctrl/Cmd + , :

 "liveshare.allowGuestDebugControl": true

Condividi il tuo terminale

Gran parte del lavoro che svolgiamo come sviluppatori non è nel nostro codice; è nel terminale. Alcuni giorni sembra che trascorro sul mio terminale tanto tempo quanto nel mio editor. Ciò significa che se hai un errore sul tuo terminale o devi digitare qualche comando, sarebbe bello se i tuoi partecipanti a VS Live Share potessero vedere il tuo terminale oltre al tuo codice.

VS Code ha un terminale integrato e puoi condividerlo con VS Live Share.

vs tavolozza dei comandi del codice con il terminale di condivisione selezionato
Accedi al comando "Condividi terminale" dalla tavolozza dei comandi di VS Code (anteprima grande)

Quando lo fai, hai l'opportunità di condividere il tuo terminale in sola lettura o in lettura-scrittura.

vs codice che richiede di condividere il terminale come di sola lettura o lettura-scrittura
Condividi sempre il tuo terminale in sola lettura a meno che tu non debba assolutamente condividerlo con accesso in scrittura (Anteprima grande)

Per impostazione predefinita, dovresti condividere il tuo terminale in sola lettura. Quando condividi il tuo terminale in lettura e scrittura, l'utente può eseguire comandi arbitrari direttamente sul tuo terminale. Lascia che affondi per un momento. È pesante.

Inutile dire che avere accesso in scrittura remota al terminale di qualcuno comporta molta fiducia e responsabilità. Dovresti condividere il tuo terminale in lettura e scrittura solo con persone di cui ti fidi implicitamente. Gli ex estraniati probabilmente sono fuori discussione.

La condivisione sicura del terminale in sola lettura consente alla persona all'altro capo della linea di vedere cosa stai digitando e l'output del terminale in tempo reale, ma impedisce loro di digitare qualsiasi cosa in quel terminale.

Se ti trovi in ​​uno scenario in cui sarebbe più veloce per l'altra persona arrivare al tuo terminale invece di provare a guidarti attraverso qualche comando stravagante con un sacco di flag, puoi condividere il tuo terminale in lettura e scrittura. In questa modalità, l'altra persona ha pieno accesso remoto al tuo terminale. Scegli i tuoi amici con saggezza.

Condividi il tuo host locale

Nel video sopra, il comando del terminale termina con un collegamento a un sito in esecuzione su https://localhost:8080. Con VS Live Share, puoi condividere quell'host locale in modo che l'altra persona possa accedervi proprio come se fosse il proprio host locale.

Se stai eseguendo una sessione di debug condivisa, quando il partecipante raggiunge l'URL di localhost alla fine, si interromperà per entrambi se viene raggiunto un punto di interruzione. Ancora meglio, puoi condividere qualsiasi processo TCP. Ciò significa che puoi condividere qualcosa come un database o una cache Redis. Ad esempio, potresti condividere il tuo server Mongo DB locale. Sul serio! Ciò significa che non dovrai più modificare i file di configurazione o provare a far funzionare un database condiviso. Condividi semplicemente la porta per la tua istanza database Mongo locale.

Condividi i file giusti nel modo giusto

A volte non vuoi che i collaboratori vedano determinati file. È probabile che nel progetto siano presenti chiavi e password private che non sono archiviate nel controllo del codice sorgente e non sono adatte alla visualizzazione pubblica. In questo caso, vorrai nascondere quei file a chiunque partecipi alla tua sessione di Live Share.

Per impostazione predefinita, VS Live Share nasconderà qualsiasi file specificato nel tuo .gitignore . Se c'è un file che vuoi nascondere, aggiungilo al tuo .gitignore . Nota, tuttavia, che questo nasconde solo il file nella vista del progetto. Se sei in una sessione di debug condivisa e entri in un file che si trova in .gitignore , è ancora caricato nell'editor e i tuoi collaboratori potranno vederlo.

Puoi ottenere un controllo più dettagliato sulla modalità di condivisione dei file creando un file .vsls.json .

Ad esempio, se vuoi assicurarti che tutti i file che si trovano in .gitignore non siano mai visibili, anche durante il debug, puoi impostare la proprietà gitignore su exclude .

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"exclude" }

Allo stesso modo, puoi mostrare tutto nel tuo .gitignore e controllare la visibilità del file direttamente dal file .vsls.json . Per fare ciò, imposta gitignore su none e quindi usa le proprietà excludeFiles e hideFiles . Ricorda: escludere significa mai visibile e nascondere significa "non visibile in Esplora file".

 { "$schema": "https://json.schemastore.org/vsls", "gitignore":"none", "excludeFiles":[ "*.env" ], "hideFiles": [ "dist" ] }

Condivisione ed estensioni

Parte dell'attrattiva di VS Code per molti sviluppatori è l'enorme mercato delle estensioni. La maggior parte delle persone ne avrà più di alcuni installati. È importante capire come funzioneranno o meno le estensioni nel contesto di VS Live Share.

VS Live Share sincronizzerà tutto ciò che è specifico per il contesto del progetto che stai condividendo. Ad esempio, se hai installato l'estensione Vetur perché stai lavorando con un progetto Vue, verrà condivisa con tutti i partecipanti, indipendentemente dal fatto che anche loro l'abbiano installata o meno. Lo stesso vale per altre cose specifiche del contesto, come linter, formattatori, debugger e servizi linguistici.

VS Live Share non sincronizza le estensioni specifiche dell'utente. Queste sarebbero cose come temi, icone, associazioni di tastiera e così via. Come regola generale, VS Live Share condivide il tuo contesto, non il tuo schermo. Puoi consultare l'articolo della documentazione ufficiale su questo argomento per una spiegazione più approfondita di quali estensioni puoi aspettarti di essere condivise.

Comunica mentre collabori

Una delle prime cose che le persone fanno durante l'esperienza inaugurale di VS Live Share è provare a comunicare digitando i commenti del codice. Questa sembra la cosa da scrivere (capito?), ma non proprio come VS Live Share è stato progettato per essere utilizzato.

VS Live Share non ha lo scopo di sostituire il tuo client di chat preferito. Probabilmente hai già un meccanismo di chat preferito e VS Live Share presume che continuerai a usarlo.

Se stai già utilizzando Slack, esiste un'estensione VS Code chiamata Slack Chat. Questa estensione è ancora un po' all'inizio del suo sviluppo, ma sembra piuttosto promettente. Mette VS Code in modalità divisa e incorpora Slack sul lato destro. Ancora meglio, puoi avviare una sessione di Live Share direttamente dalla chat di Slack.

vs estensione della chat code slack
L'estensione Slack Chat inserisce Slack all'interno del tuo editor (anteprima grande)

Un altro strumento che sembra piuttosto interessante si chiama CodeStream.

CodeStream

Mentre VS Live Share cerca di migliorare la collaborazione dall'editor, CodeStream mira a risolvere lo stesso problema dal punto di vista della chat.

L'estensione CodeStream ti consente di chattare direttamente all'interno di VS Code e quelle chat diventano parte della cronologia del tuo codice. Puoi evidenziare un pezzo di codice da discutere e va direttamente nella chat in modo che ci sia un contesto per i tuoi commenti. Questi commenti vengono quindi salvati come parte del repository Git. Vengono anche visualizzati nel tuo codice come piccole icone di commento e questi commenti verranno visualizzati indipendentemente dal ramo in cui ti trovi.

Quando si tratta di VS Live Share, CodeStream offre un set gratuito di funzionalità. Puoi avviare nuove sessioni direttamente dal riquadro della chat, nonché facendo clic su un avatar. Le nuove sessioni creano automaticamente un canale di chat corrispondente che puoi mantenere con il codice o eliminare quando hai finito.

Se chattare non è abbastanza per portare a termine il lavoro e devi collaborare come se fosse il 1999, l'aiuto è solo una telefonata.

VS Condivisione audio dal vivo

Sebbene VS Live Share non stia cercando di reinventare la chat, reinventa il tuo telefono. Tipo.

Con l'estensione VS Live Share Audio, puoi chiamare qualcuno direttamente e fare chat vocale da VS Code.

vs tavolozza dei comandi del codice che mostra l'opzione di avvio della chiamata audio
Effettua chiamate audio da VS Code utilizzando l'estensione VS Live Share Audio (anteprima grande)

L'altra persona riceverà quindi una richiesta per partecipare alla chiamata.

vs notifica del codice che chiede se desideri partecipare alla chiamata audio
VS Code ti chiederà se desideri partecipare a una chiamata audio in corso (anteprima grande)

Vedrai l'icona di un altoparlante nella barra di stato inferiore quando sei connesso a una chiamata. Puoi fare clic su quell'altoparlante per cambiare il tuo dispositivo audio, disattivare l'audio o disconnetterti dalla chiamata.

rispetto alle opzioni del codice che mostrano opzioni come muto e disconnessione per l'estensione audio condivisa dal vivo
Hai il pieno controllo delle impostazioni audio durante una chiamata VS Live Share Audio (anteprima grande)

L'ultimo consiglio che ti darò è probabilmente il più importante e non è una funzionalità di fantasia o un'impostazione oscura che non sapevi esistesse.

Cambia la tua memoria muscolare

Abbiamo anni di comportamento appreso quando si tratta di ottenere aiuto o condividere il nostro codice. Lo stato degli strumenti di collaborazione per gli sviluppatori è stato così grave per così tanto tempo che siamo condizionati a incollare codice in Slack, avviare chiamate Skype imbarazzanti che consistono principalmente in "dimmi quando puoi vedere il mio schermo" o accalcarci attorno a un monitor e puntare eccessivamente, ad es. in stile foto d'archivio.

un gruppo di persone che indica lo schermo di un computer
(Grande anteprima)

La cosa più importante che puoi fare per ottenere il massimo da VS Live Share è utilizzare effettivamente VS Live Share. E dovrà essere uno sforzo “cosciente”.

Il tuo cervello è bravo con i modelli. Riconosci e classifichi costantemente il mondo intorno a te in base a schemi che hai identificato, e sei così bravo in questo che non ti rendi nemmeno conto che lo stai facendo. Quindi sviluppi risposte predefinite a questi modelli. Tu formi gli istinti. Questo è il motivo per cui utilizzerai per impostazione predefinita i vecchi metodi di collaborazione senza nemmeno pensare a cosa stai facendo. Prima che tu te ne accorga, sarai impegnato in una chiamata Skype con qualcuno che condivide il tuo schermo, anche se hai installato Live Share.

Ho scritto molto su VS Code e di tanto in tanto le persone mi chiederanno come possono diventare più produttivi con il loro editor. Dico sempre la stessa cosa: la prossima volta che prendi il mouse per fare qualcosa, fermati. Puoi invece fare qualcosa con la tastiera? Probabilmente puoi. Cerca la scorciatoia e poi fatti usare. All'inizio sarà più lento, ma se sei disposto ad adottare deliberatamente un comportamento diverso, rimarrai stupito dalla velocità con cui il tuo cervello passerà al modo più produttivo di fare qualcosa.

Lo stesso vale per Live Share. Sarai impegnato in una chiamata per condividere lo schermo quando ti viene in mente che potresti utilizzare Live Share. In quel momento, fermati; fai clic sul pulsante "Condividi" nella parte inferiore di VS Code.

Sì, la persona dall'altra parte potrebbe non avere l'estensione installata. Sì, potrebbe volerci un momento per configurarlo. Ma se ora lavori per stabilire questo comportamento, la prossima volta che lo farai, "funzionerà e basta" e non passerà molto tempo prima che tu non debba nemmeno pensarci, e a quel punto, avrà finalmente raggiunto quel livello di collaborazione da "Ippopotamo anonimo".

Più risorse

  • Pacchetto Estensione Condivisione Live VS
  • VS Code Live Share Docs
  • Estensioni e supporto dell'ecosistema
  • Guida introduttiva a VS Live Share