Sử dụng tiện ích mở rộng Visual Studio Code

Visual Studio Code là trình soạn thảo mã nguồn nhẹ và mạnh mẽ dành cho Windows, macOS và Linux. Nó hỗ trợ JavaScript, TypeScript và Node.js và có hệ sinh thái mở rộng phong phú cho các ngôn ngữ khác như C++, C#, Java, Python, PHP và Go, cũng như các môi trường chạy như .NET và Unity. Tìm hiểu thêm về Visual Studio Code trong Bắt đầu với VS Code.

Visual Studio Code cho phép bạn mở rộng khả năng thông qua các tiện ích mở rộng. Các tiện ích mở rộng của Visual Studio 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 mở rộng Visual Studio Code để làm việc với Power Pages.

Tiện ích mở rộng Visual Studio Code cho Power Pages

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

Lưu ý

• Bạn cần đảm bảo rằng node.js được tải xuống và cài đặt trên cùng một máy trạm với Visual Studio Mã để các tính năng Power Pages hoạt động.
• Đảm bảo chỉ cài đặt Power Platform Tools chứ không cài đặt cả Power Platform Tools và Power Platform Tools [BẢN XEM TRƯỚC]. Xem các vấn đề đã biết để biết chi tiết.

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

Trước khi sử dụng tiện ích mở rộng Visual Studio Code cho Power Pages , bạn phải:

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

• Định 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 Power Pages bằng CLI. Thông tin thêm: Microsoft Power Platform CLI (bản xem trước)

Cài đặt tiện ích mở rộng Visual Studio 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ợ Power Platform Tools cho Visual Studio Code.

Để cài đặt tiện ích mở rộng Visual Studio Code:

1. Mở Visual Studio Code.

2. Chọn Tiện ích mở rộng trong ngăn bên trái.

   

3. Chọn biểu tượng Thiế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.

   

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.

Tiền bo

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

Power Pages Hành động

Power Pages Các hành động hợp lý hóa việc quản lý trang web và giảm sự phụ thuộc vào Microsoft Power Platform lệnh CLI. Power Pages Hành động có sẵn trong ngăn có tiêu đề Power Pages Hành động trong thanh bên Explorer của Visual Studio Mã.

Trong ngăn này, các trang web được phân loại như sau:

• Trang web đang hoạt động: Các trang web hiện đang khả dụng và hoạt động trong môi trường được chọn.
• Các trang web không hoạt động: Các trang web hiện diện trong môi trường nhưng hiện không hoạt động.
• Các trang web khác: Các trang web được tải xuống cục bộ nhưng chưa được liên kết với môi trường đã chọn.

Môi trường thay đổi

Để chuyển đổi môi trường:

1. Chọn nút Thay đổi môi trường trong ngăn Power Pages Hành động.

   

2. Chọn môi trường mong muốn từ danh sách hiển thị.

Khi bạn chọn một môi trường, danh sách các trang web sẽ tự động cập nhật.

Hành động cho các trang web

Các loại trang web khác nhau cung cấp các hành động theo ngữ cảnh cụ thể mà bạn có thể truy cập bằng cách nhấp chuột phải.

Hành động của trang web đang hoạt động

Nhấp chuột phải vào Active Sites để truy cập các hành động sau:

• Xem trước: Xóa bộ nhớ đệm và mở trang web trong VS Code để xem trước ngay lập tức.
• Tải lên: Tải các thay đổi cục bộ trở lại môi trường của bạn.
• Tải xuống: Tải nội dung trang web xuống thư mục cục bộ để chỉnh sửa ngoại tuyến.
• Chi tiết trang web: Hiển thị thông tin chi tiết về trang web.
• Hiển thị trong Explorer: Điều hướng đến thư mục cục bộ chứa mã của trang web.
• Mở trong Power Pages Studio: Mở trang web trong Power Pages studio.

Hành động của các trang web không hoạt động

Các trang web không hoạt động cung cấp những hành động sau:

• Mở Quản lý trang web: Mở trang web trong ứng dụng quản lý Power Pages .
• Chi tiết trang web: Cung cấp thông tin chi tiết về trang web đã chọn như ID trang web, URL trang web, phiên bản mô hình dữ liệu, v.v.

Các hành động của Sites khác

Các trang web được lưu trữ cục bộ nhưng chưa có trong môi trường của bạn cung cấp các hành động sau:

• Tải trang web lên: Tải trang web cục bộ lên môi trường được kết nối của bạn. Sau khi tải lên, trang web sẽ xuất hiện trong danh sách Trang web không hoạt động, nơi bạn có thể kích hoạt trang web từ trang chủ. Power Pages
• Hiển thị trong Explorer: Điều hướng đến thư mục cục bộ chứa mã của trang web.

Biểu tượng tệp

Tiện ích mở rộng Visual Studio Code cho Power Pages tự động nhận dạng và hiển thị biểu tượng cho các tệp và thư mục bên trong nội dung trang web đã tải xuống.

Visual Studio 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 Power Pages. Để xem các biểu tượng tệp cụ thể cho trang web của bạn, bạn phải cập nhật Visual Studio phiên bản Mã để sử dụng Power Pages chủ đề biểu tượng tệp cụ thể.

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

1. Mở Visual Studio Code.

2. Vào Tệp>Tùy chọn>Chủ đề>Chủ đề biểu tượng tệp

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

   

Bản xem trước trang web

Hành động xem trước sử dụng tiện ích mở rộng Microsoft Edge DevTools cho Visual Studio Mã để cung cấp bản xem trước trang web trong trình chỉnh sửa. Tính năng này chạy Microsoft Edge DevTools và trình duyệt Microsoft Edge nhúng với chức năng mô phỏng thiết bị ngay bên trong VS Code, cung cấp cho bạn hầu như tất cả các khả năng gỡ lỗi và kiểm tra giống như trong Microsoft Edge DevTools đầy đủ.

Bản xem trước luôn hiển thị những thay đổi bạn đã tải lên trang web của mình, vì vậy hãy đảm bảo rằng bạn đẩy mọi chỉnh sửa cục bộ trước khi mở bản xem trước. Mỗi lần bạn khởi chạy bản xem trước, bộ nhớ đệm của trang web sẽ tự động xóa để đảm bảo bạn xem được các bản cập nhật mới nhất.

Để mở bản xem trước, hãy nhấp chuột phải vào trang web đang hoạt động của bạn trong Power Pages Hành động và chọn Xem trước. Hành động này sẽ mở trình duyệt nhúng Microsoft Edge trỏ đến trang web bạn đã chọn.

Khung xem trước sẽ mở ra ở phía bên phải.

Tự động hoàn thành

Tính năng tự động hoàn thành trong tiện ích mở rộng Visual Studio 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.

Thẻ Liquid

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

Bắt đầu nhập để xem danh sách thẻ Liquid. Chọn thẻ để định dạng đúng và tiếp tục nhập dữ liệu.

Đối tượng Liquid

Bạn có thể xem các bước hoàn thành mã của đối tượng Liquid bằng cách nhập {{ }}. Đặt con trỏ giữa các dấu ngoặc rồi chọn <CTRL + space> để hiển thị danh sách các đối tượng Liquid có thể chọn. Nếu đối tượng có nhiều thuộc tính hơn, bạn có thể nhập . rồi chọn <CTRL + space> lần nữa để xem các thuộc tính cụ thể của đối tượng Liquid.

Thẻ mẫu

Bạn có thể xem các gợi ý mẫu web của Power Pages bằng cách đặt con trỏ vào {include ' '} câu lệnh và chọn <CTRL> - space. Danh sách các mẫu web hiện có sẽ xuất hiện để bạn lựa chọn.

Tạo, xóa và đổi tên các đối tượng trang web

Từ bên trong Visual Studio Code, bạn có thể tạo, xóa và đổi tên các thành phần trang web sau:

• Trang web
• Mẫu trang
• Mẫu web
• Đoạn mã nội dung
• Tài nguyên mới (tệp web)

Tạo hoạt động

Bạn có thể sử dụng các tùy chọn menu ngữ cảnh để tạo các thành phần trang web mới. Nhấp chuột phải vào một trong các đối tượng được hỗ trợ, chọn Power Pages và chọn loại đối tượng trang web bạn muốn tạo.

Ngoài ra, bạn có thể sử dụng bảng lệnh của Visual Studio Code bằng cách chọn Ctrl + Shift + P.

Bạn cần chỉ định thêm tham số để tạo đối tượng.

Đối tượng	Tham số
Trang web	Tên, mẫu trang, trang chính
Mẫu trang	Tên, mẫu web
Mẫu web	Tên
Đoạn mã nội dung	Tên và đoạn mã sẽ là HTML hay văn bản.
Tài nguyên mới (tệp web)	Tên, trang chính và chọn tệp để tải lên.

Thao tác đổi tên và xóa

Từ phần điều hướng tệp, bạn có thể sử dụng menu ngữ cảnh để đổi tên hoặc xóa các thành phần Power Pages.

Lưu ý

Có thể khôi phục các đối tượng đã xóa từ thùng rác trên màn hình nền.

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 tự động hoàn thành chỉ hỗ trợ chức năng hạn chế.

Thông tin liên quan

Power Pages hỗ trợ cho Microsoft Power Platform CLI (xem trước)