Tóm tắt bài viết
1. Mở hoặc tạo tệp HTML trong Visual Studio Code.
2. Nhấp vào nút Tiện ích mở rộng ở bên trái.
3. Tìm kiếm "Xem trước HTML" và cài đặt nó.
4. Nhấp vào tab cho tệp HTML của bạn ở trên cùng.
5. Nhấp vào biểu tượng chia đôi màn hình với kính lúp ở trên cùng.
Bản tóm tắt này có giúp ích gì cho bạn không? Có Không
Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 118.991 lần
Chỉ với một vài cú nhấp chuột, Live Server cho phép bạn xem trang của mình trực tiếp trong một trình duyệt thực tế. Tốt hơn nữa, nó có tính năng tải lại trực tiếp, vì vậy nếu bạn cập nhật mã của mình, những thay đổi cũng được phản ánh trong trình duyệt
Tất cả những gì bạn phải làm là nhấp chuột phải vào tệp HTML bạn muốn xem, nhấp chuột phải, sau đó chọn "Mở bằng Máy chủ Trực tiếp"
Nhưng nếu Live Server không mở trình duyệt của bạn và hiển thị trang của bạn như bạn mong đợi thì sao?
Khởi động lại VSCode
Đôi khi điều tốt nhất bạn có thể làm là bắt đầu VSCode từ đầu
Đầu tiên, lưu tất cả công việc của bạn. Sau đó, đóng VSCode, điều này cũng sẽ dừng tất cả các tiện ích mở rộng bạn đã cài đặt
Sau đó, mở lại VSCode và thử lại – chuyển đến tệp HTML bạn muốn xem, nhấp chuột phải và chọn "Mở bằng Máy chủ Trực tiếp"
Đặt trình duyệt cho Live Server
Có thể tiện ích đang hoạt động nhưng hệ thống của bạn không có trình duyệt mặc định
Ngay cả khi bạn đã đặt trình duyệt mặc định cho hệ thống của mình, sẽ không hại gì khi cho Live Server biết trình duyệt bạn muốn sử dụng một cách rõ ràng
Đầu tiên, mở Command Palette bằng phím F1, sau đó gõ vào Preferences: Open Settings [JSON] và chọn tùy chọn đó
Thao tác này sẽ mở tệp VSCode settings.json của bạn
Cuộn xuống cuối tệp, thêm dấu phẩy sau cài đặt cuối cùng, sau đó dán vào "liveServer.settings.CustomBrowser": "chrome"
Lưu ý rằng bạn cũng có thể sử dụng "firefox", "safari" hoặc bất kỳ trình duyệt nào khác làm giá trị cho cài đặt "liveServer.settings.CustomBrowser"
Cuối cùng, lưu tệp settings.json và thử chạy lại Live Server
Đặt trình duyệt mặc định cho hệ điều hành của bạn
Ngay cả sau khi cho Live Server biết bạn muốn sử dụng trình duyệt nào, có thể nó vẫn không mở đúng trang của bạn trong trình duyệt đó
Điều tiếp theo cần thử là đặt trình duyệt mặc định cho chính hệ điều hành của bạn
Phương pháp chính xác để thực hiện việc này có thể khác nhau tùy theo hệ điều hành của bạn, vì vậy tốt nhất bạn nên tìm kiếm cách thực hiện việc này nếu bạn không chắc chắn
Đây là giao diện của trang cài đặt trong Windows
Tự vào trang trực tiếp
Nếu vì lý do nào đó Live Server vẫn không tự động mở trang trong trình duyệt của bạn, đừng lo lắng. Bạn luôn có thể mở trình duyệt bạn chọn và xem trang trực tiếp
Chỉ cần mở trình duyệt ưa thích của bạn và truy cập //127.0.0.1:5500/
Ví dụ: nếu tệp của bạn có tên là index.html, chỉ cần chuyển đến Preferences: Open Settings [JSON]0
Miễn là Live Server đang chạy, bạn sẽ thấy trang của mình
kết thúc
Đó là một số cách khắc phục phổ biến mà bạn có thể thử nếu Live Server không hoạt động theo cách bạn mong đợi
Giữ an toàn và mã hóa vui vẻ [trực tiếp]
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nếu bài viết này hữu ích, hãy tweet nó
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu
Emmet là một tiện ích mở rộng mạnh mẽ trong Visual Studio Code. Nếu bạn đang phát triển một trang web hoặc làm việc với bất kỳ ngôn ngữ nào như HTML, Emmet sẽ giúp bạn viết mã nhanh chóng và hiệu quả mà không mắc phải những lỗi ngớ ngẩn
Nhưng đôi khi, trong khi cập nhật Mã VS, Mã VS bị mất liên kết tệp hoặc Emmet ngừng hoạt động vì một số lý do. Tôi gặp sự cố tương tự sau khi cập nhật Mã VS của mình. Tôi không thể sử dụng Emmet và điều đó có vẻ khó chịu với tôi vì tôi không muốn viết toàn bộ các mẫu khởi động html trong khi phát triển trang web. Vì vậy, tôi bắt đầu tìm ra giải pháp và tìm ra cách khắc phục điều đó
Bước 1. Bắt đầu Mã VS của bạn. Nhấp vào Cài đặt hoặc nhấn Ctrl +, để mở Cài đặt mã VS
Bước 2. Nhấp vào tab Tiện ích mở rộng ở phía bên trái của cài đặt. Nhấp vào HTML
Bước 3. Nhấp vào “Chỉnh sửa trong cài đặt. json” để chỉnh sửa cài đặt ở định dạng JSON
Bước 4. Bên trong dấu ngoặc nhọn, nhập mã sau vào mã JSON đã được viết
“emmet.triggerExpansionOnTab”: true,
“files.associations”: {“*html”: “html”},
"emmet.useInlineCompletions": true
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bước 5. Lưu các tập tin. Bây giờ nếu bạn thử áp dụng Emmet trong mã của mình, nó sẽ hoạt động trơn tru
Đó là cách tôi khắc phục sự cố Emmet không hoạt động mà tôi gặp phải khi cập nhật Mã VS. Tôi hy vọng giải pháp này cũng có thể hữu ích cho bạn và phục vụ mục đích