Visual Studio Live Share peut faire cela ?

Il y a quelques mois, Microsoft a lancé son service gratuit Visual Studio (VS) Live Share. VS Live Share est une collaboration au niveau de Google Docs pour le code. Plusieurs développeurs peuvent collaborer sur le même fichier en même temps sans jamais quitter leur propre éditeur.

Après la sortie de Live Share, j'ai réalisé que beaucoup d'entre nous se sont résignés à être isolés dans notre code et nous ne sommes même pas conscients qu'il existe de meilleures façons de travailler avec un service comme VS Live Share. C'est en partie parce que nous sommes coincés dans de vieilles habitudes et en partie parce que nous ne savons tout simplement pas ce que tout VS Live Share peut faire. Cette dernière partie, je peux vous aider !

Dans cet article, nous passerons en revue les fonctionnalités et les meilleures pratiques de VS Live Share qui rendent la collaboration des développeurs aussi simple que d'être un «hippopotame anonyme».

Partagez votre code

Live Share est une extension pour Visual Studio et Visual Studio Code (VS Code). Dans cet article, nous allons nous concentrer sur VS Code.

Vous pouvez également l'installer via le pack d'extension VS Live Share, qui comprend les extensions suivantes, que nous allons toutes couvrir dans cet article…

• VS Partage en direct
• VS Partage audio en direct
• Extension Slack Chat
  

Une fois l'extension installée, vous devrez vous connecter au service VS Live Share. Vous pouvez le faire en ouvrant la palette de commandes Ctrl/Cmd + Maj + P et sélectionnez "Se connecter avec le navigateur". Si vous ne vous connectez pas et que vous essayez de démarrer une nouvelle session de partage, vous serez invité à vous connecter à ce moment-là.

Il existe plusieurs façons de lancer une session VS Live Share. Vous pouvez le faire à partir de la palette de commandes, vous pouvez cliquer sur le bouton "Partager" dans la barre d'outils inférieure ou vous pouvez utiliser la vue de l'explorateur VS Live Share dans la barre latérale.

Un lien est copié dans votre presse-papiers. Vous pouvez ensuite envoyer ce lien à d'autres personnes et elles peuvent rejoindre votre session Live Share, à condition qu'elles utilisent également VS Code. Lequel, ne sommes-nous pas tous ?

Vous pouvez désormais collaborer comme si vous travailliez sur un ancien document Word standard :

L'autre personne peut non seulement voir votre code, mais aussi le modifier, l'enregistrer, l'exécuter et même le déboguer. Pour vous, ils apparaissent sous la forme d'un curseur avec un nom dessus. Vous vous présentez dans leur éditeur de la même manière.

L'explorateur VS Live Share

L'explorateur VS Live Share apparaît sous la forme d'une nouvelle icône dans la barre d'action - qui est cette barre d'icônes à l'extrême droite de mon écran (l'extrême gauche de la vôtre pour le placement par défaut de la barre d'action). C'est une sorte de "ground zero" pour tout VS Live Share. À partir de là, vous pouvez démarrer des sessions, les terminer, partager des terminaux, des serveurs et voir qui est connecté.

C'est une bonne idée de lier un raccourci clavier à cette vue VS Live Share Explorer afin que vous puissiez basculer rapidement entre cela et vos fichiers. Vous pouvez le faire en appuyant sur Ctrl/Cmd + K (ou Ctrl/Cmd + S ) puis en recherchant « Show Live Share ». J'ai lié le mien à Ctrl/Cmd + L , qui ne semble lié à rien d'autre. Je trouve ce raccourci intuitif ( L pour Live Share) et facile à taper sur le clavier.

Partager le code en lecture seule

Lorsque vous démarrez une nouvelle session de partage, vous en êtes averti et vous êtes invité à partager votre espace de travail en lecture seule. Si vous sélectionnez la lecture seule, les personnes pourront voir votre code et suivre vos mouvements, mais elles ne pourront pas interagir.

Ce mode est utile lorsque vous partagez avec quelqu'un en qui vous n'avez pas nécessairement confiance - peut-être un fournisseur, un partenaire ou un ex éloigné.

C'est aussi particulièrement utile pour les instructeurs. Notez qu'au moment d'écrire ces lignes, VS Live Share est verrouillé sur 5 utilisateurs simultanés. Puisque vous allez probablement vouloir plus que cela en mode lecture seule, surtout si vous enseignez à un groupe, vous pouvez augmenter la limite à 30 en ajoutant la ligne suivante à votre fichier de paramètres utilisateur : Ctrl/Cmd + , .

 "liveshare.features": "experimental"

Modifier le comportement de jointure par défaut

Toute personne disposant du lien peut rejoindre votre session Live Share. Lorsqu'ils s'inscriront, vous verrez une fenêtre contextuelle vous en informer. De même, lorsqu'ils se déconnectent, vous êtes averti. Il s'agit du comportement par défaut pour VS Live Share.

C'est une bonne idée de changer cela afin que vous deviez approuver manuellement quelqu'un avant qu'il ne puisse rejoindre votre session. Ceci afin de vous protéger dans le cas où vous allez déjeuner et oubliez de déconnecter votre session. Vos collègues ne peuvent pas se reconnecter, modifier une lettre dans la chaîne de connexion de votre base de données, puis rire pendant que vous passez les quatre heures suivantes à essayer de comprendre comment votre vie a si horriblement mal tourné.

Pour activer cela, ajoutez la ligne suivante à votre fichier de paramètres utilisateur Ctrl/Cmd + , .

 "liveshare.guestApprovalRequired": true

Maintenant, vous serez averti lorsque quelqu'un voudra se joindre. Si vous bloquez quelqu'un, il est bloqué pour la durée de la session. S'ils essaient de se joindre à nouveau, vous ne serez pas averti et ils seront rejetés sans ménagement par VS Live Share.

Allez profiter de votre déjeuner. Votre ordinateur est en sécurité.

Concentrez-vous sur les abonnés

Par défaut, toute personne qui rejoint votre session Live Share vous « suit ». Cela signifie que leur éditeur chargera le fichier dans lequel vous vous trouvez et fera défiler chaque fois que vous faites défiler. Même si vous changez de fichier, les participants verront exactement ce que vous voyez.

Dès qu'une personne apporte des modifications à un fichier, elle ne vous suit plus. Donc, si vous travaillez tous les deux sur un fichier ensemble, puis que vous accédez à un autre fichier, ils ne vous accompagneront pas automatiquement. Cela peut entraîner beaucoup de confusion lorsque vous parlez de code dans le fichier dans lequel vous vous trouvez tandis que l'autre personne regarde quelque chose de complètement différent.

En plus de se dire où vous êtes (ce qui fonctionne, btw), il existe une commande pratique appelée "Focus Participants" qui se trouve dans la palette de commandes Ctrl/Cmd + Shift + P .

Vous pouvez également y accéder sous forme d'icône dans la vue VS Live Share Explorer.

Cela concentrera vos participants sur la prochaine chose sur laquelle vous cliquerez ou sur laquelle vous défilerez. Par défaut, les demandes de focus VS Live Share sont acceptées implicitement. Si vous ne voulez pas que les gens puissent se concentrer sur vous, vous pouvez ajouter la ligne suivante à votre fichier de paramètres utilisateur.

 "liveshare.focusBehavior": "prompt" 

Notez également que vous pouvez suivre les participants. Si vous cliquez sur leur nom dans la vue VS Live Share Explorer, vous commencerez à les suivre.

Étant donné que le suivi est désactivé dès que l'autre personne commence à modifier le code, il peut être difficile de savoir exactement quand les gens vous suivent et quand ils ne le font pas. Un endroit où vous pouvez regarder est dans la vue VS Live Share Explorer. Il vous dira dans quel fichier se trouve une personne, mais pas si elle vous suit ou non.

Une bonne pratique consiste simplement à se rappeler que la focalisation change constamment, de sorte que les gens peuvent ou non voir ce que vous voyez à un moment donné.

Déboguer en équipe

Les participants peuvent partager toutes les sessions de débogage que vous exécutez. Si vous démarrez une session de débogage, ils obtiendront exactement la même expérience que vous. Si ça casse de votre côté, ça casse de leur côté, et ils obtiennent la vue de débogage complète dans tout votre code.

Ils peuvent intervenir, sortir, ajouter des surveillances, évaluer dans la console de débogage ; tout débogage que vous pouvez faire, ils peuvent le faire aussi, et ils peuvent le contrôler.

Le débogage peut également être lancé par les participants. Par défaut, cependant, VS Code ne permet pas à votre débogueur d'être démarré à distance. Pour l'activer, ajoutez la ligne suivante à votre fichier de paramètres utilisateur Ctrl/Cmd + , :

 "liveshare.allowGuestDebugControl": true

Partagez votre terminal

Une grande partie du travail que nous faisons en tant que développeurs n'est pas dans notre code ; c'est dans le terminal. Certains jours, j'ai l'impression de passer autant de temps sur mon terminal que sur mon éditeur. Cela signifie que si vous avez une erreur sur votre terminal ou si vous devez taper une commande, ce serait bien si vos participants à VS Live Share pouvaient voir votre terminal en plus de votre code.

VS Code a un terminal intégré, et vous pouvez le partager avec VS Live Share.

Lorsque vous faites cela, vous avez la possibilité de partager votre terminal en lecture seule ou en lecture-écriture.

Par défaut, vous devez partager votre terminal en lecture seule. Lorsque vous partagez votre terminal en lecture-écriture, l'utilisateur peut exécuter des commandes arbitraires directement sur votre terminal. Laissez cela pénétrer un instant. C'est lourd.

Il va sans dire que l'accès en écriture à distance au terminal de quelqu'un implique beaucoup de confiance et de responsabilité. Vous ne devez partager votre terminal en lecture-écriture qu'avec des personnes en qui vous avez implicitement confiance. Les ex éloignés sont probablement hors de la table.

Partager votre terminal en lecture seule en toute sécurité permet à la personne à l'autre bout de la ligne de voir ce que vous tapez et la sortie de votre terminal en temps réel, mais l'empêche de taper quoi que ce soit dans ce terminal.

Si vous vous trouvez dans un scénario où il serait plus rapide pour l'autre personne d'accéder simplement à votre terminal au lieu d'essayer de vous guider à travers une commande loufoque avec une tonne de drapeaux, vous pouvez partager votre terminal en lecture-écriture. Dans ce mode, l'autre personne a un accès à distance complet à votre terminal. Choisissez judicieusement vos amis.

Partagez votre hôte local

Dans la vidéo ci-dessus, la commande du terminal se termine par un lien vers un site fonctionnant sur https://localhost:8080. Avec VS Live Share, vous pouvez partager cet hôte local afin que l'autre personne puisse y accéder comme s'il s'agissait de son propre hôte local.

Si vous exécutez une session de débogage partagée, lorsque le participant atteint cette URL localhost de son côté, elle s'interrompt pour vous deux si un point d'arrêt est atteint. Mieux encore, vous pouvez partager n'importe quel processus TCP. Cela signifie que vous pouvez partager quelque chose comme une base de données ou un cache Redis. Par exemple, vous pouvez partager votre serveur Mongo DB local. Sérieusement! Cela signifie qu'il n'est plus nécessaire de modifier les fichiers de configuration ou d'essayer d'obtenir une base de données partagée. Partagez simplement le port de votre instance locale de base de données Mongo.

Partagez les bons fichiers de la bonne manière

Parfois, vous ne voulez pas que vos collaborateurs voient certains fichiers. Il y a probablement des clés privées et des mots de passe dans votre projet qui ne sont pas vérifiés dans le contrôle de code source et qui ne conviennent pas à l'affichage public. Dans ce cas, vous voudriez cacher ces fichiers à toute personne participant à votre session Live Share.

Par défaut, VS Live Share masquera tout fichier spécifié dans votre .gitignore . S'il y a un fichier que vous souhaitez masquer, ajoutez-le simplement à votre .gitignore . Notez cependant que cela ne fait que masquer le fichier dans la vue du projet. Si vous êtes dans une session de débogage partagée et que vous entrez dans un fichier qui se trouve dans le .gitignore , il est toujours chargé dans l'éditeur et vos collaborateurs pourront le voir.

Vous pouvez obtenir un contrôle plus précis sur la façon dont vous partagez des fichiers en créant un fichier .vsls.json .

Par exemple, si vous voulez vous assurer que tous les fichiers qui se trouvent dans le .gitignore ne sont jamais visibles, même pendant le débogage, vous pouvez définir la propriété gitignore sur exclude .

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

De même, vous pouvez tout afficher dans votre .gitignore et contrôler la visibilité du fichier directement à partir du fichier .vsls.json . Pour ce faire, définissez gitignore sur none , puis utilisez les propriétés excludeFiles et hideFiles . Rappelez-vous - exclure signifie jamais visible et cacher signifie "non visible dans l'explorateur de fichiers".

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

Partage et extensions

Une partie de l'attrait de VS Code pour de nombreux développeurs est le marché massif des extensions. La plupart des gens en auront plus que quelques-uns installés. Il est important de comprendre comment les extensions fonctionneront ou non dans le contexte de VS Live Share.

VS Live Share synchronisera tout ce qui est spécifique au contexte du projet que vous partagez. Par exemple, si l'extension Vetur est installée parce que vous travaillez avec un projet Vue, elle sera partagée avec tous les participants, qu'ils l'aient également installée ou non. Il en va de même pour d'autres éléments spécifiques au contexte, tels que les linters, les formateurs, les débogueurs et les services linguistiques.

VS Live Share ne synchronise pas les extensions spécifiques à l'utilisateur. Il s'agirait de thèmes, d'icônes, de raccourcis clavier, etc. En règle générale, VS Live Share partage votre contexte, pas votre écran. Vous pouvez consulter l'article de la documentation officielle sur ce sujet pour une explication plus détaillée des extensions que vous pouvez vous attendre à partager.

Communiquez pendant que vous collaborez

L'une des premières choses que les gens font lors de leur première expérience VS Live Share est d'essayer de communiquer en tapant des commentaires de code. Cela semble être la chose à faire en matière d'écriture (l'obtenir?), Mais pas vraiment comment VS Live Share a été conçu pour être utilisé.

VS Live Share n'est pas destiné à remplacer le client de chat de votre choix. Vous avez probablement déjà un mécanisme de chat préféré, et VS Live Share suppose que vous continuerez à l'utiliser.

Si vous utilisez déjà Slack, il existe une extension VS Code appelée Slack Chat. Cette extension est encore un peu au début de son développement, mais elle semble assez prometteuse. Il met VS Code en mode fractionné et intègre Slack sur le côté droit. Mieux encore, vous pouvez démarrer une session de partage en direct directement depuis le chat Slack.

Un autre outil qui semble assez intéressant s'appelle CodeStream.

CodeStream

Alors que VS Live Share cherche à améliorer la collaboration de l'éditeur, CodeStream vise à résoudre ce même problème du point de vue du chat.

L'extension CodeStream vous permet de discuter directement dans VS Code et ces discussions font partie de votre historique de code. Vous pouvez mettre en surbrillance un morceau de code à discuter et il va directement dans le chat afin qu'il y ait un contexte pour vos commentaires. Ces commentaires sont ensuite enregistrés dans le cadre de votre référentiel Git. Ils apparaissent également dans votre code sous forme de petites icônes de commentaires, et ces commentaires apparaîtront quelle que soit la branche sur laquelle vous vous trouvez.

En ce qui concerne VS Live Share, CodeStream offre un ensemble de fonctionnalités complémentaires. Vous pouvez démarrer de nouvelles sessions directement depuis le volet de chat, ainsi qu'en cliquant sur un avatar. Les nouvelles sessions créent automatiquement un canal de discussion correspondant que vous pouvez conserver avec le code ou supprimer lorsque vous avez terminé.

Si le chat ne suffit pas pour faire le travail et que vous avez besoin de collaborer comme en 1999, l'aide n'est qu'à un coup de téléphone.

VS Partage audio en direct

Alors que VS Live Share n'essaie pas de réinventer le chat, il réinvente votre téléphone. Type de.

Avec l'extension VS Live Share Audio, vous pouvez appeler quelqu'un directement et discuter vocalement depuis VS Code.

L'autre personne recevra alors une invite pour se joindre à votre appel.

Vous verrez une icône de haut-parleur dans la barre d'état inférieure lorsque vous êtes connecté à un appel. Vous pouvez cliquer sur ce haut-parleur pour changer de périphérique audio, vous mettre en sourdine ou vous déconnecter de l'appel.

Le dernier conseil que je vais vous donner est probablement le plus important, et ce n'est pas une fonctionnalité sophistiquée ou un paramètre obscur dont vous ignoriez l'existence.

Changez votre mémoire musculaire

Nous avons des années de comportement acquis lorsqu'il s'agit d'obtenir de l'aide ou de partager notre code. L'état des outils de collaboration avec les développeurs est si mauvais depuis si longtemps que nous sommes conditionnés à coller du code dans Slack, à démarrer des appels Skype maladroits qui consistent principalement à « dites-moi quand vous pouvez voir mon écran », ou à nous rassembler autour d'un moniteur et à pointer excessivement, c'est-à-dire le style de la photo de stock.

La chose la plus importante que vous puissiez faire pour tirer le meilleur parti de VS Live Share est d'utiliser réellement VS Live Share. Et cela devra être un effort "conscient".

Votre cerveau est doué pour les schémas. Vous reconnaissez et classez constamment le monde qui vous entoure en fonction de modèles que vous avez identifiés, et vous êtes si doué que vous ne réalisez même pas que vous le faites. Vous développez ensuite des réponses par défaut à ces modèles. Vous formez des instincts. C'est pourquoi vous utiliserez par défaut les anciennes méthodes de collaboration sans même penser à ce que vous faites. Avant de vous en rendre compte, vous serez sur un appel Skype avec quelqu'un partageant votre écran - même si vous avez installé Live Share.

J'ai beaucoup écrit sur VS Code et les gens me demandent de temps en temps comment ils peuvent être plus productifs avec leur éditeur. Je dis toujours la même chose : la prochaine fois que vous attrapez la souris pour faire quelque chose, arrêtez. Pouvez-vous faire quelque chose avec le clavier à la place ? Vous le pouvez probablement. Recherchez le raccourci, puis faites-vous utiliser. Au début, cela va être plus lent, mais si vous êtes prêt à adopter délibérément un comportement différent, vous serez étonné de la rapidité avec laquelle votre cerveau adoptera par défaut la manière la plus productive de faire quelque chose.

Il en va de même pour le partage en direct. Vous serez en train de partager votre écran lorsqu'il vous viendra à l'esprit que vous pourriez utiliser Live Share. À ce moment-là, arrêtez-vous; cliquez sur ce bouton "Partager" en bas de VS Code.

Oui, la personne à l'autre bout du fil n'a peut-être pas installé l'extension. Oui, cela peut prendre un moment pour le mettre en place. Mais si vous travaillez à établir ce comportement maintenant, la prochaine fois que vous ferez cela, cela "fonctionnera simplement" et il ne faudra pas longtemps avant que vous n'ayez même plus à y penser, et à ce moment-là, vous aura finalement atteint ce niveau de collaboration "Anonymous Hippo".

Davantage de ressources

• Pack d'extension VS Live Share
• Documents de partage en direct de VS Code
• Extensions et soutien de l'écosystème
• Premiers pas avec VS Live Share