Sử dụng Visual Studio Phần mở rộng mã – Power Apps

Sử dụng Visual Studio Phần mở rộng mã

Trong bài viết này

Lưu ý

Effective October 12, 2022, Power Apps portals is Power Pages. More information: Microsoft Power Pages is now generally available (blog)
We will soon migrate and merge the Power Apps portals documentation with Power Pages documentation.

Tổng quan

Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn nhẹ nhưng mạnh mẽ, chạy trên máy tính và hỗ trợ Windows, macOS và Linux. Nó đi kèm với hỗ trợ tích hợp sẵn cho JavaScript, TypeScript và Node.js và có một hệ sinh thái mở rộng phong phú cho các ngôn ngữ khác (chẳng hạn như C ++, C#, Java, Python, PHP và Go) và thời gian chạy (chẳng hạn như .NET và Unity). Để biết thêm thông tin, hãy xem phần Bắt đầu với VS Code.

VS Code cho phép bạn mở rộng khả năng của mình thông qua phần mở rộng. Các tiện ích của VS Code có thể bổ sung thêm tính năng cho trải nghiệm tổng thể. Với việc phát hành tính năng này, giờ đây, bạn có thể sử dụng tiện ích VS Code để làm việc với cổng thông tin Power Apps.

Tiện ích VS Code cho cổng thông tin

Power Platform Tools bổ sung khả năng đặt cấu hình cổng thông tin bằng VS Code và sử dụng ngôn ngữ Liquid tích hợp sẵn IntelliSense cho phép trợ giúp hoàn thành mã, hỗ trợ và gợi ý trong khi tùy chỉnh giao diện cổng thông tin bằng VS Code. Khi sử dụng tiện ích VS Code, bạn cũng có thể đặt cấu hình cổng nhờ tính năng hỗ trợ cổng thông tin cho Microsoft Power Platform CLI.

Hoạt ảnh giải thích cách cài đặt và thiết lập Power Platform Công cụ.

Điều kiện tiên quyết

Trước khi sử dụng phần mở rộng VS Code cho cổng thông tin Power Apps, bạn phải:

  • Tải xuống, cài đặt và đặt cấu hình Visual Studio Code. Thông tin thêm: Tải Visual Studio Code xuống

  • Đặt cấu hình môi trường và hệ thống của bạn để hỗ trợ quy trình CI/CD của cổng thông tin Power Apps bằng CLI. Thông tin thêm: Hỗ trợ cổng thông tin cho Microsoft Power Platform CLI (Xem trước)

Cài đặt tiện ích VS Code

Sau khi bạn cài đặt Visual Studio Code, bạn cần cài đặt tiện ích mở rộng cho phần bổ trợ cổng thông tin Power Apps cho VS Code.

Để cài đặt phần mở rộng VS Code:

  1. Mở Visual Studio Code.

  2. Chọn Biểu tượng tiện ích mở rộng. (Tiện ích mở rộng) từ ngăn bên trái.

    Chọn tiện ích.

  3. Chọn biểu tượng Thiết đặt. từ trên cùng bên phải trên ngăn tiện ích mở rộng.

  4. Tìm kiếm và chọn Power Platform Tools.

    Chọn Power Platform Tools.

  5. Chọn Cài đặt.

  6. Xác minh rằng tiện ích đã được cài đặt thành công từ thông báo trạng thái.

Tải nội dung cổng thông tin xuống

Để xác thực với môi trường Microsoft Dataverse và để tải nội dung cổng thông tin xuống, hãy xem hướng dẫn Sử dụng Microsoft Power Platform CLI với cổng thông tin – tải nội dung cổng thông tin xuống.

Mẹo

Tiện ích mở rộng Power Platform Tools tự động bật bằng cách sử dụng các lệnh Microsoft Power Platform CLI từ bên trong VS Code thông qua Thiết bị đầu cuối tích hợp Visual Studio.

Hỗ trợ đoạn mã

Giờ đây, khi tùy chỉnh nội dung đã tải xuống bằng VS Code, bạn có thể sử dụng IntelliSense cho các thẻ Liquid của cổng thông tin Power Apps.

Đoạn mã với ví dụ về việc hoàn thành thẻ liquid cho thực thể.

Biểu tượng tệp

Tiện ích VS Code cho cổng thông tin tự động xác định và hiển thị biểu tượng cho các tệp và thư mục bên trong nội dung cổng thông tin đã tải xuống.

Danh sách các tệp trong cổng thông tin sơ cấp với chủ đề biểu tượng tệp dành riêng cho cổng thông tin.

VS Code sử dụng chủ đề biểu tượng tệp mặc định không hiển thị các biểu tượng dành riêng cho cổng thông tin. Để xem các biểu tượng tệp dành riêng cho cổng thông tin của bạn, bạn sẽ phải cập nhật phiên bản VS Code để sử dụng chủ đề biểu tượng tệp dành riêng cho cổng thông tin.

Để bật chủ đề biểu tượng tệp cụ thể cho cổng thông tin:

  1. Mở Visual Studio Code.

  2. Chuyển đến phần Tệp > Tùy chọn > Chủ đề biểu tượng tệp

  3. Chọn chủ đề cho Power Apps biểu tượng cổng.

    Chọn chủ đề cho biểu tượng cổng thông tin Power Apps.

Bản xem trước trực tiếp

Các Visual Studio Phần mở rộng mã cho phép tùy chọn xem trước trực tiếp để xem trang nội dung cổng thông tin bên trong Visual Studio Giao diện mã trong quá trình phát triển trải nghiệm.

Để xem bản xem trước, hãy chọn nút Xem trước. từ trên cùng bên phải khi mở tệp HTML trong kiểu biên tập.

Xem trước trang.

Ngăn xem trước sẽ mở ra ở phía bên phải của trang đang được chỉnh sửa.

Màn hình với danh sách tệp, tệp đang mở trong trình soạn thảo VS Code và bản xem trước ở bên phải.

Tính năng xem trước yêu cầu các tệp khác cũng được mở trong cùng một phiên VS Code tạo nên đánh dấu HTML để bản xem trước hiển thị. Ví dụ: nếu chỉ mở tệp HTML mà không mở cấu trúc thư mục bằng VS Code, bạn sẽ thấy thông báo sau.

Chạy lệnh được đóng góp: 'microsoft-powerapps-portals.preview-show' không thành công.

Khi sự cố này xảy ra, hãy mở thư mục bằng Tệp > Mở thư mục và chọn thư mục nội dung cổng thông tin đã tải xuống để mở trước khi bạn thử xem trước lại.

Tự động hoàn thành

Tính năng tự động hoàn thành trong tiện ích VS Code hiển thị ngữ cảnh hiện tại đang được chỉnh sửa và các thành phần tự động hoàn thành có liên quan thông qua IntelliSense.

Một ví dụ về tính năng tự động hoàn thành cho ID mẫu trang.

Giới hạn

Các giới hạn sau hiện đang áp dụng cho Power Platform Tools cho cổng thông tin:

  • Tính năng hỗ trợ đoạn mã và tự động hoàn thành chỉ hỗ trợ một số ít chức năng.
  • Xem trước trực tiếp không hỗ trợ các chủ đề tùy chỉnh hoặc các đối tượng Liquid.

Xem thêm

Hỗ trợ cổng thông tin cho Microsoft Power Platform CLI (Xem trước)