VS Code extension cho phép xem trước file HTML ngay trong IDE, kèm chế độ Inspect như DevTools — click vào element trên preview là nhảy về đúng dòng source.
Cài đặt
Cách 1 — Tải từ Marketplace (dành cho người dùng)
- Mở VS Code → vào tab Extensions (
Cmd/Ctrl+Shift+X). - Tìm kiếm HTML Preview Teko hoặc truy cập trực tiếp trang Visual Studio Marketplace.
- Nhấn Install để cài đặt.
Cách 2 — Từ source (dành cho developer)
git clone [email protected]:shared/ai-workflow-tools.git
cd ai-workflow-tools/vscode-preview-html-extension
yarn install
yarn build
- Mở thư mục
vscode-preview-html-extension/trong VS Code. - Nhấn
F5để mở Extension Development Host. - Trong cửa sổ mới, mở một file
.htmlbất kỳ để test.
Khi chỉnh sửa code, chạy
yarn watchđể rebuild tự động, sau đó reload Extension Development Host (Cmd/Ctrl+R) để áp dụng thay đổi.
Đóng gói file VSIX
yarn package
Sử dụng
- Mở một file
.htmlbất kỳ trong VS Code. - Mở preview bằng một trong các cách:
- Phím tắt
Cmd+Shift+V(macOS) /Ctrl+Shift+V(Windows/Linux). - Nhấn icon HTML Preview ở góc phải editor title bar.
- Command Palette (
Cmd/Ctrl+Shift+P) → HTML Preview: Open Preview to the Side.
- Phím tắt
- Panel preview mở cạnh editor và tự reload khi file thay đổi.
Inspect Mode — click để nhảy về source
- Nhấn nút Inspect trên toolbar của panel preview để bật chế độ inspect.
- Di chuột lên preview — element được hover sẽ được highlight kèm label
tag#id.class · line N. - Click vào element → editor tự động cuộn đến đúng dòng HTML tương ứng và highlight.
- Nhấn Inspect lần nữa để tắt chế độ này.
Phiên bản mới được CI tự nâng và đóng gói khi merge vào
main.