HTML Preview & Locate

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ừ Release (dành cho người dùng)

1. Tải file .vsix từ trang Releases của repo.
2. Mở VS Code → vào tab Extensions (Cmd/Ctrl+Shift+X).
3. Nhấn menu ... ở góc trên → chọn Install from VSIX....
4. Chọn file .vsix vừa tải về.

Hoặc dùng dòng lệnh: code --install-extension html-preview-teko-x.x.x.vsix

Cách 2 — Từ source (dành cho developer)

git clone git@git.teko.vn:shared/ai-workflow-tools.git
cd ai-workflow-tools/vscode-preview-html-extension
yarn install
yarn build

1. Mở thư mục vscode-preview-html-extension/ trong VS Code.
2. Nhấn F5 để mở Extension Development Host.
3. Trong cửa sổ mới, mở một file .html bấ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

1. Mở một file .html bất kỳ trong VS Code.
2. 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.
3. Panel preview mở cạnh editor và tự reload khi file thay đổi.

Inspect Mode — click để nhảy về source

1. Nhấn nút Inspect trên toolbar của panel preview để bật chế độ inspect.
2. Di chuột lên preview — element được hover sẽ được highlight kèm label tag#id.class · line N.
3. Click vào element → editor tự động cuộn đến đúng dòng HTML tương ứng và highlight.
4. 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.