VS Code

Tiện ích Text.js cho VS Code hiển thị frame console bên cạnh mã nguồn. Tiện ích phản chiếu ứng dụng đang chạy bằng text dev, hoặc tự render tệp đang mở khi không có ứng dụng nào chạy. Tiện ích còn bổ sung công cụ tạo khung App Router, đoạn mã mẫu và liên kết cho mã lỗi TX###.

#Cài đặt

Cài đặt Text.js từ Visual Studio Marketplace. Trong VS Code, mở chế độ xem Extensions (⌘⇧X) và tìm textjs.vscode-textjs, hoặc chạy:

code --install-extension textjs.vscode-textjs

Tiện ích kích hoạt trong mọi thư mục chứa ứng dụng Text.js: có text.config.ts, hoặc có gói phụ thuộc vào @textjs/app và thư mục app/. Monorepo chứa nhiều ứng dụng cũng hoạt động.

#Xem trước trực tiếp

Mở một page.tsx, layout.tsx hoặc component và chạy Text.js: Open Preview (⌘K V), hoặc nhấp vào nút xem trước trên thanh tiêu đề trình soạn thảo. Bảng xem trước vẽ frame với cùng giao diện DevTools và các ô Menlo như console của trình duyệt.

Bản xem trước nhận frame từ một trong hai nguồn. Nhãn trên thanh công cụ cho biết nguồn nào đang hoạt động:

auto (mặc định) dùng chế độ Trực tiếp khi có thể và Không giao diện trong các trường hợp còn lại. Cố định một trong hai chế độ từ nhãn hoặc bằng textjs.preview.mode.

#Bàn phím

Nhấp vào console để gửi phím đến ứng dụng: phím mũi tên, Tab, phím tắt, gõ và dán đều hoạt động như trong trình duyệt. Nhấp ra ngoài console để dừng. Các phím tắt của trình soạn thảo như ⌘P và ⌘⇧P vẫn chuyển đến VS Code. Cuộn trên console sẽ gửi sự kiện con lăn.

Trong trường địa chỉ, bạn có thể nhập một route, chẳng hạn /deployments/dpl_a1, để điều hướng ở cả hai nguồn.

#Chế độ trực tiếp

Khi bản xem trước đang mở, máy chủ phát triển yêu cầu các thẻ đã kết nối truyền frame liên tục. Các thẻ chỉ gửi những dòng đã thay đổi và ngừng gửi khi đóng bản xem trước, nên ứng dụng không mở bản xem trước sẽ không tốn tài nguyên cho việc này. Lưu tệp sẽ đi qua Fast Refresh, và bản xem trước cập nhật cùng thẻ.

Bật Theo dõi (textjs.preview.followEditor) để chuyển thẻ trình duyệt đến route của page.tsx bạn đang chỉnh sửa.

Các thẻ nền không nhận frame hoạt ảnh, nên thường giữ nguyên frame cho đến khi hiển thị trở lại. Khi có bản xem trước đang theo dõi, thẻ nền vẽ frame ngay khi nhận đầu vào, nên gõ trong bản xem trước vẫn tạo cập nhật. Hoạt ảnh trong thẻ nền cập nhật khoảng một lần mỗi giây. Đặt ứng dụng trong cửa sổ riêng để giữ hoạt ảnh mượt.

#Chế độ không giao diện

Tiện ích khởi động một trình chạy nhỏ trong dự án của bạn. Trình chạy tải tệp route qua Vite và @textjs/app của chính dự án, nên bí danh, TypeScript và JSX hoạt động như trong text dev. Trình chạy gắn App Router tại route của tệp đang mở, kèm các layout của nó, sử dụng lịch sử trong bộ nhớ:

Các lệnh gọi fetch("/api/...") cùng nguồn chạy handler route.ts trong cùng tiến trình, như với text run. Lưới thay đổi theo kích thước bảng xem trước, và lưu bất kỳ tệp nào trong ứng dụng sẽ render lại ứng dụng. Lỗi hiển thị phía trên frame, kèm liên kết đến trang TX### tương ứng.

#Lệnh

Các lệnh tạo khung cũng có trong menu ngữ cảnh của thư mục ở Explorer. Chúng chấp nhận các phân đoạn App Router như settings, blog/[slug], docs/[...path] và (marketing)/about, đồng thời từ chối đặt page và route.ts trong cùng phân đoạn. Dự án JavaScript (không có tsconfig.json) nhận các tệp .jsx và .js.

#Đoạn mã mẫu

#Mã lỗi

Di chuột lên mã TX### ở bất kỳ đâu: trong mã nguồn, nhật ký, bảng Output hoặc dấu vết ngăn xếp đã dán. Hộp thông tin khi di chuột hiển thị tiêu đề, thông báo và gói của mã lỗi, kèm liên kết đến trang tương ứng trên textjs.org. Mỗi mã cũng là một liên kết (nhấp kèm ⌘).

#Thanh trạng thái

Mục ▼ hiển thị trạng thái máy chủ phát triển và kích thước lưới console, ví dụ ▼ :3000 120×36. Các thẻ báo kích thước của chúng cho máy chủ phát triển mỗi khi kích thước thay đổi, ngay cả khi không mở bản xem trước. Nhấp vào mục này để truy cập các lệnh chính.

#Cài đặt

#Độ tin cậy của không gian làm việc

Bản xem trước và máy chủ phát triển chạy mã của dự án (cấu hình Vite, text.config.* và các component). Trong Chế độ hạn chế, tiện ích chỉ cung cấp đoạn mã mẫu, công cụ tạo khung và liên kết lỗi, đồng thời bỏ qua textjs.preview.runtime, textjs.devServer.command và textjs.devServer.url trong cài đặt không gian làm việc. Đánh dấu không gian làm việc là đáng tin cậy để bật bản xem trước. Tiện ích không bao giờ xem trước tệp nằm ngoài các thư mục của không gian làm việc.

#Cách hoạt động

text dev cung cấp ba endpoint cho trình soạn thảo. Chúng chỉ phản hồi kết nối loopback gửi đến máy chủ loopback (localhost, 127.0.0.1, [::1]), và chỉ phản hồi yêu cầu không có Origin hoặc có nguồn trùng với máy chủ phát triển. Chúng từ chối yêu cầu khác trang và yêu cầu no-cors của trình duyệt:

Các thẻ gửi frame đến máy chủ phát triển qua socket HMR của Vite, vốn yêu cầu token riêng cho từng máy chủ. Định dạng truyền tải được export từ @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) nếu bạn muốn xây dựng trình xem riêng. Không có phần nào trong số này tồn tại trong đầu ra của text build.