Что такое совместное редактирование кода?

Совместное редактирование кода позволяет нескольким разработчикам одновременно работать над одним и тем же кодом, каждый — в своём браузере. Это удобно для парного программирования, собеседований, обучения и совместной отладки фрагмента кода — без настройки общей IDE и пересылки файлов.

Чтобы у всех была одна и та же копия, изменения передаются небольшими правками, а не целыми файлами, и сервер определяет порядок их применения. Правки, внесённые одновременно, согласуются друг с другом, поэтому сохраняются обе.

Описание инструмента

Этот инструмент — общий редактор TypeScript с подсветкой синтаксиса. Откройте его и отправьте ссылку: все участники комнаты редактируют один и тот же код в реальном времени, видят курсоры друг друга и могут одним нажатием проверить или отформатировать код для всех.

Проверка синтаксиса выполняется с помощью парсера Babel и его плагина TypeScript, поэтому распознаются аннотации типов, интерфейсы, обобщения и перечисления. Для форматирования используется парсер TypeScript из Prettier. Отформатированный код заменяет только изменившиеся строки, поэтому текст, который другие участники вводят в это время, остаётся на месте.

Возможности

  • Редактирование в реальном времени — изменения от всех участников появляются мгновенно и объединяются, даже если люди печатают одновременно
  • Курсоры и выделения — видно, где находится каждый участник; цвет курсора указан рядом с его именем
  • Проверка — проверяет синтаксис TypeScript и показывает первую ошибку с указанием строки и столбца
  • Форматирование — форматирует код с помощью Prettier для всех участников комнаты
  • Копирование и скачивание — сохраните копию кода в виде файла .ts

Как это работает

При открытии страницы на сервере синхронизации создаётся комната, а ссылка на неё появляется в адресной строке. Все, кто открывает эту ссылку, присоединяются к одной комнате и видят один и тот же документ.

Каждое изменение отправляется на сервер в виде краткого описания того, что изменилось: какие символы и где были вставлены или удалены, — вместо отправки всего текста. Сервер объединяет изменения всех участников в единую последовательность, перемещает изменение, сделанное на основе старой версии, за изменениями, поступившими раньше, а затем передаёт результат всем остальным. Введённый вами текст появляется сразу, а изменения других участников объединяются с ним, поэтому при одновременном редактировании ничего не теряется.

Документ хранится только в памяти сервера и только пока комната открыта. Если перезагрузить страницу, вы снова попадёте в комнату и увидите прежний текст. Когда все участники покинут комнату, она и её текст будут удалены.

Ограничения

  • В комнате могут находиться не более 20 человек, а её текст может содержать не более 100 000 символов.
  • После закрытия комнаты данные не сохраняются. Скачайте текст до того, как комнату покинет последний участник.
  • Слишком быстрые или объёмные изменения, например многократная вставка всего документа подряд, отклоняются, после чего редактор заново загружает текст комнаты.
  • Если открыть ссылку на комнату в другом совместном редакторе — например, открыть комнату SQL в редакторе JavaScript, — появится сообщение «Комната не найдена»: каждая комната предназначена для одного языка.
  • Проверка анализирует только синтаксис, а не типы: код, который не скомпилируется из-за ошибки типа, всё равно пройдёт проверку. JSX (.tsx) не поддерживается.