Làm cách nào để lấy mã html từ mã so với mã?

Bạn có thể sử dụng Visual Studio Code (VSC) làm trình chỉnh sửa mã hóa. Bạn có gặp phải sự cố khi xem lại các tệp HTML sống động trong VSC không?

Tôi đã thử ba tiện ích mở rộng và muốn chia sẻ kinh nghiệm của mình

  1. Xem trước HTML

HTML Preview có thể mở trang web được hiển thị bên trong VSC sống động

Khi phiên bản HTML Preview bên dưới (như pic1) được cài đặt, sẽ có một biểu tượng có tên “Open Preview to side” như pic 2 được hiển thị trong trình chỉnh sửa

Làm cách nào để lấy mã html từ mã so với mã?

May mắn thay, bạn có thể kích hoạt chức năng “Mở trong trình duyệt” thông qua các phương pháp khác. Bài viết này sẽ chỉ cho bạn cách làm điều đó

Cách mở trong trình duyệt bằng Mã VS trên PC Windows

Cách dễ nhất để có tùy chọn Mở trong Trình duyệt cho Visual Studio Code trong Windows là sử dụng tiện ích mở rộng. Cài đặt tiện ích mở rộng trong Visual Studio Code tương đối đơn giản, cũng như sử dụng chúng để mở tệp trong trình duyệt

  1. Mở tệp HTML của bạn trong Visual Studio Code Editor
    Làm cách nào để lấy mã html từ mã so với mã?
  2. Trên thanh công cụ dọc bên trái, nhấp vào “Tiện ích mở rộng. ” Ngoài ra, bạn có thể sử dụng phím tắt “Ctrl + Shift + X” để khởi chạy Tiện ích mở rộng
    Làm cách nào để lấy mã html từ mã so với mã?
  3. Nhấp vào thanh tìm kiếm để cho phép viết
    Làm cách nào để lấy mã html từ mã so với mã?
  4. Đầu vào “mở trong trình duyệt. ” Chọn tiện ích phù hợp với cụm từ tìm kiếm của bạn
    Làm cách nào để lấy mã html từ mã so với mã?
  5. Nhấp vào nút “Cài đặt”
    Làm cách nào để lấy mã html từ mã so với mã?
  6. Tải lại chương trình
  7. Chọn Explorer từ thanh công cụ bên trái
    Làm cách nào để lấy mã html từ mã so với mã?
  8. Tìm tệp HTML của bạn trong Explorer và nhấp chuột phải vào tệp đó. Chọn “Mở trong trình duyệt mặc định” hoặc “Mở trong trình duyệt khác. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  9. Nếu bạn chọn tùy chọn “Mở trong trình duyệt mặc định”, tệp HTML sẽ khởi chạy trong bất kỳ trình duyệt nào được đặt làm mặc định. Nếu bạn chọn “Mở trong các trình duyệt khác”, bạn sẽ cần chỉ định trình duyệt nào sẽ được sử dụng

Bạn có thể tìm thấy nhiều tiện ích mở rộng hữu ích trên Visual Studio Marketplace. Hoặc bạn có thể lấy tiện ích mở rộng Open in Browser được người dùng đánh giá tích cực nhất tại đây. Tiện ích mở rộng 1, Tiện ích mở rộng 2, Tiện ích mở rộng 3, Tiện ích mở rộng 4

Cách mở trong trình duyệt bằng mã VS trên máy Mac

Visual Studio Code có thể được nâng cấp bằng các tiện ích mở rộng khác nhau giúp tăng chức năng của chương trình. Một loại tiện ích mở rộng có thể cho phép mở tệp HTML, PHP hoặc JS trong trình duyệt mặc định hoặc trình duyệt khác. Đây là cách bật tùy chọn đó trên máy Mac

  1. Sử dụng Visual Studio Code Editor, mở tệp mong muốn
    Làm cách nào để lấy mã html từ mã so với mã?
  2. Chuyển đến thanh công cụ bên trái và chọn “Tiện ích mở rộng. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  3. Nhấp vào thanh tìm kiếm trong bảng Tiện ích mở rộng và viết “mở trong trình duyệt. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  4. Chọn một tiện ích mở rộng và nhấp vào “Cài đặt. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  5. Tải lại phần mềm
  6. Chuyển đến thanh công cụ bên trái và chọn Explorer
    Làm cách nào để lấy mã html từ mã so với mã?
  7. Xác định vị trí tệp bạn muốn mở trong bảng Explorer và nhấp chuột phải vào tệp đó. Chọn “Mở trong trình duyệt mặc định” hoặc “Mở trong trình duyệt khác. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  8. Tùy chọn “Mở trong trình duyệt mặc định” sẽ khởi chạy tệp bằng trình duyệt được chọn trước. “Mở trong các trình duyệt khác” sẽ hiển thị lời nhắc nơi bạn có thể chọn một trong các trình duyệt được cài đặt trên máy của mình
    Làm cách nào để lấy mã html từ mã so với mã?

Thị trường Visual Studio có nhiều lựa chọn tiện ích mở rộng có thể thêm các chức năng mới vào Visual Studio Code. Trang web rất đáng để khám phá nếu bạn muốn điều chỉnh chương trình hơn nữa. Và nếu bạn chỉ quan tâm đến các tiện ích Mở trong trình duyệt, thì đây là một số gợi ý. Tiện ích mở rộng 1, Tiện ích mở rộng 2, Tiện ích mở rộng 3, Tiện ích mở rộng 4

Mở trong Phím tắt trình duyệt

Gần như mọi tiện ích mở rộng Mở trong Trình duyệt cho Visual Studio Code đều được bật phím tắt. Tuy nhiên, các phím tắt không thống nhất. Thay vào đó, mỗi tiện ích mở rộng có một tổ hợp phím cụ thể sẽ kích hoạt mở tệp trong trình duyệt của bạn

Dưới đây là các phím tắt cho các tiện ích mở rộng được đề xuất trong bài viết này

  1. Tiện ích mở rộng 1. “Ctrl + 1” trên Windows, “Command + 1” trên Mac
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?
  2. Tiện ích mở rộng 2. “Ctrl + Alt + O” trên Windows, “Command + Option (Alt) + O” trên Mac
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?
  3. Tiện ích mở rộng 3. “Ctrl + Shift + F9” trên Windows, “Command + Shift + F9” trên Mac
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?
  4. Tiện ích mở rộng 4. “Ctrl + Shift + P” trên Windows, “Command + Shift + P” trên Mac
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?

Lưu ý rằng các phím tắt này sẽ chỉ hoạt động trên các tiện ích mở rộng tương ứng được liên kết trong bài viết này. Nếu bạn chọn cài đặt một tiện ích mở rộng khác, các phím tắt liên quan có thể sẽ được liệt kê trên trang Thị trường của nó

Chạy HTML trong Visual Studio Code

Nếu bạn quan tâm đến việc làm việc với HTML trong Visual Studio Code, đây là một số phương pháp chạy mã HTML trong chương trình

Phương pháp đầu tiên bao gồm tải tệp bạn muốn chạy theo cách thủ công

  1. Mở Visual Studio Code và tạo một tệp HTML mới
    Làm cách nào để lấy mã html từ mã so với mã?
  2. Chuyển đến “Tệp”, sau đó nhấp vào “Lưu. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  3. Sử dụng HTML. 5, kích hoạt mẫu cho HTML. Sau đó, mở tệp bạn đã lưu ở bước 2
    Làm cách nào để lấy mã html từ mã so với mã?
  4. Sử dụng tiện ích mở rộng Mở trong trình duyệt mà bạn đã cài đặt trước đó để khởi chạy tệp trong trình duyệt của mình
  5. Để trình duyệt mở, quay lại Visual Studio Code và chỉnh sửa tệp HTML, lưu các thay đổi của bạn
    Làm cách nào để lấy mã html từ mã so với mã?
  6. Quay lại trình duyệt và nhấp vào làm mới. Bạn sẽ thấy trang thay đổi dựa trên chỉnh sửa của bạn
    Làm cách nào để lấy mã html từ mã so với mã?
  7. Lặp lại bước 5 và 6 để kiểm tra tiến trình của bạn khi bạn tiếp tục chỉnh sửa tệp HTML

Phương pháp thủ công có thể giúp theo dõi công việc của bạn. Tuy nhiên, có một giải pháp thậm chí còn tốt hơn. tự động tải. Tùy chọn này sẽ yêu cầu bạn cài đặt một tiện ích mở rộng khác, nhưng sẽ rất đáng để dành thời gian

  1. Trong Visual Studio Code, đi tới Tiện ích mở rộng, nằm ở cuối thanh công cụ bên trái
    Làm cách nào để lấy mã html từ mã so với mã?
  2. Trong thanh tìm kiếm Tiện ích mở rộng, hãy nhập “máy chủ trực tiếp. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  3. Nhấp vào nút “Cài đặt” bên cạnh tiện ích mở rộng Live Server
    Làm cách nào để lấy mã html từ mã so với mã?
  4. Tạo và lưu tệp HTML mới
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?
  5. Trong Visual Studio Code Explorer, nhấp chuột phải vào tệp mới của bạn. Chọn “Mở máy chủ trực tiếp. ”
    Làm cách nào để lấy mã html từ mã so với mã?
  6. Tệp HTML sẽ mở trong trình duyệt. Khi đã xong, hãy thử chỉnh sửa mã HTML. Lưu tiến trình của bạn
    Làm cách nào để lấy mã html từ mã so với mã?

    Làm cách nào để lấy mã html từ mã so với mã?
  7. Ngay sau khi bạn tạo một thay đổi trong mã và lưu nó, trình duyệt của bạn sẽ làm mới, hiển thị nội dung mới. Bạn sẽ không cần phải làm mới trang theo cách thủ công và thay vào đó sẽ có thể có xác nhận trực quan về các thay đổi trong thời gian thực
    Làm cách nào để lấy mã html từ mã so với mã?

Các tiện ích mở rộng HTML mã Visual Studio hữu ích khác

Như đã đề cập, Thị trường Visual Studio có đầy đủ các công cụ tuyệt vời, nhiều công cụ hướng đến HTML. Dưới đây là mười tiện ích mở rộng hữu ích nhất và được xếp hạng tốt nhất cho HTML

  • lit-plugin. Một công cụ làm nổi bật cú pháp, kiểm tra cách nhập và giúp bạn hoàn thành mã mà không gặp lỗi. Tiện ích mở rộng này có các quy tắc có thể tùy chỉnh
  • SCSS mọi nơi. Tiện ích mở rộng tự động hoàn thành cho các định nghĩa lớp cho HTML, SCSS, Elixir, SASS, PHP, CSS và nhiều loại tệp khác
  • Đoạn trích góc. Thêm các đoạn mã góc để dễ sử dụng trong HTML và TypeScript. Tiện ích mở rộng hoạt động bằng cách mở một đoạn mã sau khi nó được nhập một phần
  • HTML chuỗi ES6. Cho phép hỗ trợ mã chuỗi es6 để đánh dấu cú pháp. Hoạt động với HTML, CSS, XML, GLSL và các định dạng khác
  • Tách các thuộc tính HTML. Tiện ích mở rộng này sẽ phân chia các thuộc tính HTML, cũng như các đạo cụ và chỉ thị của Angular, Vue và React. Bạn có thể sử dụng nó trên thẻ mở và thẻ tự đóng, cũng như trên nhiều lựa chọn
  • Djaneiro – Đoạn trích Django. Một bộ sưu tập đoạn mở rộng cho các mẫu HTML django. Sử dụng phần mở rộng này sẽ rút ngắn đáng kể thời gian gõ
  • Xem trước trực tiếp. Tiện ích mở rộng Live Preview từ Microsoft cho phép lưu trữ máy chủ cục bộ. Nếu bạn có một dự án không sử dụng Angular, React hoặc các công cụ máy chủ khác, tiện ích mở rộng này sẽ cho phép xem trước HTML được nhúng và thường xuyên với các lần làm mới trang trong thời gian thực
  • Lõi JET của Oracle. Tiện ích mở rộng này do Tập đoàn Oracle tạo ra cung cấp hỗ trợ đầy đủ cho dữ liệu HTML tùy chỉnh của Oracle JET. Các đoạn mã được bao gồm sẽ tự động hoàn thành bất kỳ thuộc tính và thẻ JET nào
  • Điều hướng CSS. Bật Chuyển đến Định nghĩa cho HTML sang CSS, HTML sang Ít hơn và HTML sang Sass. Lệnh Peek Definition cũng được kích hoạt
  • Trình chuyển đổi ký tự có dấu HTML. Thay thế liền mạch các ký tự đặc biệt bằng các thực thể HTML thích hợp. Tiện ích mở rộng này hữu ích theo tình huống, nhưng cần thiết khi xử lý các chuỗi có thể bản địa hóa

Bạn có thể chạy mã Visual Studio từ trình duyệt của mình

Ngoài việc chạy các tệp HTML trong trình duyệt, bạn cũng có thể sử dụng toàn bộ Visual Studio Code trực tuyến. Điều này yêu cầu bạn khởi chạy một phiên bản cụ thể của chương trình được phát triển để sử dụng trình duyệt

Điều đáng chú ý là phiên bản này nhẹ hơn nhiều so với Visual Studio Code dành cho máy tính để bàn. Tuy nhiên, nó có thể là một giải pháp đơn giản để dễ dàng điều hướng tệp và kho lưu trữ, cũng như các thay đổi mã nhỏ

Nếu bạn muốn dùng thử biến thể trình duyệt Visual Studio Code, bạn có thể bắt đầu ngay bằng cách nhấp vào đây

Nhận các tệp HTML của bạn và chạy

Mở tệp HTML trong trình duyệt của bạn được thực hiện dễ dàng với tiện ích mở rộng dành riêng cho Visual Studio Code. Nếu bạn quyết định khám phá vô số tiện ích mở rộng cho công cụ viết mã này, thì chức năng Mở trong Trình duyệt sẽ chỉ là bước khởi đầu trong hành trình của bạn

Bạn có quản lý để mở tệp HTML của mình trong trình duyệt bạn chọn không?