Fermer

septembre 19, 2018

Visual Studio Live Share peut le faire?


À propos de l'auteur

Burke Holland est un développeur front-end résidant à Nashville, dans le Tennessee; la plus grande ville du monde. Il aime beaucoup JavaScript parce que c’est la seule façon dont il…
En savoir plus sur Burke

La collaboration sur des documents bureautiques est un problème résolu. La collaboration sur le code reste une tâche difficile. C’est parce que partager du code n’est pas suffisant. Pour vraiment collaborer, un développeur doit pouvoir partager son environnement entier. VS Live Share est un nouveau service qui vous permet de faire exactement cela, et vous serez peut-être surpris par le partage que vous pouvez réellement faire.

Il y a quelques mois, Microsoft a publié son service gratuit Live Share Visual Studio (VS) . VS Live Share est une collaboration de niveau 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, je me suis rendu compte que beaucoup d’entre nous se résignaient à être isolés dans notre code et que nous ne sommes même pas sachant qu'il existe de meilleures façons de travailler avec un service tel que VS Live Share. C’est en partie parce que nous sommes coincés dans de vieilles habitudes et en partie parce que nous ne sommes tout simplement pas au courant de ce que tous les VS Live Share peuvent faire. Cette dernière partie que je peux vous aider!

Dans cet article, nous allons passer en revue les fonctionnalités et les meilleures pratiques de VS Live Share qui rendent la collaboration entre développeurs aussi simple qu’un «Hippopotame anonyme».


 dans Google Docs
Google Docs propose un moyen intéressant de gérer les participants anonymes ( Grand aperçu )

Partagez votre code

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


 page de readme de l'extension de partage en direct de code
( Grand aperçu )

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

  • VS Live Share
  • VS Live Share Audio
  • Extension de 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à.


 vs palette de commandes de code indiquant l'option permettant de se connecter avec le navigateur
Palette pour lancer une nouvelle session Live Share ( Grand aperçu )

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 utiliser la vue Explorateur VS Live Share dans la barre latérale


 vs code avec des boîtes dessinées autour des différentes parties du Interface utilisateur pouvant être utilisée pour démarrer une session de partage en direct
Il existe une multitude de façons de démarrer une nouvelle session VS Live Share ( Grand aperçu )

Un lien est copié dans votre presse-papiers. Vous pouvez ensuite envoyer ce lien à d'autres personnes, qui peuvent rejoindre votre session Live Share à condition d'utiliser également le code VS. Lequel, n'est-ce pas?

Maintenant, vous pouvez collaborer comme si vous travailliez sur un vieux document Word classique:

L'autre personne peut non seulement voir votre code, mais aussi le modifier, le sauvegarder, l'exécuter et même le déboguer. Pour vous, ils apparaissent comme un curseur avec un nom. Vous apparaissez dans leur éditeur de la même façon.

Explorateur de partage VS Live

L’explorateur VS Live Share apparaît sous la forme d’une nouvelle icône dans la barre d’action – à l'extrême droite de l'écran (à l'extrême gauche de votre écran pour le placement de la barre d'action par défaut). C'est une sorte de «zéro zéro» pour tout ce qui est VS Live Share. À partir de là, vous pouvez démarrer les sessions, y mettre fin, partager les terminaux et les serveurs et voir qui est connecté.


 vs live share viewlet
L'explorateur VS Live Share est une vue de tous les éléments Live Share ( Grand aperçu )

C’est une bonne idée de lier un raccourci clavier à cette vue VS Live Share Explorer pour pouvoir basculer rapidement entre celle-ci et vos fichiers. Pour ce faire, appuyez sur Ctrl / Cmd + K (ou Ctrl / Cmd + S ), puis recherchez «Show Live Partager". J'ai lié le mien à Ctrl / Cmd + L qui ne semble pas être lié à autre chose. Je trouve que ce raccourci est intuitif ( L pour Live Share) et facile à utiliser sur le clavier.


 l'écran de liaison du clavier dans vs code avec une liaison créée pour la visionneuse vs live share
Vous pouvez créer une liaison pour la vue de l'explorateur VS Live Share ( Grand aperçu )

Code de partage 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 en lecture seule, les utilisateurs pourront voir votre code et suivre vos mouvements, mais ils ne pourront pas interagir.


 vs notification de code invitant l'utilisateur à choisir le partage en lecture seule
Les sessions de partage sont lues -write par défaut, mais vous pouvez les rendre en lecture seule ( Grand aperçu )

Ce mode est utile lorsque vous partagez avec une personne à laquelle vous ne faites pas nécessairement confiance – peut-être un fournisseur, un partenaire ou un ex-ex-nommé.

Il est également particulièrement utile pour les instructeurs. Notez qu'au moment d'écrire ces lignes, VS Live Share est verrouillé sur 5 utilisateurs simultanés. Comme 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 ayant le lien peut rejoindre votre session Live Share. Quand ils se joignent, vous verrez une fenêtre contextuelle vous informant. De même, lorsqu'ils se déconnectent, vous êtes averti. Ceci est le comportement par défaut pour VS Live Share.


 vs notification de code avec le nom de la personne qui a rejoint la session de partage en direct
VS Code vous alertera chaque fois que quelqu'un rejoint votre session ( ])

C'est une bonne idée de changer cela pour que vous deviez approuver manuellement une personne avant de pouvoir rejoindre votre session. C'est pour 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, changer une lettre dans votre chaîne de connexion à la base de données et rire pendant que vous passez les quatre heures suivantes à essayer de comprendre comment votre vie a si mal tourné.

la ligne suivante dans votre fichier de paramètres utilisateur Ctrl / Cmd + .

 "liveshare.guestApprovalRequired": true

On vous demande maintenant quand quelqu'un veut se joindre à nous. Si vous bloquez quelqu'un, ils sont bloqués pour la durée de la session. S'ils tentent de se joindre à nouveau, vous ne serez pas averti et ils seront rejetés sans cérémonie par VS Live Share.

Allez-y et profitez de votre déjeuner. Votre ordinateur est en sécurité.

Focus Followers

Par défaut, toute personne qui rejoint votre session Live Share a "suivi" vous. Cela signifie que leur éditeur va charger le fichier dans lequel vous vous trouvez et faire 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 ensemble sur un fichier et que vous accédez à un autre fichier, ils ne vous accompagnent pas automatiquement. Cela peut créer beaucoup de confusion avec vous lorsque vous parlez de code dans le fichier dans lequel vous vous trouvez tandis que l’autre regarde quelque chose de complètement différent.

En plus de se dire où vous êtes (qui fonctionne, btw), est une commande pratique appelée «Focus Participants» qui se trouve dans la palette de commandes Ctrl / Cmd + Maj + P .


 vs palette de commandes de code montrant en direct commande de focus de partage
Accédez à la commande "focus" à partir de la palette de commandes de code VS ( Grand aperçu )

Vous pouvez également y accéder en tant qu'icône dans la vue Explorateur de partage VS Live.


 vs icône de focus d'explorateur de partage en direct du code
Envoyez une demande en cliquant sur l'icône Follow dans la vue VS Live Share Explorer ( Grand aperçu )

Ceci concentrera vos participants sur la prochaine chose que vous cliquerez ou sur laquelle vous ferez défiler. Par défaut, les demandes de focus VS Live Share sont acceptées implicitement. Si vous ne voulez pas que les gens puissent vous concentrer, 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.

La suite étant désactivée dès que l’autre personne commence à modifier le code, il peut être difficile de savoir exactement quand les gens suivent. toi et quand ils ne le sont pas. L'un des endroits que vous pouvez rechercher est la vue VS Live Share Explorer. Il vous indiquera le fichier dans lequel se trouve une personne, mais pas si elle vous suit ou non.

Une bonne pratique consiste simplement à vous rappeler que le sujet change constamment pour que les gens puissent ou non voir ce que vous voyez à un moment donné.

Debug As A Team

Les participants peuvent partager 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 elle se brise de votre côté, elle se brise sur le leur, et ils obtiennent l'intégralité de votre code dans la vue de débogage. tout débogage que vous pouvez faire, ils peuvent le faire et ils peuvent le contrôler.

Le débogage peut également être lancé par les participants. Soyez par défaut, cependant, VS Code ne permet pas de démarrer votre débogueur à distance. Pour ce faire, 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, il semble que je passe autant de temps sur mon terminal que dans mon éditeur. Cela signifie que si vous avez une erreur sur votre terminal ou si vous avez besoin de taper une commande, ce serait bien si vos participants à VS Live Share pouvaient voir votre terminal en plus de votre code.

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


 vs palette de commandes de code avec le terminal de partage sélectionné
Accédez à la commande “Share Terminal” à partir de la palette VS ( Grand aperçu )

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


 vs invite à partager un terminal en lecture seule ou en lecture-écriture
Partagez toujours votre terminal en lecture seule sauf si vous devez absolument le partager avec un accès en écriture ( Grand aperçu )

Par défaut, vous devriez 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 ça couler un moment. C’est lourd.

Il va sans dire qu’avoir un accès en écriture à distance au terminal de l’utilisateur est très fiable. Vous ne devriez jamais partager votre lecture-écriture avec des personnes auxquelles vous faites confiance implicitement.

Le partage de 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 votre sortie de terminal en temps réel, mais les empêche de saisir quoi que ce soit dans ce terminal.

Si vous vous trouvez dans un scénario où il serait plus rapide pour votre interlocuteur d'accéder à votre terminal au lieu d'essayer de vous guider avec une tonne de drapeaux, vous pouvez partager votre lecture de terminal. écrire. Dans ce mode, l'autre personne dispose d'un accès à distance complet à votre terminal. Choisissez vos amis à bon escient.

Share your localhost

Dans la vidéo ci-dessus, la commande du terminal se termine par un lien vers un site exécuté sur http: // localhost: 8080 . Avec VS Live Share, vous pouvez partager cet hôte local pour que l’autre puisse l’accéder comme si c’était son propre hôte local.

Si vous exécutez une session de débogage partagée, lorsque le participant accède à l’adresse URL locale, se cassera 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 de base de données Mongo 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 pour votre instance de base de données Mongo locale.

Partagez les bons fichiers dans le bon sens

Parfois, vous ne voulez pas que des collaborateurs voient certains fichiers. Il existe probablement des clés privées et des mots de passe dans votre projet qui ne sont pas archivés dans le contrôle des sources et ne sont pas adaptés à un affichage public. Dans ce cas, vous souhaitez masquer ces fichiers à toute personne participant à votre session Live Share.

Par défaut, VS Live Share masque tous les fichiers spécifiés dans votre .gitignore . S'il existe un fichier que vous souhaitez masquer, ajoutez-le simplement à votre .gitignore . Notez cependant que cela ne masque que 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.

obtenir un contrôle plus fin 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 présents dans le fichier .gitignore ne sont jamais visibles, même pendant le débogage, vous pouvez définir la propriété gitignore sur exclure .

 {
    "$ schema": "http://json.schemastore.org/vsls",
    "gitignore": "exclure"
}

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

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

Partage et extensions

Une partie de l'attrait de VS Code pour beaucoup de développeurs est le marché massif des extensions . La plupart des gens en auront plus que quelques-uns. 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 car vous travaillez avec un projet Vue, elle sera partagée entre tous les participants, qu'ils soient ou non installés. 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. Ce sont des thèmes, des icônes, des raccourcis clavier, etc. En règle générale, VS Live Share partage votre contexte, pas votre écran. Vous pouvez consulter l'article officiel sur ce sujet pour une explication plus détaillée des extensions que vous pouvez espérer partager.

Communiquer pendant votre collaboration

Une des premières choses que font les gens lors de leur première expérience VS Live Share, il faut essayer de communiquer en tapant des commentaires de code. Cela semble être la chose à écrire, 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 conversation préféré et VS Live Share suppose que vous continuerez à l'utiliser.

Si vous utilisez déjà Slack, il existe une extension de code VS appelée Slack Chat . Cette extension est encore un peu au début de son développement, mais elle semble prometteuse. Il place le code VS en mode split et intègre Slack du côté droit. Mieux encore, vous pouvez lancer une session Live Share directement depuis le chat Slack.


 vs extension de chat slack
L'extension Slack Chat place Slack à l'intérieur de votre éditeur ( Large preview )

Un autre outil très intéressant s'appelle CodeStream.

CodeStream

Alors que VS Live Share cherche à améliorer la collaboration depuis 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 évidence une partie du code à discuter et cela va directement dans le chat, il y a donc un contexte pour vos commentaires. Ces commentaires sont ensuite enregistrés dans le cadre de votre dépôt Git. Ils s'affichent également dans votre code sous forme de petites icônes de commentaires, et ces commentaires s'affichent, quelle que soit la branche sur laquelle vous vous trouvez.

En ce qui concerne VS Live Share, CodeStream propose un ensemble de fonctionnalités complémentaires. Vous pouvez lancer de nouvelles sessions directement depuis le volet de discussion, 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 supprimez-le lorsque vous avez terminé.

Si le chat ne suffit pas pour faire le travail et que vous avez besoin de collaborer comme en 1999,

VS Live Share Audio

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

Avec l'extension VS Live Share Audio vous pouvez appeler directement quelqu'un et faire un chat vocal depuis VS Code.


 vs palette de commandes de code montrant l'option d'appel audio
appels audio à partir du code VS à l'aide de l'extension VS Live Share Audio ( Grand aperçu )

L'autre personne sera alors invité à rejoindre votre appel.


 vs notification de code vous demandant si vous souhaitez rejoindre l'appel audio
Le code VS vous demandera si vous souhaitez rejoindre un appel audio qui est en cours de traitement ( Grand aperçu )

Une icône de haut-parleur apparaît dans la barre d'état inférieure lorsque vous êtes connecté à un appel. Vous pouvez cliquer sur cette enceinte pour changer de périphérique audio, vous couper le son ou vous déconnecter de l’appel.


 vs options de code affichant des options telles que mute et déconnexion pour l’extension audio de partage en direct
un appel audio VS Live Share ( Grand aperçu )

La dernière astuce que je vais vous donner est probablement la plus importante, et ce n'est pas une fonctionnalité sophistiquée ou un paramètre obscur dont vous ne saviez pas l'existence.

Changer votre mémoire musculaire

Nous avons des années d'apprentissage comportement quand il s'agit d'obtenir de l'aide ou de partager notre code. L’état des outils de collaboration entre développeurs a été si mauvais depuis si longtemps que nous sommes conditionnés à coller du code dans Slack, à lancer des appels Skype maladroits composés principalement de «Dites-moi quand vous pouvez voir mon écran». excessivement, c.-à-d. style photo stock.


 un groupe de personnes pointant sur un écran d'ordinateur
( Grand aperçu )

La meilleure chose à faire pour tirer le meilleur parti de VS Live Share consiste à utiliser VS Live Share. Et cela devra être un effort «conscient».

Votre cerveau a de bonnes habitudes. Vous êtes constamment en train de reconnaître et de classer le monde autour de vous en fonction des modèles que vous avez identifiés, et vous êtes si doué, 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 les anciennes méthodes de collaboration sans même penser à ce que vous faites. Avant que vous ne le sachiez, vous participerez à un appel Skype avec une personne partageant votre écran – même si vous avez installé Live Share.

J'ai beaucoup écrit sur VS Code et les gens me demanderont de temps en temps comment plus productif avec leur éditeur. Je dis toujours la même chose: la prochaine fois que vous atteignez la souris pour faire quelque chose, arrêtez-vous. Pouvez-vous faire quelque chose avec le clavier à la place? Vous pouvez probablement Recherchez le raccourci et ensuite utilisez-le. Au début, ça va être plus lent, mais si vous êtes prêt à adopter délibérément un comportement différent, vous serez étonné de la vitesse à laquelle votre cerveau adoptera la méthode la plus productive.

Il en va de même pour Live Share. Vous serez sur un appel en partageant votre écran lorsqu'il vous apparaît que vous pourriez utiliser Live Share. A ce moment, arrêtez; Cliquez sur ce bouton «Partager» dans le bas du code VS.

Oui, l'extension à l'autre extrémité peut ne pas être installée. Oui, cela peut prendre un moment pour le configurer. Mais si vous travaillez maintenant à établir ce comportement, la prochaine fois que vous ferez cela, cela «fonctionnera» et il ne faudra pas longtemps pour que vous n'ayez même plus à y penser. aura finalement atteint ce niveau de collaboration "Anonymous Hippo".

Autres ressources

 Smashing Editorial (rb, ra, il)




Source link

septembre 19, 2018