VS Code

Die Text.js-Erweiterung für VS Code zeigt deinen Konsolen-Frame neben dem Code. Sie spiegelt die unter text dev laufende App oder rendert die offene Datei selbst, wenn nichts läuft. Außerdem bietet sie App Router-Vorlagen, Snippets und Links zu TX###-Fehlercodes.

#Installation

Installiere Text.js aus dem Visual Studio Marketplace. Öffne in VS Code die Ansicht „Erweiterungen“ (⌘⇧X) und suche nach textjs.vscode-textjs, oder führe Folgendes aus:

code --install-extension textjs.vscode-textjs

Sie aktiviert sich in jedem Ordner, der eine Text.js-App enthält: eine text.config.ts oder ein Paket, das von @textjs/app abhängt und ein app/-Verzeichnis hat. Monorepos mit mehreren Apps funktionieren ebenfalls.

#Live-Vorschau

Öffne eine page.tsx, layout.tsx oder Komponente und führe Text.js: Open Preview (⌘K V) aus, oder klicke auf die Vorschau-Schaltfläche in der Titelleiste des Editors. Das Panel zeichnet den Frame mit derselben DevTools-Oberfläche und denselben Menlo-Zellen wie deine Browser-Konsole.

Die Vorschau bezieht ihre Frames aus einer von zwei Quellen. Die Kennzeichnung in der Werkzeugleiste zeigt, welche aktiv ist:

auto (der Standard) nutzt Live, wenn möglich, andernfalls Headless. Lege eine der beiden Quellen über die Kennzeichnung oder mit textjs.preview.mode fest.

#Tastatur

Klicke in die Konsole, um Tasteneingaben an die App zu senden: Pfeiltasten, Tab, Tastenkürzel, Tippen und Einfügen funktionieren wie im Browser. Klicke außerhalb der Konsole, um das zu beenden. Editor-Tastenkürzel wie ⌘P und ⌘⇧P gehen weiterhin an VS Code. Scrollen über der Konsole sendet Mausrad-Ereignisse.

Im Adressfeld kannst du eine Route wie /deployments/dpl_a1 eingeben, um in beiden Quellen zu navigieren.

#Live-Modus

Solange eine Vorschau geöffnet ist, fordert der Dev-Server verbundene Tabs auf, ihre Frames zu streamen. Tabs senden nur geänderte Zeilen und hören auf, sobald die Vorschau geschlossen wird, sodass für eine App ohne offene Vorschau kein Aufwand entsteht. Das Speichern einer Datei läuft über Fast Refresh, und die Vorschau aktualisiert sich zusammen mit dem Tab.

Aktiviere Follow (textjs.preview.followEditor), um den Browser-Tab zur Route der page.tsx zu navigieren, die du gerade bearbeitest.

Hintergrund-Tabs erhalten keine Animationsframes und halten ihre Frames deshalb normalerweise zurück, bis sie wieder sichtbar sind. Solange eine Vorschau zuschaut, zeichnet ein Hintergrund-Tab einen Frame, sobald eine Eingabe eintrifft, sodass Tippen in der Vorschau weiterhin Aktualisierungen auslöst. Animationen in einem Hintergrund-Tab aktualisieren sich etwa einmal pro Sekunde. Öffne die App in einem eigenen Fenster, damit sie flüssig bleiben.

#Headless-Modus

Die Erweiterung startet einen kleinen Runner in deinem Projekt. Er lädt Route-Dateien über das projekteigene Vite und @textjs/app, sodass sich Aliasse, TypeScript und JSX genauso verhalten wie in text dev. Er bindet den App Router mit seinen Layouts an der Route der offenen Datei ein und verwendet dabei einen Verlauf im Arbeitsspeicher:

fetch("/api/...")-Aufrufe mit demselben Ursprung führen deine route.ts-Handler im selben Prozess aus, wie bei text run. Das Raster folgt der Panelgröße, und das Speichern einer beliebigen Datei in der App rendert sie erneut. Fehler erscheinen über dem Frame, mit Links zu ihren TX###-Seiten.

#Befehle

Die Befehle zum Erstellen von Vorlagen findest du auch im Explorer-Kontextmenü für Ordner. Sie akzeptieren App Router-Segmente wie settings, blog/[slug], docs/[...path] und (marketing)/about und lassen nicht zu, dass eine page und eine route.ts im selben Segment liegen. JavaScript-Projekte (ohne tsconfig.json) erhalten .jsx- und .js-Dateien.

#Snippets

#Fehlercodes

Bewege den Mauszeiger über einen TX###-Code: im Quelltext, in Logs, im Panel „Ausgabe“ oder in einem eingefügten Stacktrace. Die eingeblendete Information zeigt Titel, Meldung und Paket sowie einen Link zur zugehörigen Seite auf textjs.org. Jeder Code ist auch ein Link (⌘-Klick).

#Statusleiste

Der Eintrag ▼ zeigt den Zustand des Dev-Servers und die Rastergröße der Konsole, zum Beispiel ▼ :3000 120×36. Tabs melden dem Dev-Server jede Größenänderung, auch ohne offene Vorschau. Klicke auf den Eintrag, um die wichtigsten Befehle aufzurufen.

#Einstellungen

#Arbeitsbereichsvertrauen

Die Vorschau und der Dev-Server führen den Code deines Projekts aus (seine Vite-Konfiguration, text.config.* und Komponenten). Im eingeschränkten Modus bietet die Erweiterung nur Snippets, Vorlagen und Fehlerlinks an und ignoriert textjs.preview.runtime, textjs.devServer.command und textjs.devServer.url aus den Arbeitsbereichseinstellungen. Vertraue dem Arbeitsbereich, um die Vorschau zu aktivieren. Dateien außerhalb deiner Arbeitsbereichsordner erscheinen nie in der Vorschau.

#Funktionsweise

text dev stellt drei Endpunkte für Editoren bereit. Sie antworten nur auf Loopback-Verbindungen, die an einen Loopback-Host (localhost, 127.0.0.1, [::1]) adressiert sind, und nur auf Anfragen ohne Origin oder mit dem Ursprung des Dev-Servers. Websiteübergreifende Anfragen und no-cors-Anfragen von Browsern werden abgelehnt:

Tabs senden Frames über den HMR-Socket von Vite an den Dev-Server, der ein serverspezifisches Token erfordert. Das Übertragungsformat wird aus @textjs/app/frame-protocol exportiert (FrameEncoder, FrameDecoder, parseInputMessage), falls du eine eigene Anzeige bauen möchtest. Nichts davon ist in der Ausgabe von text build enthalten.