Hướng dẫn cài visual studio code html

Hãy nâng cấp lên Microsoft Edge để tận dụng các tính năng mới nhất, bản cập nhật bảo mật và hỗ trợ kỹ thuật.

Chỉnh sửa mã bằng Visual Studio Code cho công cụ biên tập web (bản xem trước)

  • Bài viết
  • 10/07/2023

Trong bài viết này

[Chủ đề này là tài liệu hướng dẫn trước khi phát hành và có thể thay đổi.]

Từ studio thiết kế, bạn có thể chỉnh sửa mã trang web bằng Visual Studio Code dành cho web. Tính năng này cho phép chỉnh sửa nội dung tĩnh, HTML, CSS, Liquid và JavaScript đối với siêu dữ liệu của trang web sau:

Siêu dữ liệu Nội dung Biểu mẫu nâng cao (biểu mẫu nhiều bước) JavaScript Biểu mẫu cơ bản JavaScript Đoạn mã nội dung Tất cả nội dung đoạn mã nội dung được hỗ trợ Danh sách JavaScript Tệp web Xem và tải xuống các tệp phương tiện. Chỉnh sửa tệp văn bản (mã). Trang web Tất cả nội dung được hỗ trợ (mỗi ngôn ngữ), JavaScript và CSS Mẫu web Tất cả nội dung được hỗ trợ

Lưu ý

Bạn sẽ không thể tạo bản ghi siêu dữ liệu mà chỉ có thể thêm và chỉnh sửa nội dung, mã cũng như xem/tải xuống tệp đính kèm.

Visual Studio Code dành cho web cho phép trải nghiệm Microsoft Visual Studio Code miễn phí, không cần cài đặt, chạy hoàn toàn trong trình duyệt, cho phép duyệt mã trang web và thực hiện các thay đổi mã nhẹ một cách nhanh chóng và an toàn. Thông tin thêm: Visual Studio Code dành cho trải nghiệm web.

Quan trọng

  • Đây là một tính năng xem trước.
  • Các tính năng xem trước không được dùng cho sản xuất và có thể có chức năng bị hạn chế. Những tính năng này khả dụng trước khi có bản phát hành chính thức để khách hàng có thể truy cập sớm và cung cấp phản hồi.

Lưu ý

  • Lần đầu tiên tải Visual Studio Code dành cho web có thể mất một chút thời gian vì cần cài đặt các tiện ích mở rộng cần thiết cho tính năng này.
  • Các thao tác Tạo, Xóa và Đổi tên tệp không được hỗ trợ.
  • Tính năng này sử dụng tiện ích mở rộng web Power Platform Tools. Tiện ích mở rộng web bị hạn chế do hộp cát của trình duyệt nên có những hạn chế so với tiện ích mở rộng thông thường.
    • Power PlatformKhông hỗ trợ phương thức CLI.
    • Các tính năng tiện ích mở rộng web của Power Platform Tools chỉ giới hạn ở trải nghiệm chỉnh sửa mã Power Pages.
    • Tính năng này không có trong Đám mây cộng đồng của cơ quan chính phủ (GCC), Đám mây cộng đồng của cơ quan chính phủ (GCC High) và Bộ Quốc phòng (DoD). Người dùng ở những khu vực này sẽ sử dụng Ứng dụng Quản lý cổng thông tin để chỉnh sửa mã. Xem để biết thêm thông tin.

Tính năng chỉnh sửa mã có sẵn trong studio thiết kế

Tính năng chỉnh sửa mã cho phép người dùng chỉnh sửa mã trong các lĩnh vực sau:

  • Chỉnh sửa mã JavaScript tùy chỉnh cho biểu mẫu nhiều bước
  • Chỉnh sửa mã JavaScript tùy chỉnh cho biểu mẫu cơ bản
  • Chỉnh sửa JavaScript tùy chỉnh cho danh sách
  • Chỉnh sửa đoạn mã nội dung
  • Chỉnh sửa mẫu web
  • Xem và tải xuống các tệp web phương tiện (hình ảnh)
  • Chỉnh sửa các tệp web dựa trên văn bản (CSS, JavaScript, khác)

Hãy xem cách chỉnh sửa mã bằng các khu vực này.

Chỉnh sửa mã trang web từ không gian làm việc Trang

Khi mở studio thiết kế Power Pages, bạn sẽ thấy tùy chọn Chỉnh sửa mã trong menu Trang1 và góc trên bên phải màn hình2.

Mã mẫu tiêu đề từ không gian làm việc Trang

Chọn Chỉnh sửa tiêu đề trang web rồi chọn Chỉnh sửa mã để mở công cụ chỉnh sửa mã.

Chỉnh sửa mã CSS từ không gian làm việc Tạo kiểu

Vào Không gian làm việc Tạo kiểu và chọn menu CSS Chỉnh sửa mã tùy chỉnh có sẵn để mở công cụ chỉnh sửa mã.

Trộn thông báo xung đột

Nếu bạn đang cộng tác với các nhà phát triển khác, có thể có những trường hợp các bạn sẽ làm việc trên cùng một mã nguồn. Trong trường hợp bạn cố lưu các thay đổi vào một tệp đã lỗi thời, bạn sẽ nhận được thông báo So sánh hoặc Ghi đè các thay đổi.

So sánh mã sẽ hiển thị mã hiện tại cùng với mã của bạn và cho phép bạn hoàn nguyên về các thay đổi hiện có, chấp nhận từng thay đổi riêng lẻ hoặc sử dụng các thay đổi của bạn và ghi đè lên nội dung hiện có.

Bạn sẽ có thể xem lại nội dung mới nhất và trộn hoặc ghi đè mã hoặc loại bỏ các thay đổi.

Hướng dẫn: Chỉnh sửa mã trang web bằng Visual Studio Code dành cho web

Trong hướng dẫn này, bạn sẽ thực hiện chỉnh sửa mã trang web bằng Visual Studio Code dành cho web.

Bước 1: Chỉnh sửa mã trang web bằng Visual Studio Mã dành cho Web

  1. Mở trang web của bạn trong Studio thiết kế Power Pages
  2. Ở góc trên bên phải, hãy chọn Chỉnh sửa mã
  3. Chọn Mở Visual Studio Code từ hộp thoại xác nhận.
  4. Đăng nhập vào Visual Studio Code bằng thông tin xác thực môi trường của bạn.
  5. Chờ cho tiện ích mở rộng web Power Platform Tools khởi tạo và mã trang web tải ở ngăn bên trái.

Bước 2: Cập nhật nội dung và mã

  1. Trình khám phá ở bên trái màn hình tải siêu dữ liệu cấu hình trang web tương ứng có thể chỉnh sửa bằng Visual Code dành cho Web.
  2. Thực hiện thay đổi đối với các tệp siêu dữ liệu tương ứng và nhấn Ctrl+S để lưu các thay đổi.
  3. Vào studio thiết kế và chọn Đồng bộ để lấy tất cả bản cập nhật trong phiên studio thiết kế hiện tại của bạn.
  4. Chọn Bản xem trước để xem các thay đổi trên trang web Power Pages.

Sử dụng Visual Studio Mã dành cho Web hoặc Visual Studio Mã dành cho máy tính để bàn

Người dùng có thể chỉnh sửa, gỡ lỗi và xem trước các thay đổi đối với các chỉnh sửa trang bằng Visual Studio Code dành cho web mà không cần sử dụng các công cụ bên ngoài. Visual Studio Code Desktop cung cấp các tính năng nâng cao khác để chỉnh sửa tất cả siêu dữ liệu của trang web và tích hợp với GitHub, các khung và quy trình tích hợp liên tục/phát triển liên tục (CI/CD).

Đặc điểm Mã VS cho Web Máy tính để bàn mã VS Tạo bản ghi siêu dữ liệu cấu hình trang web mới No Giới hạn ở các trang web, mẫu trang, mẫu web, đoạn nội dung và tệp web. Chỉnh sửa trang web trực tiếp Có Không Chỉnh sửa siêu dữ liệu trang web Giới hạn ở việc chỉnh sửa các trang web, đoạn nội dung, biểu mẫu cơ bản, biểu mẫu nhiều bước, danh sách và mẫu web. Tất cả cấu hình siêu dữ liệu Power Pages Bản xem trước trang web Đã lên kế hoạch Đã lên kế hoạch Hỗ trợ CLI Power Platform Không Có Quy trình làm việc ràng buộc về CPU và bộ lưu trữ nâng cao - Hỗ trợ ReactJS hoặc công cụ xây dựng khuôn khổ khác Không Có Tích hợp GitHub với các khả năng như đưa mã vào (check-in), chuyển mã ra (check-out), quản lý xung đột và trộn mã. Không Có

Chỉnh sửa mã trong ứng dụng Quản lý cổng thông tin

Lưu ý

  • Việc sử dụng Visual Studio Code dành cho web để chỉnh sửa trang web không được hỗ trợ trong Đám mây cộng đồng của cơ quan chính phủ (GCC), Đám mây cộng đồng của cơ quan chính phủ (GCC High) và Bộ Quốc phòng (DoD). Người dùng ở những khu vực này có thể sử dụng Ứng dụng Quản lý cổng thông tin để thực hiện các thay đổi của mình.

Nếu khu vực không hỗ trợ Visual Studio Code dành cho web, hãy chọn biểu tượng công cụ chỉnh sửa mã </> trong thanh lệnh để mở Ứng dụng Quản lý cổng thông tin.

Điều hướng đến bản ghi Trang web, Biểu mẫu cơ bản, Biểu mẫu nhiều bước , Danh sách hoặc Mẫu web tương ứng để chỉnh sửa mã.

Chủ đề