Недавно GitHub выпустил веб-редактор github.dev. Находясь в любом репозитории на GitHub, вы можете нажать на клавиатуре точку — и этот репозиторий откроется в VSCode-окружении прямо в вашем браузере. Это существенно улучшает продуктивность чтения, редактирования и распространения кода на GitHub.
Примечание. Кроме нажатия точки, можно еще изменить URL репозитория в адресной строке, сменив «.com» на «.dev». Эффект будет тот же.
Поскольку github.dev основан на VS Code, вы можете настроить собственные сочетания клавиш, цветовую тему, значки файлов, сниппеты и многое другое. Даже еще круче: можно включить синхронизацию настроек между VS Code, github.dev и Codespaces. Таким образом, где бы вы ни читали (редактировали) код, вы будете чувствовать себя, как дома.
Но github.dev открывает дополнительные (и не столь очевидные) возможности.
Если вы хотите дополнить чем-то github.com, вам не нужно полагаться на расширения браузера или сторонние сервисы. Вы можете улучшить GitHub напрямую, воспользовавшись преимуществами своего любимого редактора кода и его плодовитой экосистемой.
Как именно это выглядит, мы рассмотрим на десяти примерах.
1. Внешние (глубинные) ссылки
Нажать заветную точку можно не только находясь на странице репозитория, но также и просматривая отдельный файл на GitHub.com.
Но на самом деле все еще интереснее.
Можно выделить какой-то код (нажимая на номера строк) в уже открытом файле и тогда нажать точку. В открывшемся VS Code в фокусе будет именно этот файл, а выделенный код будет подсвечен.
А затем вы сможете поделиться ссылкой именно на этот файл с подсвеченным выделением.
Демо: ссылка на файл с выделенным кодом в репозитории расширения GitDoc.
2. Ревью пул-реквестов
Можно нажать точку, просматривая пул-реквест. Это позволит вам проверять PR в полнофункциональном, многофайловом виде.
От редакции Techrocks. Советуем почитать статью «Руководство по код-ревью для начинающих».
Вы сможете просматривать комментарии и отвечать на них, предлагать изменения и даже одобрить (или смержить) пул-реквест прямо из редактора.
Потенциально это поможет уменьшить количество поверхностных ревью. Разработчики получают лучшие инструменты для проверки кода, а необходимость клонировать ветки или переключаться на них отпадает.
Демо: кликните по ссылке, чтобы просмотреть PR на добавление regex-парсера в расширение CodeTour.
3. Редактирование картинок и диаграмм
Помимо редактирования текстовых файлов, VS Code также допускает использование расширений для custom editors. С помощью этих «пользовательских редакторов» можно редактировать файлы любого типа. Например, установив расширение Drawio, вы сможете просматривать и редактировать диаграммы.
А если установите расширение Luna Paint, можно будет редактировать изображения (PNG, JPG и т. п.).
В каждом таком случае ваши правки будут автоматически сохранены. Вы сможете сделать коммит/пуш изменения в ваш GitHub-репозиторий при помощи вкладки Source Control.
Кроме того, вы сможете поделиться с коллегами внешней ссылкой на изображение или диаграмму. Если у них будет установлено такое же расширение, они смогут работать над этим изображением или диаграммой вместе с вами.
Все это превращает github.dev в удобную среду для работы над любыми файлами, хранящимися на GitHub.
4. Экскурсии по кодовой базе
Изучение новой кодовой базы — нелегкое дело. Обычно бывает непонятно, с чего начать и как отдельные файлы и папки связаны друг с другом.
Пользуясь github.dev, можно установить расширение CodeTour. Оно позволяет создавать и проигрывать «экскурсии» по коду.
Поскольку github.dev доступен в браузере, любой член команды или вашего сообщества сможет просматривать эти экскурсии, не устанавливая ничего локально.
Демо: откройте этот репозиторий и установите CodeTour. Вы получите предложение пройти ознакомительный тур.
5. Сниппеты кода и гисты
Гисты — популярный способ управлять сниппетами кода, конфигами и заметками, а также делиться ими.
В github.dev можно установить расширение GistPad, чтобы просматривать и редактировать гисты. Это позволяет поддерживать сниппеты кода в разных репозиториях и иметь к ним доступ как в приложении, так и в браузере.
6. Веб-песочницы и туториалы
«Песочницы» (например, CodePen, JSFiddle) — популярный инструмент для изучения языков программирования и библиотек. Также они позволяют делиться результатами своего труда с другими людьми.
В github.dev можно установить расширение CodeSwing и начать создавать приложения («swings») в песочнице, пользуясь при этом настройками своего редактора и сохраняя свои файлы на GitHub.
Демо: откройте этот репозиторий и установите CodeSwing + CodeTour. через несколько секунд появится среда-песочница.
7. Заметки и база знаний
VS Code — markdown-редактор мирового класса. И ничто не мешает вам начать использовать github.dev для редактирования и просмотра всех ваших профессиональных заметок и документации.
А установив расширение WikiLens, вы сможете редактировать записи, как в Roam/Obsidian. Это поможет вам пользоваться всеми преимуществами экосистемы и настроек VS Code для поддержки базы знаний, хранящейся на GitHub.
8. Презентации
Когда привыкнете использовать github.dev для ведения заметок в markdown, вы осознаете, насколько это просто и элегантно. И вам неизбежно захочется иметь возможность создавать и другие документы в этой разметке.
Установив расширение Marp, вы сможете начать создавать слайды, пользуясь markdown, и представлять их прямо в браузере. Я скомбинировал это с использованием GistPad (для хранения презентаций в виде гист), и могу сказать, что это потрясающее подспорье в проведении совещаний.
9. Jupyter Notebooks
Для изучения программирования и расшаривания кода есть не только песочницы. Аналогичный функционал имеет Jupyter notebooks.
Открыв файл с расширением .ipynb в github.dev, вы сможете просматривать ячейки и кешированные output выбранного блокнота.
А если установите расширение Pyodide, сможете запускать Python-код прямо в браузере!
10. Создание собственных расширений
Как вы наверняка заметили, по большей части рассмотренный здесь функционал добавляется при помощи расширений. Эти расширения кто-то создал и опубликовал.
Поскольку VS Code полностью расширяемый, вы можете создавать собственные расширения, используя простые JavaScript API. Эти расширения будут поддерживаться не только в десктопном редакторе, но и в github.dev.
Так что, если у вас есть отличная идея по улучшению продуктивности работы в GitHub, вас ничто не сдерживает: можете приступать к работе!
Итоги
Хотя для использования github.dev уже есть куча use cases, он еще на заре своего развития. Это означает, что стоит периодически инспектировать его экосистему на предмет новинок. В частности, я предвкушаю появление полной поддержки командной работы в режиме реального времени прямо в браузере.
Перевод статьи «10 Fun Things You Can Do With GitHub.dev».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]