O que é edição colaborativa de código?

A edição colaborativa de código permite que vários desenvolvedores trabalhem no mesmo código ao mesmo tempo, cada um no próprio navegador. É útil para programação em dupla, entrevistas, ensino e depuração de um trecho de código em conjunto, sem precisar configurar um IDE compartilhado ou trocar arquivos.

Para manter a cópia de todos idêntica, as alterações são enviadas como pequenas edições, em vez de arquivos inteiros, e um servidor decide a ordem em que elas são aplicadas. Edições feitas ao mesmo tempo são ajustadas umas às outras, para que ambas sejam preservadas.

Descrição da ferramenta

Esta ferramenta é um editor compartilhado de TypeScript com realce de sintaxe. Abra-o e envie o link: todos na sala editam o mesmo código em tempo real, veem os cursores uns dos outros e podem validar ou formatar o código para todos com um clique.

A validação verifica a sintaxe com o analisador Babel e seu plugin de TypeScript, que reconhecem anotações de tipo, interfaces, genéricos e enums. A formatação usa o analisador de TypeScript do Prettier, e o código formatado substitui apenas as linhas que foram alteradas, para que o que as outras pessoas digitarem nesse meio-tempo permaneça no lugar.

Recursos

  • Edição em tempo real - as alterações de todos aparecem instantaneamente e são mescladas quando as pessoas digitam ao mesmo tempo
  • Cursores e seleções - veja onde cada pessoa está, na cor exibida ao lado do nome dela
  • Validar - verifica a sintaxe de TypeScript e mostra o primeiro erro, com a linha e a coluna
  • Formatar - reformata o código com o Prettier para todos na sala
  • Copiar e baixar - guarde uma cópia do código como arquivo .ts

Como funciona

Quando a página é aberta, ela cria uma sala no servidor de sincronização e coloca o link na barra de endereço. Todos que abrirem o link entrarão na mesma sala e verão o mesmo documento.

Cada alteração é enviada ao servidor como uma pequena descrição do que mudou - quais caracteres foram inseridos ou excluídos e em que posição - em vez do texto inteiro. O servidor coloca as alterações de todos em uma única ordem, desloca uma alteração feita sobre uma versão mais antiga para depois das alterações anteriores e envia o resultado a todos os demais. O que você digita aparece imediatamente, e as alterações das outras pessoas são mescladas ao redor do que você digitou, para que ninguém perca o que escreveu quando duas pessoas editam ao mesmo tempo.

O documento é mantido apenas na memória do servidor enquanto a sala está aberta. Se você recarregar a página, voltará à sala com o texto como estava; quando todos saírem, a sala e seu texto serão apagados.

Limitações

  • Uma sala comporta até 20 pessoas e 100.000 caracteres.
  • Nada é armazenado depois que uma sala é fechada. Baixe o texto antes que a última pessoa saia.
  • Alterações muito rápidas ou muito grandes, como colar o documento inteiro várias vezes seguidas, são recusadas, e o editor recarrega o texto da sala.
  • Abrir o link de uma sala em outro editor colaborativo (por exemplo, uma sala de SQL no editor de JavaScript) exibe “Sala não encontrada”: cada sala pertence a uma única linguagem.
  • A validação verifica apenas a sintaxe, não os tipos: códigos que não seriam compilados por causa de um erro de tipo ainda passam na validação. JSX (.tsx) não é compatível.