#расширение и #статья дня

Вот эта вот странная блок-схема на иллюстрации — сгенерированное VS Code-расширением ReacTree дерево компонентов одной из частей нашего продукта.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree

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

Расширение сыроватое. Например, оно пока не умеет в условный рендеринг и обрывает построение. Ну, спасибо, хотя бы, что не падает. Хотя схему React Router-а оно понимает прекрасно (на иллюстрации).

Помимо построения дерева, показывает пропсы компонентов. Может быть удобно. Желаю им всяческого развития, короче.

А ещё они заодно написали статью о том, как разрабатывать расширения VS Code, использующие WebView: https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013 Возможно, кому-то будет полезно.

Делитесь схемами, котаны 🙂

#react #tree #vscode #extension

#фишка дня

Крупная! ...для ngrok 🫠

TL;DR Теперь можно сделать локальные порты доступными снаружи в процессе разработки и быстро показать процесс коллеге или заказчику прямо из VS Code!

Если кто не знает, ngrok это средство для пробрасывания (туннелирования) ваших локальных портов наружу, с предоставлением уникального домена. Вот тут я писал: https://t.me/htmlshit/438

Так вот, Microsoft решила отобрать у ngrok значительную долю пользователей, встроив ровно эти же возможности в... VS Code! Прямо в панель состояния.

Вот, глядите, августовский список изменений: https://code.visualstudio.com/updates/v1_82#_builtin-port-forwarding

И статья с подробностями, как использовать: https://code.visualstudio.com/docs/editor/port-forwarding

Порт может быть публичный, а может — приватный. Ну и требуется авторизация через GitHub.

В общем, MS продолжает делать нам хорошо. Но, возможно, ngrok-у станет чуть хуже.

P. S. С Днём программиста, котаны и котанессы!

#vscode #ngrok #port #forwarding

#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач

#фишка дня

Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.

А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.

В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)

#vscode #minimap

#vscode дня

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

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

#фишка дня

...от Никиты Голубова aka @midfilecrisis в Twitter.

В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.

Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.

Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

...более 6 миллионов установок, ик.

#css #webstorm #phpstorm #vscode #plugin #extension #бородач

#расширение дня

Дал слабину и где-то в глубине кода указал any?

Воспользовался DefinitelyTyped, не проверив?

И при этом не используешь WebStorm?

Есть решение! Расширение для VS Code any-xray от Дана Вандеркама: https://marketplace.visualstudio.com/items?itemName=danvk.any-xray

Про DefinitelyTyped не шутка, всякое бывает: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b0ad06b09bd5547cf6f01a8355cbcb309d3f5e24/types/find-package-json/package-json.d.ts#L449

У React в типах, кстати, тоже.

Это не плохо само по себе, не все хотят заниматься ментальной гимнастикой там, где в целом можно спихнуть проверки на пользователя типов.

Но подсветить такие случаи, чтобы не попасть впросак — удобно.

#vscode #typescript

#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач

#фишка дня

Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://t.me/htmlshit/3061

Суть в том, что ты приближаешься к проблемному коммиту с двух сторон.

А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?

Да везде, буквально.

И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.

Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.

Редактор отключит все расширения и перезагрузится, спросив о проблеме — видна или нет. Каждый раз вам нужно будет подтвердить её наличие, или опровергнуть. И так несколько раз.

А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.

Как вам идея, котаны?

#vscode #extension #bisect

#фишка дня

Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.

А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.

В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)

#vscode #minimap #бородач

#фишка дня

Поменяли какую-то настройку в VS Code, и теперь всё сломалось?

Вообще не проблема! Вводим в поиск @modified и — вуаля — видим все настройки, отличные от дефолтных!

Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.

#vscode #settings #json

#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач