GitHub.dev: 10 крутых возможностей

Недавно GitHub выпустил веб-редактор github.dev. Находясь в любом репозитории на GitHub, вы можете нажать на клавиатуре точку — и этот репозиторий откроется в VSCode-окружении прямо в вашем браузере. Это существенно улучшает продуктивность чтения, редактирования и распространения кода на GitHub.

Примечание. Кроме нажатия точки, можно еще изменить URL репозитория в адресной строке, сменив «.com» на «.dev». Эффект будет тот же.

https://twitter.com/github/status/1425505817827151872

Поскольку github.dev основан на VS Code, вы можете настроить собственные сочетания клавиш, цветовую тему, значки файлов, сниппеты и многое другое. Даже еще круче: можно включить синхронизацию настроек между VS Code, github.dev и Codespaces. Таким образом, где бы вы ни читали (редактировали) код, вы будете чувствовать себя, как дома.

Но github.dev открывает дополнительные (и не столь очевидные) возможности.

Если вы хотите дополнить чем-то github.com, вам не нужно полагаться на расширения браузера или сторонние сервисы. Вы можете улучшить GitHub напрямую, воспользовавшись преимуществами своего любимого редактора кода и его плодовитой экосистемой.

Как именно это выглядит, мы рассмотрим на десяти примерах.

1. Внешние (глубинные) ссылки

Нажать заветную точку можно не только находясь на странице репозитория, но также и просматривая отдельный файл на GitHub.com.

Но на самом деле все еще интереснее.

Можно выделить какой-то код (нажимая на номера строк) в уже открытом файле и тогда нажать точку. В открывшемся VS Code в фокусе будет именно этот файл, а выделенный код будет подсвечен.

А затем вы сможете поделиться ссылкой именно на этот файл с подсвеченным выделением.

https://twitter.com/tylerleonhardt/status/1430559579218137096

Демо: ссылка на файл с выделенным кодом в репозитории расширения GitDoc.

2. Ревью пул-реквестов

Можно нажать точку, просматривая пул-реквест. Это позволит вам проверять PR в полнофункциональном, многофайловом виде.

От редакции Techrocks. Советуем почитать статью «Руководство по код-ревью для начинающих».

Вы сможете просматривать комментарии и отвечать на них, предлагать изменения и даже одобрить (или смержить) пул-реквест прямо из редактора.

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

https://twitter.com/tweetsofsumit/status/1428266771807625226

Демо: кликните по ссылке, чтобы просмотреть PR на добавление regex-парсера в расширение CodeTour.

3. Редактирование картинок и диаграмм

Помимо редактирования текстовых файлов, VS Code также допускает использование расширений для custom editors. С помощью этих «пользовательских редакторов» можно редактировать файлы любого типа. Например, установив расширение Drawio, вы сможете просматривать и редактировать диаграммы.

https://twitter.com/hediet_dev/status/1425844785240236032

А если установите расширение Luna Paint, можно будет редактировать изображения (PNG, JPG и т. п.).

https://twitter.com/tyriar/status/1430878752750280709

В каждом таком случае ваши правки будут автоматически сохранены. Вы сможете сделать коммит/пуш изменения в ваш GitHub-репозиторий при помощи вкладки Source Control.

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

Все это превращает github.dev в удобную среду для работы над любыми файлами, хранящимися на GitHub.

4. Экскурсии по кодовой базе

Изучение новой кодовой базы — нелегкое дело. Обычно бывает непонятно, с чего начать и как отдельные файлы и папки связаны друг с другом.

Пользуясь github.dev, можно установить расширение CodeTour. Оно позволяет создавать и проигрывать «экскурсии» по коду.

Поскольку github.dev доступен в браузере, любой член команды или вашего сообщества сможет просматривать эти экскурсии, не устанавливая ничего локально.

https://twitter.com/lostintangent/status/1425901618780729345

Демо: откройте этот репозиторий и установите CodeTour. Вы получите предложение пройти ознакомительный тур.

5. Сниппеты кода и гисты

Гисты — популярный способ управлять сниппетами кода, конфигами и заметками, а также делиться ими.

В github.dev можно установить расширение GistPad, чтобы просматривать и редактировать гисты. Это позволяет поддерживать сниппеты кода в разных репозиториях и иметь к ним доступ как в приложении, так и в браузере.

https://twitter.com/lostintangent/status/1426583542432112647

6. Веб-песочницы и туториалы

«Песочницы» (например, CodePen, JSFiddle) — популярный инструмент для изучения языков программирования и библиотек. Также они позволяют делиться результатами своего труда с другими людьми.

В github.dev можно установить расширение CodeSwing и начать создавать приложения («swings») в песочнице, пользуясь при этом настройками своего редактора и сохраняя свои файлы на GitHub.

https://twitter.com/lostintangent/status/1426285127244468226

Демо: откройте этот репозиторий и установите CodeSwing + CodeTour. через несколько секунд появится среда-песочница.

7. Заметки и база знаний

VS Code — markdown-редактор мирового класса. И ничто не мешает вам начать использовать github.dev для редактирования и просмотра всех ваших профессиональных заметок и документации.

А установив расширение WikiLens, вы сможете редактировать записи, как в Roam/Obsidian. Это поможет вам пользоваться всеми преимуществами экосистемы и настроек VS Code для поддержки базы знаний, хранящейся на GitHub.

https://twitter.com/lostintangent/status/1429483662257446916

8. Презентации

Когда привыкнете использовать github.dev для ведения заметок в markdown, вы осознаете, насколько это просто и элегантно. И вам неизбежно захочется иметь возможность создавать и другие документы в этой разметке.

Установив расширение Marp, вы сможете начать создавать слайды, пользуясь markdown, и представлять их прямо в браузере. Я скомбинировал это с использованием GistPad (для хранения презентаций в виде гист), и могу сказать, что это потрясающее подспорье в проведении совещаний.

https://twitter.com/y_hatt/status/1433893272879964160

9. Jupyter Notebooks

Для изучения программирования и расшаривания кода есть не только песочницы. Аналогичный функционал имеет Jupyter notebooks.

Открыв файл с расширением .ipynb в github.dev, вы сможете просматривать ячейки и кешированные output выбранного блокнота.

А если установите расширение Pyodide, сможете запускать Python-код прямо в браузере!

https://twitter.com/dynamicwebpaige/status/1425502379777019909

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]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх