Inertia References

Extensión para Visual Studio Code que permite encontrar y navegar rápidamente a las referencias de una página de Inertia.js en un proyecto Laravel.

¿Qué hace?

Cuando abres un archivo .vue que pertenece a resources/js/Pages, la extensión obtiene su nombre de Inertia y busca dónde se utiliza en los controladores PHP.

Por ejemplo, para:

resources/js/Pages/Proceso/Index.vue

La extensión obtiene:

Proceso/Index

Y busca referencias como:

Inertia::render('Proceso/Index')

Después muestra las referencias mediante CodeLens en la parte superior del archivo:

3 referencias de Inertia

Al seleccionar una referencia, puedes navegar directamente al archivo y línea donde se encuentra.

Ejemplo

Dado el archivo:

resources/js/Pages/Proceso/Index.vue

y los siguientes controladores:

return Inertia::render('Proceso/Index');

return Inertia::render('Proceso/Index');

La extensión mostrará las referencias en el editor y permitirá navegar hacia ellas.

Tecnologías

• TypeScript
• Visual Studio Code Extension API
• Laravel
• Inertia.js
• Vue.js

Desarrollo

Instalar dependencias:

npm install

Compilar:

npm run compile

Para probar la extensión:

1. Abrir el proyecto en VS Code.
2. Presionar F5.
3. Se abrirá una nueva ventana llamada Extension Development Host.
4. Abrir un archivo .vue perteneciente a una página de Inertia.
5. Las referencias aparecerán mediante CodeLens.

Objetivo

El objetivo de la extensión es facilitar la navegación entre las páginas de Inertia y los controladores Laravel que las renderizan, evitando tener que buscar manualmente:

Inertia::render(...)

en todo el proyecto.