Chia sẻ qua

Chỉnh sửa mã bằng Visual Studio Code cho Web (xem trước)

[Chủ đề này là tài liệu 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 cách sử dụng Visual Studio Code 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
Các hình thức cơ bản JavaScript
Nội dung đoạn trích Tất cả nội dung đoạn mã nội dung được hỗ trợ
Danh sách JavaScript
Các tập tin 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ã).
Các 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, chỉ thêm và chỉnh sửa nội dung, mã và xem/tải xuống tệp đính kèm.

Visual Studio Code for the Web cung cấ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 của bạn, cho phép bạn 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 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.

Demo sử dụng Visual Studio Code cho Web để chỉnh sửa trang web Power Pages.

Lưu ý

  • Lần đầu tiên tải Visual Studio Code cho Web có thể mất một chút thời gian vì nó sẽ 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 Công cụ Power Platform . Các tiện ích mở rộng web bị hạn chế bởi hộp cát của trình duyệt và do đó có những hạn chế so với các tiện ích mở rộng thông thường.
    • Power Platform CLI không được hỗ trợ.
    • Các tính năng của tiện ích mở rộng web Công cụ Power Platform bị giới hạn trong trải nghiệm chỉnh sửa mã Power Pages.
    • Tính năng này không khả dụng 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 Code cho Web từ trang chủ Power Pages bằng cách chọn tùy chọn Chỉnh sửa mã trang web từ menu 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:

  • Chỉnh sửa mã trang web từ không gian làm việc Pages
  • Mã mẫu tiêu đề từ không gian làm việc Pages
  • Chỉnh sửa tùy chỉnh CSS mã từ không gian làm việc Styling
  • 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 bạn mở Power Pages studio thiết kế, bạn sẽ thấy tùy chọn Edit code trong menu Pages1 và góc trên bên phải của 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.

Dạng xem Hành động Power Pages

Dạng xem Power Pages Hành động, có thể truy cập ở cuối File Explorer, cho phép bạn quản lý các trang web Power Pages trực tiếp trong trình chỉnh sửa. Nó làm giảm nhu cầu chuyển sang studio thiết kế Power Pages bằng cách cho phép các nhà phát triển thực hiện các tác vụ phổ biến một cách nhanh chóng từ bên trong trình chỉnh sửa.

Các hành động có sẵn

  • Trang xem trước
    Hành động này xóa bộ nhớ cache cấu hình và mở trang web trong VS Code. Nó cho phép các nhà phát triển xem trước và kiểm tra các thay đổi đối với mã trang web mà không cần chuyển ngữ cảnh sang studio thiết kế Power Pages.

  • Mở trong studio thiết kế Power Pages
    Sau khi thực hiện thay đổi mã, hãy sử dụng hành động này để truy cập studio thiết kế Power Pages. Điều này hữu ích để đặt cấu hình nhà cung cấp xác thực, vai trò web và các cài đặt trang web khác không thể chỉnh sửa trong trình chỉnh sửa mã.

  • Mở trong VS Code Desktop
    Nếu VS Code Desktop được cài đặt, hành động này sẽ mở trang web trong ứng dụng dành cho máy tính để bàn. Nó cũng kích hoạt tải xuống trang web, đảm bảo mã có sẵn cục bộ và sẵn sàng để chỉnh sửa.

Power Pages Chế độ xem hành động trong VS Code.

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 tình huống mà 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 cho Web

Trong hướng dẫn này, bạn hướng dẫn chỉnh sửa mã trang web bằng Visual Studio Code for Web.

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

  1. Mở trang web của bạn trong Power Pages design studio

  2. Ở góc trên cùng bên phải, hãy chọn Chỉnh sửa mã

    Mở cửa vào 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 đăng nhập 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ộ hóa để đồng bộ hóa các thay đổi được thực hiện trong Visual Studio Code với design studio.

  4. Chọn Xem trước để xem các thay đổi trên site Power Pages.

Sử dụng Visual Studio Code cho Web hoặc Visual Studio Code Desktop

Người dùng có thể chỉnh sửa, gỡ lỗi và xem trước các thay đổi đối với chỉnh sửa trang bằng Visual Studio Code 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 trang web và tích hợp với GitHub, 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 VS Code cho Web Máy tính để bàn VS Code
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ó No
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
Power Platform CLI ủng hộ No Có
Quy trình làm việc liên quan đến CPU và lưu trữ nâng cao - ReactJS hoặc hỗ trợ công cụ xây dựng khung khác No Có
Tích hợp GitHub với các chức năng như đăng nhập mã, thanh toán, quản lý xung đột và hợp nhất. No 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 cho Web để chỉnh sửa trang web không được hỗ trợ 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 ở các 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 họ.

Nếu khu vực không hỗ trợ Visual Studio Code cho Web, việc chọn biểu tượng trình soạn thảo mã </> trong thanh lệnh sẽ 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ừ Nội dung bản địa hóa phần. Bản sao trang có thể được chỉnh sửa trong Sao chép (HTML) cánh đồng trên Tổng quan tab. JavaScript tùy chỉnh Và Phong tục CSS mã có thể được chỉnh sửa từ Trình độ cao tab.
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 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. 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

  • Last updated on