Как я сделал «клик по элементу → открыть в VS Code» за один вечер

Вот важная новость с фронта ИИ: sozercanie_kosmosa 45 минут назад Как я сделал «клик по элементу → открыть в VS Code» за один вечер Простой 6 мин 1. 5K JavaScript * ReactJS * Веб-разработка * Open source * Туториал Началось всё банально. Зашёл коллега, говорит: «Где у нас хлебные крошки в шапке лежат?

Проект — около 150 компонентов, всё именуется по-своему, структура папок местами загадочная. Я начал тыкать в React DevTools, искать по тексту «Breadcrumb» в файлах… В общем, минут через пять нашёл. Это в очередной раз раздражало.

Технические детали

Так появился vite-plugin-debug-meta — плагин, который позволяет зажать Ctrl + Shift, навести на любой элемент в браузере, кликнуть — и нужный файл откроется в редакторе на нужной строке. npm install -D vite-plugin-debug-meta Сначала я потратил час на поиск готового решенияЕсли честно, я был уверен, что такое уже сто раз написали. Порылся в npm — есть react-dev-inspector, есть vite-plugin-react-inspector… Смотришь на зависимости — там тянется половина вселенной, или нужен специальный babel-preset, или работает только с определённой версией React.

Для нашего проекта ничего не подошло без плясок. В итоге решил написать своё. Оказалось, что базовую версию реально сделать за один вечер.

Вот что из этого вышло. Секрет, о котором я сам не знал годПервое открытие — у Vite из коробки есть эндпоинт /__open-in-editor. Честно, я работал с Vite больше года и понятия не имел о его существовании.

Отраслевые последствия

Его используют Vue DevTools и кое-что ещё под капотом, но нигде особо не афишируют. Работает просто:/__open-in-editor? file=src/components/Header.

tsx:42:1 Vite принимает этот запрос в режиме npm run dev и через пакет launch-editor (его написал Эван Ю) открывает ваш редактор на нужной строке. Он сам пытается угадать запущенную IDE, а если не угадывает — читает переменную LAUNCH_EDITOR. Попробуйте прямо сейчас в консоли вашего Vite-проекта:fetch('/__open-in-editor?

tsx:1:1 Скорее всего, VS Code (или что у вас там) уже открылся. Это магия, и именно на ней держится весь плагин — никаких вебсокетов, никакого отдельного сервера. Что плагин делает и какИдея в двух словах:На этапе сборки Babel обходит все .

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.