VS Code

La extensión de Text.js para VS Code muestra el fotograma de la consola junto al código. Refleja la app que se ejecuta con text dev o renderiza el archivo abierto cuando no hay nada en ejecución. También añade generación de estructuras de App Router, fragmentos de código y enlaces para los códigos de error TX###.

#Instalación

Instala Text.js desde Visual Studio Marketplace. En VS Code, abre la vista «Extensiones» (⌘⇧X) y busca textjs.vscode-textjs, o ejecuta:

code --install-extension textjs.vscode-textjs

Se activa en cualquier carpeta que contenga una app de Text.js: un text.config.ts, o un paquete que dependa de @textjs/app y tenga un directorio app/. También funciona en monorepos con varias apps.

#Vista previa en vivo

Abre un page.tsx, un layout.tsx o un componente y ejecuta Text.js: Open Preview (⌘K V), o haz clic en el botón de vista previa de la barra de título del editor. El panel dibuja el fotograma con la misma interfaz de DevTools y las mismas celdas Menlo que la consola de tu navegador.

La vista previa obtiene sus fotogramas de una de dos fuentes. El indicador de la barra de herramientas muestra cuál está activa:

auto (el valor predeterminado) usa el modo en vivo cuando puede y el modo sin navegador en caso contrario. Fija uno de los dos desde el indicador o con textjs.preview.mode.

#Teclado

Haz clic en la consola para enviar pulsaciones a la app: las flechas, Tab, los atajos, la escritura y el pegado funcionan como en el navegador. Haz clic fuera de la consola para dejar de enviarlas. Los atajos del editor, como ⌘P y ⌘⇧P, siguen llegando a VS Code. Desplazarte sobre la consola envía eventos de rueda.

En el campo de dirección puedes escribir una ruta, como /deployments/dpl_a1, para navegar en cualquiera de las dos fuentes.

#Modo en vivo

Mientras hay una vista previa abierta, el servidor de desarrollo pide a las pestañas conectadas que transmitan sus fotogramas. Las pestañas solo envían las filas que han cambiado y dejan de enviar al cerrarse la vista previa, por lo que una app sin vista previa abierta no tiene ningún coste adicional. Al guardar un archivo se aplica Fast Refresh y la vista previa se actualiza junto con la pestaña.

Activa Seguir (textjs.preview.followEditor) para llevar la pestaña del navegador a la ruta del page.tsx que estás editando.

Las pestañas en segundo plano no reciben fotogramas de animación, por lo que normalmente conservan sus fotogramas hasta que vuelven a ser visibles. Mientras una vista previa está observando, una pestaña en segundo plano dibuja un fotograma en cuanto llega una entrada, así que escribir en la vista previa sigue actualizándola. Las animaciones de una pestaña en segundo plano se actualizan aproximadamente una vez por segundo. Pon la app en su propia ventana para mantener su fluidez.

#Modo sin navegador

La extensión inicia un pequeño ejecutor en tu proyecto. Carga los archivos de ruta mediante el Vite y el @textjs/app del propio proyecto, por lo que los alias, TypeScript y JSX se comportan igual que en text dev. Monta el App Router en la ruta del archivo abierto, con sus layouts, usando un historial en memoria:

Las llamadas fetch("/api/...") al mismo origen ejecutan tus manejadores route.ts en el mismo proceso, como con text run. La cuadrícula se adapta al tamaño del panel y guardar cualquier archivo de la app vuelve a renderizarla. Los errores aparecen encima del fotograma, con enlaces a sus páginas TX###.

#Comandos

Los comandos de generación de estructuras también están en el menú contextual de las carpetas del Explorador. Aceptan segmentos de App Router como settings, blog/[slug], docs/[...path] y (marketing)/about, y no permiten poner un page y un route.ts en el mismo segmento. Los proyectos JavaScript (sin tsconfig.json) reciben archivos .jsx y .js.

#Fragmentos de código

#Códigos de error

Pasa el cursor sobre un código TX### en cualquier lugar: en el código fuente, los registros, el panel «Salida» o una traza de pila pegada. La información emergente muestra su título, mensaje y paquete, con un enlace a su página en textjs.org. Cada código también es un enlace (⌘-clic).

#Barra de estado

El elemento ▼ muestra el estado del servidor de desarrollo y el tamaño de la cuadrícula de la consola, por ejemplo ▼ :3000 120×36. Las pestañas comunican su tamaño al servidor de desarrollo cada vez que cambia, incluso sin una vista previa abierta. Haz clic en el elemento para acceder a los comandos principales.

#Configuración

#Confianza del área de trabajo

La vista previa y el servidor de desarrollo ejecutan el código de tu proyecto (su configuración de Vite, text.config.* y sus componentes). En el modo restringido, la extensión solo ofrece fragmentos de código, generación de estructuras y enlaces de errores, e ignora textjs.preview.runtime, textjs.devServer.command y textjs.devServer.url de la configuración del área de trabajo. Marca el área de trabajo como de confianza para activar la vista previa. Nunca se muestran vistas previas de archivos fuera de las carpetas de tu área de trabajo.

#Funcionamiento

text dev sirve tres endpoints para editores. Solo responden a conexiones de bucle local dirigidas a un host de bucle local (localhost, 127.0.0.1, [::1]), y solo a solicitudes sin Origin o con el origen del propio servidor de desarrollo. Se rechazan las solicitudes entre sitios y las solicitudes no-cors de los navegadores:

Las pestañas envían fotogramas al servidor de desarrollo a través del socket HMR de Vite, que requiere un token por servidor. El formato de transmisión se exporta desde @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) por si quieres crear tu propio visor. Nada de esto existe en la salida de text build.