VS Code

VS Code向けのText.js拡張機能は、コードの隣にコンソールのフレームを表示します。text dev で実行中のアプリをミラーリングし、何も実行されていない場合は開いているファイル自体をレンダリングします。App Routerのひな形作成、スニペット、TX### エラーコードへのリンクも追加します。

#インストール

Visual Studio MarketplaceからText.jsをインストールします。VS Codeで「拡張機能」ビュー（⌘⇧X）を開いて textjs.vscode-textjs を検索するか、次のコマンドを実行します。

code --install-extension textjs.vscode-textjs

Text.jsアプリを含むフォルダーで有効になります。text.config.ts があるか、@textjs/app に依存し app/ ディレクトリーを持つパッケージがあるフォルダーが対象です。複数のアプリを含むモノレポにも対応しています。

#ライブプレビュー

page.tsx、layout.tsx、またはコンポーネントを開き、Text.js: Open Preview（⌘K V）を実行するか、エディターのタイトルバーにあるプレビューボタンをクリックします。パネルはブラウザーのコンソールと同じDevToolsの外観とMenloのセルでフレームを描画します。

プレビューは2つのソースのいずれかからフレームを取得します。ツールバーのバッジに、使用中のソースが表示されます。

auto（デフォルト）は、可能な場合はライブ、それ以外はヘッドレスを使用します。バッジまたは textjs.preview.mode で、どちらかに固定できます。

#キーボード

コンソールをクリックするとアプリにキー入力を送信できます。矢印キー、Tab、ショートカット、文字入力、貼り付けはすべてブラウザーと同様に動作します。停止するにはコンソールの外側をクリックします。⌘P や ⌘⇧P などのエディターのショートカットは、引き続きVS Codeに送られます。コンソール上でスクロールするとホイールイベントが送信されます。

アドレス欄に /deployments/dpl_a1 などのルートを入力すると、どちらのソースでも移動できます。

#ライブモード

プレビューが開いている間、開発サーバーは接続中のタブにフレームのストリーミングを要求します。タブは変更された行だけを送信し、プレビューが閉じると送信を停止するため、プレビューを開いていないアプリには負荷がかかりません。ファイルを保存するとFast Refreshが実行され、プレビューもタブとともに更新されます。

追従（textjs.preview.followEditor）を有効にすると、編集中の page.tsx のルートにブラウザーのタブが移動します。

バックグラウンドのタブにはアニメーションフレームが届かないため、通常は再び表示されるまでフレームを保持します。プレビューが監視している間は、バックグラウンドのタブも入力が届くとすぐにフレームを描画するため、プレビューで文字を入力しても更新されます。バックグラウンドのタブのアニメーションは約1秒ごとに更新されます。滑らかな動きを保つには、アプリを専用のウィンドウに配置します。

#ヘッドレスモード

拡張機能はプロジェクト内で小さなランナーを起動します。プロジェクト自身のViteと @textjs/app を通じてルートファイルを読み込むため、エイリアス、TypeScript、JSXは text dev と同じように動作します。メモリー内の履歴を使い、開いているファイルのルートに、レイアウトとともにApp Routerをマウントします。

同一オリジンの fetch("/api/...") 呼び出しは、text runと同様に route.ts ハンドラーを同一プロセス内で実行します。グリッドはパネルのサイズに追従し、アプリ内のいずれかのファイルを保存すると再レンダリングされます。エラーはフレームの上に表示され、対応する TX### ページへのリンクが付きます。

#コマンド

ひな形作成コマンドは、エクスプローラーのフォルダーのコンテキストメニューにもあります。settings、blog/[slug]、docs/[...path]、(marketing)/about などのApp Routerのセグメントを受け付け、同じセグメントに page と route.ts を配置することは拒否します。JavaScriptプロジェクト（tsconfig.json がない場合）では、.jsx と .js ファイルが作成されます。

#スニペット

#エラーコード

ソース、ログ、「出力」パネル、貼り付けたスタックトレースなど、どこにある TX### コードでもポインターを重ねてください。ホバー表示にはタイトル、メッセージ、パッケージと、textjs.orgの対応ページへのリンクが表示されます。各コード自体もリンクになっています（⌘ を押しながらクリック）。

#ステータスバー

▼ 項目は、開発サーバーの状態とコンソールのグリッドサイズを、たとえば ▼ :3000 120×36 のように表示します。タブはサイズが変わるたびに、プレビューが開いていなくても開発サーバーにサイズを報告します。項目をクリックすると主なコマンドが表示されます。

#設定

#ワークスペースの信頼

プレビューと開発サーバーは、プロジェクトのコード（Viteの設定、text.config.*、コンポーネント）を実行します。「制限モード」では、拡張機能はスニペット、ひな形作成、エラーへのリンクのみを提供し、ワークスペース設定の textjs.preview.runtime、textjs.devServer.command、textjs.devServer.url を無視します。プレビューを有効にするには、ワークスペースを信頼してください。ワークスペースのフォルダー外にあるファイルはプレビューされません。

#動作の仕組み

text dev はエディター向けに3つのエンドポイントを提供します。ループバックホスト（localhost、127.0.0.1、[::1]）宛てのループバック接続のみを受け付け、Origin がないリクエスト、または開発サーバー自身のオリジンからのリクエストにのみ応答します。ブラウザーのクロスサイトリクエストと no-cors リクエストは拒否されます。

タブはViteのHMRソケットを通じて開発サーバーにフレームを送信し、この接続にはサーバーごとのトークンが必要です。独自のビューアーを作成できるように、通信形式は @textjs/app/frame-protocol（FrameEncoder、FrameDecoder、parseInputMessage）からエクスポートされています。これらはすべて text build の出力には含まれません。