🚀 Batch HTML Creator

Công cụ tạo file HTML/CSS/JS hàng loạt dành cho Sinh viên IT & Web Developer.

Batch HTML Creator là một tiện ích mở rộng (Extension) giúp bạn tiết kiệm hàng giờ đồng hồ khi phải tạo thủ công các file bài tập. Chỉ với 1 cú click, bạn có thể tạo ra hàng chục file HTML, CSS và JS với cấu trúc chuẩn.

✨ Tính Năng Nổi Bật

• ⚡ Tạo file hàng loạt: Tự động sinh ra các cặp file theo số thứ tự (Ví dụ: từ BaiTap1 đến BaiTap10).
• 🎨 Mẫu giao diện (Templates) có sẵn:
  • HTML5 Basic: Cấu trúc cơ bản, code sạch.
  • Bootstrap 5: Tích hợp sẵn link CDN Bootstrap 5 mới nhất.
  • Tailwind CSS: Tích hợp sẵn script CDN Tailwind CSS.
• 📂 Quản lý thư mục thông minh (Mới): Tùy chọn tự động gom file CSS vào thư mục css/ và JS vào thư mục js/ giúp dự án gọn gàng.
• 📜 Hỗ trợ JavaScript (Mới): Tùy chọn sinh thêm file .js và tự động chèn thẻ <script> vào HTML.
• 🔗 Auto-Linking: Tự động chèn thẻ <link> kết nối CSS và JS vào file HTML.
• 🖥️ Giao diện hiện đại: Sử dụng Webview UI Toolkit của VS Code, tự động đổi màu theo Theme (Sáng/Tối).

📖 Hướng Dẫn Sử Dụng Chi Tiết

Bước 1: Mở thư mục dự án

Extension yêu cầu bạn phải mở một thư mục (Folder) trong VS Code trước để biết nơi lưu file.

• Vào File > Open Folder...

Bước 2: Mở công cụ

Bạn có 2 cách để mở giao diện Auto Creator HTML :

1. Cách 1: Bấm chuột phải vào folder dự án, chọn vào nút "Open Auto HTML Creator".

2. Cách 2: Nhấn vào nút Creator ở thanh như bên dưới :

   

Bước 3: Cấu hình tạo file

Một bảng điều khiển sẽ hiện ra, bạn điền các thông tin sau:

1. Template Style: Chọn mẫu code bạn muốn (Basic, Bootstrap hoặc Tailwind).
2. Prefix Name: Nhập tên file (Ví dụ: Lab, BaiTap, Index).
3. Tùy chọn mở rộng:
   • ✅ Include JavaScript (.js): Tích vào nếu bạn muốn tạo thêm file JS.
   • ⬜ Organize into folders: Tích vào nếu bạn muốn gom file vào thư mục css/ và js/. (Nếu không tích, tất cả file sẽ nằm ở thư mục gốc).
4. Start / End: Nhập số bắt đầu và kết thúc (Ví dụ: tạo từ bài 1 đến bài 5).

Bước 4: Hoàn tất

Bấm nút "⚡ GENERATE FILES". Extension sẽ thông báo kết quả và bạn sẽ thấy các file xuất hiện ngay lập tức trong Explorer!

⚙️ Cài Đặt (Extension Settings)

Hiện tại extension hoạt động ngay lập tức ("Plug and Play") mà không cần cấu hình phức tạp trong Settings.

🛠️ Công Nghệ Sử Dụng

• TypeScript
• VS Code Webview UI Toolkit
• Node.js File System

📝 Nhật Ký Phiên Bản (Changelog)

1.0.0 (Bản mới nhất)

• 🎉 Nâng cấp giao diện với Microsoft UI Toolkit.
• ✨ Thêm tính năng tạo file JavaScript (.js).
• 📂 Thêm tính năng gom nhóm thư mục (css/, js/).
• 🐛 Sửa lỗi logic tạo file.

0.0.1

• 🚀 Phát hành lần đầu.
• Hỗ trợ 3 template: Basic, Bootstrap, Tailwind.

📬 Liên Hệ & Hỗ Trợ

Được phát triển bởi HuyPTG_Dev - Sinh viên CNTT & Photographer.

Nếu bạn thấy Extension này hữu ích, hãy đánh giá 5 sao ⭐⭐⭐⭐⭐ trên Marketplace nhé! Mọi ý kiến đóng góp hoặc báo lỗi vui lòng gửi về: 📧 Email: huy.ptg.media@gmail.com

Chúc các bạn học tốt và code vui vẻ! 🚀