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 не будет опубликован. Обязательные поля помечены *

https://beverlywoodbakery.com/ deneme bonusugrandpashabetgrandpashabet1winküçükçekmece escorthttps://www.bakirkoyfal.com/kagithane escortatakoy escortatakoy escorthttps://halkaliescortmanken.xyz/çeşme alaçatı escorttaraftarium24dumanbetdeneme bonusu veren sitelerkadıköy escortümraniye escortistanbul escortbasaksehir escortşişli escortholiganbethttps://www.escortbayanlariz.net/imajbetmavibetextrabetromabetromabetromabetkartal escorttipobetultrabet twitterportobetcasibommecidiyeköy escorthttps://www.newstrendline.com/deneme bonusu veren casino siteleribatumi escortcasibom girişcasibom güncel girişcasibomholiganbetholiganbetcasibomhttps://vheshop.com/casibombetwooncasibomsahabetbetpark girişmavibet girişsekabet girişnakitbahiszbahisbahiscomotobetbetturkeybets10sheratonbetkalebetcasibomaresbetgrandpashabetbetcioextrabetimajbetmavibetnakitbahismahmutbey escortDeneme Bonusugrandpashabetdeneme bonusu veren sitelergrandpashabetgrandpashabetvaycasinograndpashabetcasino siteleriDeneme Bonusu Veren SitelerAlanya EscortDeneme Bonusu Veren SitelervaycasinonakitbahisGrandpashabetHoliganbetbetgarantiperabetsekabetholiganbet girişcasibombetgarantimariobetsekabet girişcasibombetcio girişvaycasinobetcio girişmavibetbetwoongrandpashabetcasibomcasibom girişdeneme bonusu veren sitelergrandpashabetdeneme bonusu veren sitelerholiganbetbahsegeldeneme bonusu veren sitelereditörbet betparktimebetpadişahbetbettiltkumar sitelerideneme bonusudeneme bonusutürk ifşaHoliganbet girişHoliganbet girişpusulabet1xbetvbetvaycasino girişvaycasino güncel girişbaklavarestbetmarsbahisklasbahisdeneme bonusuvaycasinodeneme bonususdsdgrandpashabetsahabet girişholiganbet girişotobetholiganbet güncel giriş1xbetgrandpashabetcasibom
Прокрутить вверх