Vous voulez collaborer sur des projets de codage?  Live Share for VS Code est un excellent outil. Voici comment le configurer et le mettre en route.

Comment programmer en collaboration à l'aide du partage en direct de Visual Studio Code

Publicité Que vous appreniez les premières étapes d'un langage de programmation ou que vous soyez un codeur chevronné, la collaboration est la clé de l'amélioration. Des concepts tels que la programmation en binôme sont répandus dans les entreprises modernes, mais quelles sont les options de collaboration à la maison? De nomb

Publicité

Que vous appreniez les premières étapes d'un langage de programmation ou que vous soyez un codeur chevronné, la collaboration est la clé de l'amélioration. Des concepts tels que la programmation en binôme sont répandus dans les entreprises modernes, mais quelles sont les options de collaboration à la maison?

De nombreuses équipes utilisent des outils comme Slack et Discord pour rester en contact en tant que groupe. Le contrôle de version permet aux utilisateurs de collaborer sur un projet et de le synchroniser avec le même référentiel en ligne.

Ces outils sont fantastiques, mais que se passerait-il s’il existait un moyen de combiner ces concepts dans un environnement de développement intégré? Microsoft a la réponse dans Live Share pour Visual Studio (VS) Code et Visual Studio. Le guide d'aujourd'hui portera sur VS Code.

(Si vous ne savez toujours pas si vous devez choisir Visual Studio Code sur Atom, nous pouvons vous aider à prendre une décision.)

Qu'est-ce que VS Live Share?

VS Live Share permet à deux personnes ou plus de collaborer sur du code en temps réel à l'aide de comptes Microsoft ou GitHub. Les sessions standard Live Share prennent en charge jusqu'à cinq utilisateurs simultanés, mais cela peut aller jusqu'à 30 en modifiant les paramètres. Bien que seuls les utilisateurs connectés puissent contribuer au code, les invités peuvent regarder la session et participer au chat en direct.

Le pack d’extension VS Live Share comprend un fichier audio permettant aux utilisateurs de partager un appel et des intégrations pour Slack et Discord. En plus des avantages évidents pour les travailleurs distants, Live Share est également un outil éducatif. Des terminaux et des serveurs partageables font de Live Share l’outil d’enseignement idéal pour les cours.

Configuration du code Visual Studio pour la collaboration

VS Code est gratuit et disponible pour Windows, macOS et Linux. Si vous n'êtes pas déjà un utilisateur du code VS, téléchargez-le et installez-le avant de continuer.

Pour installer VS Live Share, ouvrez VS Code et ouvrez l’onglet Extensions de la barre d’outils de gauche. Alternativement, vous pouvez utiliser le raccourci clavier Ctrl-Maj-X . Recherchez VS Live Share dans la barre de recherche.

Panneau d'extensions de code VS
Parallèlement à VS Live Share, Microsoft a publié des outils supplémentaires pour la communication via des logiciels externes et audio. Installez VS Live Share avec le pack d’extensions VS Live Share . Une fois installé, cliquez sur recharger sous l’une des extensions de la liste pour recharger du code Visual Studio et les activer.

De nouveaux logos apparaissent dans le panneau latéral

Lors du rechargement, vous remarquerez quelques nouvelles icônes dans la barre d’outils, un symbole de hachage indiquant le panneau d’intégration Slack et Discord et un symbole de flèche pour le panneau Live Share.

Configuration d'une session de partage en code VS

détails de la session de partage en direct de Visual Studio Code

Mettre en place une session de partage est assez simple. Ouvrez l'onglet VS Live Share dans la barre d'outils de gauche. La fenêtre Détails de la session offre trois options pour le partage de code:

  • Rejoindre la session de collaboration : utilisez cette option pour rejoindre la session de quelqu'un d'autre à condition qu'il vous ait fourni une URL.
  • Démarrer une session de collaboration : utilisez cette option pour créer votre propre session de collaboration dans laquelle les autres utilisateurs peuvent modifier le code.
  • Démarrer une session de collaboration en lecture seule : utilisez cette option pour créer une session de collaboration dans laquelle les utilisateurs peuvent afficher, mais pas modifier le code.

En cliquant sur l'un de ces éléments, vous serez invité à vous connecter à votre compte Microsoft ou à votre compte GitHub et à vous rediriger vers le navigateur. Pour configurer une session de base, sélectionnez Démarrer une session de collaboration, puis sélectionnez un répertoire de travail lorsque vous y êtes invité. Connectez-vous et vous serez redirigé vers VS Code et invité à autoriser l'autorisation du pare-feu.

Ce n'est pas essentiel, bien que recommandé pour la rapidité et la stabilité de la connexion.

Invite du pare-feu pour permettre une connexion rapide en direct

Une fenêtre d’information dans le coin inférieur droit contient votre lien de collaboration, ainsi que des options pour rendre la salle en lecture seule et un lien vers plus d’informations sur le processus de partage.

Fenêtre contextuelle de partage de session Live Share

Copiez votre lien dans le presse-papiers et donnez-le à un ami ou à un collègue sur lequel VS Live Share est également installé et le tour est joué!

Collaboration de code de base dans VS Code

La collaboration de code ne change pas votre expérience de codage. Au lieu de cela, il ajoute une couche sur le dessus. La création d'une session Live Share ouvre une fenêtre de discussion. Ceci est accessible à tous les utilisateurs, qu'ils soient connectés ou en lecture seule.

Un invité en lecture seule appelé Jimmy rejoint le chat

À tout moment pendant la collaboration, vous pouvez rouvrir la fenêtre de discussion, obtenir l'URL de partage ou mettre fin à la session à l'aide du panneau Live Share.

Fenêtre Live Share in progress
Maintenant, ouvrez n’importe quel fichier sur lequel vous souhaitez collaborer et commencez à coder comme d’habitude. Les participants travaillant sur le même script que vous ont chacun un curseur de couleur indiquant leur lieu de travail. En plus de les voir fonctionner en temps réel, la mise en surbrillance est également partagée, ce qui facilite la détection des erreurs et des modifications suggérées.

Mise en surbrillance du texte du participant distant
La collaboration peut avoir lieu entre tous les fichiers du répertoire du projet et vous pouvez voir le script sur lequel tout le monde travaille dans le panneau Live Share. Vous pouvez également partager le terminal VS Code en mode lecture seule et en lecture / écriture, ainsi qu'un serveur local pour travailler sur JavaScript ou d'autres projets Web.

Suivi et mise au point de collaborateurs

Parfois, vous voudrez expliquer quelque chose qui nécessite d'aller au-delà d'un script. Les utilisateurs peuvent se suivre en cliquant sur leur nom dans le panneau Live Share. Maintenant, peu importe où ils vont dans le projet, vous serez entraînés avec eux pour voir ce qu'ils font.

L'option Suivre vous permet de voir quelqu'un d'autre travailler dans un projet.

De même, en cliquant sur le petit mégaphone dans le panneau Détails de la session, concentrez les participants sur votre vue actuelle.

Le mégaphone concentre tous les participants sur votre point de vue
C’est pratique lorsque vous devez attirer rapidement l’attention de chacun sur une partie spécifique du projet. Les participants ciblés ont la possibilité de continuer à vous suivre à partir de ce moment.

Utiliser l'audio dans VS Live Share

Le pack d'extension VS Live Share comprend une intégration pour l'audio. Le début d'une session ajoute une nouvelle salle. Pour entrer dans la salle, cliquez sur Joindre un appel audio sous l’onglet Audio du panneau Live Share .

Rejoindre un appel audio dans Live Share
Tous les collaborateurs et invités ont accès à l'appel, ce qui le rend parfait pour collaborer, enseigner ou présenter à un groupe le déroulement d'un projet. Vous pouvez accéder aux paramètres de l'appel en cliquant avec le bouton droit de la souris sur un appel actif ou en cliquant sur la roue dentée.

En cliquant sur le symbole rouge de déconnexion, vous quittez la salle de discussion, qui restera accessible tant que la session restera active.

Intégration souple avec VS Code

Configurer Slack dans VS Code est simple. Cliquez sur le logo Slack dans le panneau de gauche et sélectionnez Setup Slack . Cela vous mènera à une fenêtre du navigateur pour autoriser VS Code à accéder à l'espace de travail.

Autoriser l'application avec Slack

Vous devez être un administrateur pour autoriser l'application VS Code Slack. Une fois lié, l’espace de travail Slack apparaît sous un autre onglet dans VS Code.

Les discussions en attente fonctionnent bien dans une fenêtre Live Share.
La configuration de Discord est un processus similaire, même s’il est intéressant de noter qu’à l’heure actuelle, un seul des services peut être intégré à la fois.

Sécurité et confidentialité dans VS Live Share

VS Live Share est un outil fantastique pour les codeurs de tous types, mais il comporte des considérations de sécurité. La nature ouverte de l'extension combinée à la facilité de partage de votre code peut être abusée.

Étant donné que même les invités en lecture seule peuvent discuter en chat, il existe un risque de comportement inapproprié de la part de personnes qui n'auraient pas dû avoir le lien partagé.

Live Share permet également de partager le terminal en mode lecture / écriture. Cela pose un risque de sécurité important entre de mauvaises mains.

Le partage de l'accès à votre terminal peut être une activité risquée.
En bref, faites bien attention à qui vous partagez votre lien Live Share et réfléchissez bien avant d'autoriser les utilisateurs à éditer et à bénéficier de privilèges de terminal.

La collaboration est un progrès dans le code Visual Studio

Ces extensions sont des exemples d’intégrations de base avec VS Code. Les utilisateurs chevronnés connaissent déjà de nombreux autres outils qui aident à compléter le code, à laisser des peluches et à tester. Live Share permet également aux utilisateurs d'apprendre à la fois en classe et à distance. Toutefois, l'auto-apprentissage avec un excellent cours en ligne reste important.

Et rappelez-vous, en utilisant VS Code, vous pouvez également coder dans votre navigateur avec Microsoft Visual Studio Online. Commencer à coder dans votre navigateur avec Microsoft Visual Studio Online. Commencer à coder dans votre navigateur. Avec Microsoft Visual Studio Online Le codage collaboratif pour Visual Studio Code va bientôt être amélioré l'arrivée de Microsoft Visual Studio Online. Lire la suite .

En savoir plus sur: les outils de collaboration, le code Visual Studio.