Share via

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

[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.

Bản demo sử dụng Visual Studio Code dành cho web để chỉnh sửa trang web Power Pages.

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 Chính phủ (GCC), Đám mây Cộng đồng 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 Chỉnh sửa mã trong ứng dụng Quản lý cổng thông tin để biết thêm thông tin.

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

Bạn có thể bắt đầu chỉnh sửa mã trang web của mình bằng cách sử dụng Visual Studio Mã dành cho Web từ Power Pages trang chủ bằng cách chọn Chỉnh sửa mã trang web tùy chọn từ trình đơn thả xuống Chỉnh sửa .

Bạn cũng có thể chỉnh sửa mã trong studio thiết kế từ các khu vực sau:

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.

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

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ã từ tiêu đề Trang.

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ã.

Chỉnh sửa mã từ CSS tùy chỉnh.

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ó.

Trộn xung đột trong mã.

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ã

    Mở trong Visual Studio Code từ studio thiết kế.

  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.

    Menu trình khám phá dành cho không gian làm việc không có tiêu đề hiển thị các tệp 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.

    Giao diện cho phép người dùng chọn nút Đồng bộ để đồng bộ hóa các thay đổi đã thực hiện trong Visual Studio Code cho studio thiết kế.

  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 Mã dành cho Web để chỉnh sửa trang web không được hỗ trợ trong Government Community Cloud (GCC), Government Community Cloud (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ã.

Loại Vị trí mã
Trang web Chọn bản ghi trang web.
Chọn bản ghi nội dung trang web từ phần Nội dung đã được bản địa hóa.
Có thể chỉnh sửa bản sao trang trong trường Sao chép (HTML) trên tab Chung . Có thể chỉnh sửa mã
JavaScript và Tùy chỉnh CSS từ tab Nâng cao.
Biểu mẫu cơ bản Chọn bản ghi biểu mẫu cơ bản.
Chỉnh sửa JavaScript tùy chỉnh trên tab Cài đặt bổ sung.
Biểu mẫu nhiều bước Chọn bản ghi biểu mẫu nhiều bước.
Chọn bước của biểu mẫu nhiều bước từ tab Các bước biểu mẫu.
Chỉnh sửa JavaScript tùy chỉnh trên tab Tùy chọn biểu mẫu.
Danh sách Chọn bản ghi danh sách cơ bản.
Chỉnh sửa JavaScript tùy chỉnh trên tab Tùy chọn.
Mẫu web Chọn bản ghi mẫu web.
Chỉnh sửa Nguồn trên tab Chung.

Lưu bản ghi và xem trước trang web để kiểm tra mã.

Xem thêm