VS Code

Text.js 的 VS Code 擴充功能會在程式碼旁顯示主控台影格。它會鏡像顯示透過 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/ 目錄的套件。含有多個應用程式的 monorepo 也能使用。

#即時預覽

開啟 page.tsx、layout.tsx 或元件，執行 Text.js: Open Preview（⌘K V），或點擊編輯器標題列的預覽按鈕。面板會使用與瀏覽器主控台相同的 DevTools 介面外框及 Menlo 儲存格繪製影格。

預覽會從兩種來源之一取得影格。工具列的標章會顯示目前使用的來源：

auto（預設值）會在可用時使用即時模式，否則使用無介面模式。透過標章或 textjs.preview.mode 可固定使用其中一種。

#鍵盤

點擊主控台即可向應用程式傳送按鍵：方向鍵、Tab、快速鍵、輸入及貼上都能使用，與瀏覽器中的操作相同。點擊主控台外部即可停止。⌘P 和 ⌘⇧P 等編輯器快速鍵仍會傳給 VS Code。在主控台上捲動會傳送滾輪事件。

你可以在網址欄位輸入路由，例如 /deployments/dpl_a1，在任一來源中導覽。

#即時模式

預覽開啟時，開發伺服器會要求已連線的分頁串流傳送影格。分頁只會傳送有變更的列，並在預覽關閉時停止傳送，因此未開啟預覽的應用程式不會產生任何額外負擔。儲存檔案會觸發 Fast Refresh，預覽也會隨分頁更新。

開啟 跟隨（textjs.preview.followEditor），讓瀏覽器分頁移至你正在編輯的 page.tsx 所對應的路由。

背景分頁不會收到動畫影格，因此通常會維持原有影格，直到再次顯示。預覽正在監看時，背景分頁一收到輸入就會繪製影格，因此在預覽中輸入仍會更新畫面。背景分頁的動畫約每秒更新一次。將應用程式放在獨立視窗中，可讓動畫保持流暢。

#無介面模式

擴充功能會在你的專案中啟動小型執行器。它透過專案本身的 Vite 和 @textjs/app 載入路由檔案，因此別名、TypeScript 和 JSX 的行為都與 text dev 相同。它會使用記憶體內的瀏覽紀錄，在開啟檔案的路由掛載 App Router 及其版面配置：

同源的 fetch("/api/...") 呼叫會在同一處理程序內執行你的 route.ts 處理常式，與 text run 相同。網格會隨面板大小調整，儲存應用程式中的任何檔案都會重新渲染。錯誤會顯示在影格上方，並附上對應 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 為編輯器提供三個端點。這些端點只回應以回送主機（localhost、127.0.0.1、[::1]）為目標的回送連線，且請求必須沒有 Origin，或來源與開發伺服器本身相同。瀏覽器的跨網站及 no-cors 請求都會遭到拒絕：

分頁透過 Vite 的 HMR 通訊端將影格傳送至開發伺服器，此通訊端需要各伺服器專屬的權杖。如果你想建構自己的檢視器，可使用 @textjs/app/frame-protocol 匯出的傳輸格式（FrameEncoder、FrameDecoder、parseInputMessage）。text build 的輸出不包含上述任何功能。