LocatorJS — это расширение для браузера, которое позволяет пользователям щелкнуть любой компонент в браузере и просмотреть его в своем редакторе. Это ускорит разработку и облегчит отладку и разработку.

Настраивать

LocatorJS поддерживает React (подходы data-id и devtools), а также SolidJS, Preact, и они работают над Svelte и Vue, с которыми вы можете поэкспериментировать прямо сейчас.

Установка VueJs

Установите расширение для браузера (Chrome, Edge, Brave, Opera, Firefox) ИЛИ Установите Locator как пакет к вашему проекту.

pnpm add -D @locator/runtime

Добавьте это в main.js:

import setupLocatorUI from "@locator/runtime"
if (process.env. NODE_ENV === "development" ) 
{ 
 setupLocatorUI ( { adapter : "vue" , } )
}

Применение

Теперь все, что нам нужно сделать, это открыть наш браузер и удерживать Alt или Option при перемещении курсора, чтобы проверить все компоненты и элементы. Нажмите на компонент, который вы хотите, чтобы перейти к редактору! Удачного кодирования!

Открытый источник

Весь проект является проектом с открытым исходным кодом под лицензией MIT. Если вы найдете мой контент полезным, подписывайтесь на меня в Github или Twitter.

Первоначально опубликовано на https://www.blog.dayrakiarts.com 4 октября 2022 г.