O Visual Studio Live Share pode fazer isso?

Há alguns meses, a Microsoft lançou seu serviço gratuito Visual Studio (VS) Live Share. O VS Live Share é uma colaboração no nível do Google Docs para código. Vários desenvolvedores podem colaborar no mesmo arquivo ao mesmo tempo sem sair de seu próprio editor.

Após o lançamento do Live Share, percebi que muitos de nós nos resignamos a ficar isolados em nosso código e nem sabemos que existem maneiras melhores de trabalhar com um serviço como o VS Live Share. Isso ocorre em parte porque estamos presos a velhos hábitos e em parte porque simplesmente não estamos cientes do que todo VS Live Share pode fazer. Essa última parte eu posso ajudar!

Neste artigo, abordaremos os recursos e as práticas recomendadas do VS Live Share que tornam a colaboração do desenvolvedor tão fácil quanto ser um “hipopótamo anônimo”.

Compartilhe seu código

O Live Share vem como uma extensão para o Visual Studio e o Visual Studio Code (VS Code). Neste artigo, vamos nos concentrar no VS Code.

Você também pode instalá-lo através do VS Live Share Extension Pack, que inclui as seguintes extensões, todas as quais abordaremos neste artigo…

• Compartilhamento VS Live
• Áudio de compartilhamento ao vivo do VS
• Extensão do Slack Chat
  

Depois que a extensão estiver instalada, você precisará fazer login no serviço VS Live Share. Você pode fazer isso abrindo a Paleta de Comandos Ctrl/Cmd + Shift + P e selecionando “Sign In With Browser”. Se você não fizer login e tentar iniciar uma nova sessão de compartilhamento, será solicitado que faça login naquele momento.

Existem várias maneiras de iniciar uma sessão do VS Live Share. Você pode fazer isso na paleta de comandos, clicar no botão "Compartilhar" na barra de ferramentas inferior ou usar a visualização do explorador do VS Live Share na barra lateral.

Um link é copiado para sua área de transferência. Você pode enviar esse link para outras pessoas e elas podem participar da sua sessão do Live Share - desde que também estejam usando o VS Code. Qual, não somos todos?

Agora você pode colaborar como se estivesse trabalhando em um documento antigo normal do Word:

A outra pessoa pode não apenas ver seu código, mas também editá-lo, salvá-lo, executá-lo e até depurá-lo. Para você, eles aparecem como um cursor com um nome. Você aparece em seu editor da mesma maneira.

O VS Live Share Explorer

O explorador do VS Live Share aparece como um novo ícone na Barra de Ação — que é aquela barra de ícones na extrema direita da minha tela (na extrema esquerda da sua para o posicionamento padrão da Barra de Ação). Esta é uma espécie de “marco zero” para tudo VS Live Share. A partir daqui, você pode iniciar sessões, encerrá-las, compartilhar terminais, servidores e ver quem está conectado.

É uma boa ideia vincular um atalho de teclado a essa visualização do VS Live Share Explorer para que você possa alternar rapidamente entre isso e seus arquivos. Você pode fazer isso pressionando Ctrl/Cmd + K (ou Ctrl/Cmd + S ) e procurando por “Show Live Share”. Eu vinculei o meu a Ctrl/Cmd + L , que não parece estar vinculado a mais nada. Acho esse atalho intuitivo ( L para Live Share) e fácil de usar no teclado.

Código de compartilhamento somente leitura

Ao iniciar uma nova sessão de compartilhamento, você será notificado e perguntado se deseja compartilhar seu espaço de trabalho somente leitura. Se você selecionar somente leitura, as pessoas poderão ver seu código e seguir seus movimentos, mas não poderão interagir.

Este modo é útil quando você está compartilhando com alguém em quem você não confia necessariamente — talvez um fornecedor, parceiro ou um ex-namorado.

Também é particularmente útil para instrutores. Observe que, no momento da redação deste artigo, o VS Live Share está bloqueado para 5 usuários simultâneos. Como você provavelmente vai querer mais do que isso no modo somente leitura, especialmente se estiver ensinando um grupo, você pode aumentar o limite para 30 adicionando a seguinte linha ao seu arquivo de configurações do usuário: Ctrl/Cmd + , .

 "liveshare.features": "experimental"

Alterar o comportamento de associação padrão

Qualquer pessoa com o link pode participar da sua sessão do Live Share. Quando eles entrarem, você verá um pop-up informando. Da mesma forma, quando eles se desconectam, você é notificado. Este é o comportamento padrão do VS Live Share.

É uma boa ideia alterar isso para que você tenha que aprovar manualmente alguém antes que ele possa entrar na sua sessão. Isso é para protegê-lo no caso de você ir almoçar e esquecer de desconectar sua sessão. Seus colegas de trabalho não podem fazer login novamente, alterar uma letra na string de conexão do banco de dados e depois rir enquanto você passa as próximas quatro horas tentando descobrir como sua vida deu tão terrivelmente errado.

Para habilitar isso, adicione a seguinte linha ao seu arquivo de configurações do usuário Ctrl/Cmd + , .

 "liveshare.guestApprovalRequired": true

Agora você será avisado quando alguém quiser participar. Se você bloquear alguém, ele será bloqueado durante a sessão. Se eles tentarem entrar novamente, você não será notificado e eles serão rejeitados sem cerimônia pelo VS Live Share.

Vá e aproveite o seu almoço. Seu computador está seguro.

Foco Seguidores

Por padrão, qualquer pessoa que ingresse na sua sessão do Live Share está “seguindo” você. Isso significa que o editor deles carregará qualquer arquivo em que você estiver e rolará sempre que você rolar. Mesmo se você trocar de arquivo, os participantes verão exatamente o que você vê.

No segundo em que uma pessoa faz alterações em um arquivo, ela não está mais seguindo você. Portanto, se ambos estiverem trabalhando em um arquivo juntos e forem para um arquivo diferente, eles não irão automaticamente com você. Isso pode levar a muita confusão com você falando sobre o código no arquivo em que você está enquanto a outra pessoa está olhando para algo totalmente diferente.

Além de apenas dizer um ao outro onde você está (o que funciona, aliás), existe um comando útil chamado “Focus Participantes” que está na Paleta de Comandos Ctrl/Cmd + Shift + P .

Você também pode acessá-lo como um ícone na visualização do VS Live Share Explorer.

Isso focará seus participantes na próxima coisa em que você clicar ou rolar. Por padrão, as solicitações de foco do VS Live Share são aceitas implicitamente. Se você não quiser que as pessoas possam focar em você, você pode adicionar a seguinte linha ao seu arquivo de configurações do usuário.

 "liveshare.focusBehavior": "prompt" 

Observe também que você pode seguir os participantes. Se você clicar no nome deles na visualização do VS Live Share Explorer, começará a segui-los.

Como seguir é desativado assim que a outra pessoa começa a editar o código, pode ser difícil saber exatamente quando as pessoas estão seguindo você e quando não estão. Um lugar que você pode procurar é na visualização do VS Live Share Explorer. Ele informará o arquivo em que uma pessoa está, mas não se ela está ou não seguindo você.

Uma boa prática é apenas lembrar que o foco está sempre mudando para que as pessoas possam ou não ver o que você vê a qualquer momento.

Depurar como uma equipe

Os participantes podem compartilhar qualquer sessão de depuração que você executar. Se você iniciar uma sessão de depuração, eles terão exatamente a mesma experiência que você. Se quebrar do seu lado, quebra do lado deles, e eles obtêm a visão de depuração completa em todo o seu código.

Eles podem entrar, sair, passar, adicionar inspeções, avaliar no console de depuração; qualquer depuração que você possa fazer, eles também podem fazer e podem controlá-la.

A depuração também pode ser iniciada pelos participantes. Por padrão, porém, o VS Code não permite que seu depurador seja iniciado remotamente. Para habilitar isso, adicione a seguinte linha ao seu arquivo de configurações do usuário Ctrl/Cmd + , :

 "liveshare.allowGuestDebugControl": true

Compartilhe seu terminal

Muito do trabalho que fazemos como desenvolvedores não está em nosso código; está no terminal. Alguns dias parece que passo tanto tempo no meu terminal quanto no meu editor. Isso significa que se você tiver um erro no seu terminal ou precisar digitar algum comando, seria bom se seus participantes no VS Live Share pudessem ver seu terminal além do seu código.

O VS Code possui um terminal integrado e você pode compartilhá-lo com o VS Live Share.

Ao fazer isso, você tem a oportunidade de compartilhar seu terminal como somente leitura ou como leitura-gravação.

Por padrão, você deve compartilhar seu terminal como somente leitura. Quando você compartilha seu terminal de leitura/gravação, o usuário pode executar comandos arbitrários diretamente em seu terminal. Deixe isso afundar por um momento. Isso é pesado.

Escusado será dizer que ter acesso remoto de escrita ao terminal de alguém vem com muita confiança e responsabilidade. Você só deve compartilhar seu terminal de leitura/gravação com pessoas em quem confia implicitamente. Ex afastados provavelmente estão fora da mesa.

Compartilhar seu terminal somente leitura com segurança permite que a pessoa do outro lado da linha veja o que você está digitando e a saída do terminal em tempo real, mas os restringe de digitar qualquer coisa nesse terminal.

Se você se encontrar em um cenário em que seria mais rápido para a outra pessoa acessar seu terminal em vez de tentar orientá-lo por algum comando maluco com uma tonelada de sinalizadores, você pode compartilhar seu terminal de leitura e gravação. Neste modo, a outra pessoa tem acesso remoto total ao seu terminal. Escolha seus amigos com sabedoria.

Compartilhe seu localhost

No vídeo acima, o comando do terminal termina com um link para um site rodando em https://localhost:8080. Com o VS Live Share, você pode compartilhar esse localhost para que a outra pessoa possa acessá-lo como se fosse seu próprio localhost.

Se você estiver executando uma sessão de depuração compartilhada, quando o participante acessar esse URL do host local, ele será interrompido para ambos se um ponto de interrupção for atingido. Melhor ainda, você pode compartilhar qualquer processo TCP. Isso significa que você pode compartilhar algo como um banco de dados ou um cache Redis. Por exemplo, você pode compartilhar seu servidor Mongo DB local. A sério! Isso significa não mais alterar os arquivos de configuração ou tentar obter um banco de dados compartilhado. Basta compartilhar a porta para sua instância de banco de dados Mongo local.

Compartilhe os arquivos certos da maneira certa

Às vezes, você não quer que os colaboradores vejam determinados arquivos. Provavelmente, existem chaves privadas e senhas em seu projeto que não foram verificadas no controle de origem e não são adequadas para exibição pública. Nesse caso, você deseja ocultar esses arquivos de qualquer pessoa que participe de sua sessão do Live Share.

Por padrão, o VS Live Share ocultará qualquer arquivo especificado em seu .gitignore . Se houver um arquivo que você deseja ocultar, basta adicioná-lo ao seu .gitignore . Observe, porém, que isso apenas oculta o arquivo na visualização do projeto. Se você estiver em uma sessão de depuração compartilhada e entrar em um arquivo que está no .gitignore , ele ainda será carregado no editor e seus colaboradores poderão vê-lo.

Você pode obter um controle mais refinado sobre como compartilhar arquivos criando um arquivo .vsls.json .

Por exemplo, se você quiser ter certeza de que qualquer arquivo que esteja no .gitignore nunca fique visível, mesmo durante a depuração, você pode definir a propriedade gitignore para exclude .

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

Da mesma forma, você pode mostrar tudo em seu .gitignore e controlar a visibilidade do arquivo diretamente do arquivo .vsls.json . Para fazer isso, defina o gitignore como none e, em seguida, use as propriedades excludeFiles e hideFiles . Lembre-se - excluir significa nunca visível e ocultar significa "não visível no explorador de arquivos".

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

Compartilhamento e extensões

Parte do apelo do VS Code para muitos desenvolvedores é o enorme mercado de extensões. A maioria das pessoas terá mais do que alguns instalados. É importante entender como as extensões funcionarão ou não no contexto do VS Live Share.

O VS Live Share sincronizará qualquer coisa que seja específica ao contexto do projeto que você está compartilhando. Por exemplo, se você tiver a extensão Vetur instalada porque está trabalhando com um projeto Vue, ela será compartilhada com todos os participantes - independentemente de eles também a terem ou não instaladas. O mesmo vale para outras coisas específicas do contexto, como linters, formatadores, depuradores e serviços de linguagem.

O VS Live Share não sincroniza extensões específicas do usuário. Seriam coisas como temas, ícones, ligações de teclado e assim por diante. Como regra geral, o VS Live Share compartilha seu contexto, não sua tela. Você pode consultar o artigo de documentos oficiais sobre esse assunto para obter uma explicação mais detalhada de quais extensões você espera que sejam compartilhadas.

Comunique-se enquanto colabora

Uma das primeiras coisas que as pessoas fazem em sua experiência inaugural do VS Live Share é tentar se comunicar digitando comentários de código. Isso parece ser a coisa de escrever (entendeu?) a fazer, mas não é realmente como o VS Live Share foi projetado para ser usado.

O VS Live Share não se destina a substituir o cliente de bate-papo de sua escolha. Você provavelmente já tem um mecanismo de bate-papo preferencial, e o VS Live Share assume que você continuará a usá-lo.

Se você já estiver usando o Slack, há uma extensão do VS Code chamada Slack Chat. Esta extensão ainda está um pouco no início de seu desenvolvimento, mas parece bastante promissora. Ele coloca o VS Code no modo dividido e incorpora o Slack no lado direito. Melhor ainda, você pode iniciar uma sessão do Live Share diretamente do bate-papo do Slack.

Outra ferramenta que parece bastante interessante é chamada CodeStream.

CodeStream

Enquanto o VS Live Share procura melhorar a colaboração do editor, o CodeStream tem como objetivo resolver o mesmo problema do ponto de vista do chat.

A extensão CodeStream permite que você converse diretamente no VS Code e esses bate-papos se tornam parte do seu histórico de código. Você pode destacar um pedaço de código para discutir e ele vai diretamente para o bate-papo para que haja contexto para seus comentários. Esses comentários são salvos como parte do seu repositório Git. Eles também aparecem em seu código como pequenos ícones de comentários, e esses comentários aparecerão não importa em qual branch você esteja.

Quando se trata de VS Live Share, o CodeStream oferece um conjunto complementar de recursos. Você pode iniciar novas sessões diretamente no painel de bate-papo, bem como clicando em um avatar. Novas sessões criam automaticamente um canal de bate-papo correspondente que você pode persistir com o código ou descartar quando terminar.

Se conversar não é suficiente para fazer o trabalho, e você precisa colaborar como em 1999, a ajuda está apenas a um telefonema de distância.

Áudio de compartilhamento ao vivo do VS

Embora o VS Live Share não esteja tentando reinventar o bate-papo, ele reinventa seu telefone. Tipo de.

Com a extensão de áudio VS Live Share, você pode ligar para alguém diretamente e fazer bate-papo por voz de dentro do VS Code.

A outra pessoa receberá uma solicitação para participar da sua chamada.

Você verá um ícone de alto-falante na barra de status inferior quando estiver conectado a uma chamada. Você pode clicar nesse alto-falante para alterar seu dispositivo de áudio, silenciar-se ou desconectar-se da chamada.

A última dica que darei a você é provavelmente a mais importante, e não é um recurso sofisticado ou uma configuração obscura que você não sabia que existia.

Mude sua memória muscular

Temos anos de comportamento aprendido quando se trata de obter ajuda ou compartilhar nosso código. O estado das ferramentas de colaboração do desenvolvedor tem sido tão ruim por tanto tempo que estamos condicionados a colar código no Slack, iniciar chamadas desajeitadas pelo Skype que consistem principalmente em “diga-me quando você pode ver minha tela”, ou se aglomerar em torno de um monitor e apontar excessivamente, ou seja, estilo de fotografia.

A coisa mais importante que você pode fazer para tirar o máximo proveito do VS Live Share é realmente usar o VS Live Share. E terá que ser um esforço “consciente”.

Seu cérebro é bom em padrões. Você está constantemente reconhecendo e classificando o mundo ao seu redor com base nos padrões que identificou, e você é tão bom nisso que nem percebe que está fazendo isso. Você então desenvolve respostas padrão para esses padrões. Você forma instintos. É por isso que você adotará as velhas formas de colaboração sem sequer pensar no que está fazendo. Antes que você perceba, você estará em uma chamada do Skype com alguém compartilhando sua tela – mesmo se você tiver o Live Share instalado.

Eu escrevi muito sobre o VS Code e as pessoas me perguntam de tempos em tempos como elas podem ser mais produtivas com seu editor. Eu sempre digo a mesma coisa: da próxima vez que você pegar o mouse para fazer algo, pare. Você pode fazer isso com o teclado em vez disso? Você provavelmente pode. Procure o atalho e faça você mesmo usá-lo. No início, vai ser mais lento, mas se você estiver disposto a adotar deliberadamente um comportamento diferente, ficará surpreso com a rapidez com que seu cérebro adotará a maneira mais produtiva de fazer algo.

O mesmo vale para o Live Share. Você estará em uma chamada compartilhando sua tela quando ocorrer que você pode estar usando o Live Share. Nesse momento, pare; clique no botão "Compartilhar" na parte inferior do VS Code.

Sim, a pessoa do outro lado pode não ter a extensão instalada. Sim, pode demorar um pouco para configurá-lo. Mas se você trabalhar para estabelecer esse comportamento agora, da próxima vez que fizer isso, ele “simplesmente funcionará” e não demorará muito para que você nem precise pensar sobre isso, e nesse ponto, você terá finalmente alcançado aquele nível de colaboração “Anonymous Hippo”.

Mais recursos

• Pacote de extensão VS Live Share
• Documentos de compartilhamento ao vivo do VS Code
• Extensões e suporte ao ecossistema
• Introdução ao VS Live Share