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

Visual Studio Code là một trình soạn thảo mã nguồn nhẹ, mạnh mẽ dành cho Windows, macOS và Linux. Nó hỗ trợ JavaScript, TypeScript và Node.js và có một hệ sinh thái tiện ích mở rộng phong phú cho các ngôn ngữ khác như C++, C#, Java, Python, PHP và Go cũng như thời gian 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 của mình thông qua extensions. Tiện ích mở rộng Visual Studio Code có thể thêm nhiều tính năng hơn vào 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

Công cụ Power Platform 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ẵ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 trang web bằng Visual Studio Code. Sử dụng tiện ích mở rộng Visual Studio Code, bạn cũng có thể đặt 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 Code để 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.

Ảnh động giải thích cách cài đặt và thiết lập Power Platform Tools.

Đ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à đặt cấu hình Visual Studio Code. Thông tin thêm: Tải xuống Visual Studio Code
Đặt cấu hình môi trường và hệ thống của bạn để hỗ trợ CI/CD Power Pages bằng CLI. Thông tin thêm: Microsoft Power Platform CLI (xem trước)

Cài đặt tiện ích mở rộng Visual Studio Code

Sau khi 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 cụ Power Platform cho Visual Studio Code.

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

Mở Visual Studio Code.
Chọn Tiện ích mở rộng trong ngăn bên trái.
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.
Tìm kiếm và chọn Power Platform Tools.

Chọn Power Platform Tools.
Chọn Cài đặt.
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 Công cụ Power Platform tự động cho phép sử dụng các lệnh CLI Microsoft Power Platform từ bên trong Visual Studio Code thông qua Visual Studio Thiết bị đầu cuối tích hợp.

Hành động Power Pages

Power Pages Hành động hợp lý hóa việc quản lý trang web và giảm sự phụ thuộc vào các lệnh CLI Microsoft Power Platform. 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 Code.

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:

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

Thay đổi môi trường cho các trang web
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 design studio: Mở site trong Power Pages design studio.
Chạy sàng lọc CodeQL: Thực hiện phân tích mã tĩnh trên các tệp HTML và JavaScript để xác định các lỗ hổng trong cơ sở mã của bạn bằng CodeQL. Tùy chọn này chỉ khả dụng cho các trang web được tải xuống cục bộ, được biểu thị bằng thẻ Hiện tại trong danh sách trang web đang hoạt động.
So sánh với cục bộ: Mở chế độ xem so sánh để xác định sự khác biệt giữa không gian làm việc cục bộ và môi trường từ xa. Xem thêm chi tiết về tính năng so sánh cấu hình trang web.

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:

Open Site Management: Mở site 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 xác định và hiển thị các 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.

Danh sách các tệp trong mẫu sơ cấp với chủ đề biểu tượng tệp dành riêng cho trang web.

Visual Studio Code sử dụng mặc định không hiển thị Power Pages biểu tượng cụ thể. Để xem các biểu tượng tệp cụ thể cho các trang web của bạn, bạn phải cập nhật phiên bản Visual Studio Code để sử dụng chủ đề biểu tượng tệp cụ thể của Power Pages.

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

Mở Visual Studio Code.
Đi tớiTùy chọntệpChủđề Biểu tượng tệp Chủ đề.
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 DevTools Microsoft Edge cho Visual Studio Code để 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 được nhúng với tính năng mô phỏng thiết bị ngay bên trong VS Code, cung cấp cho bạn gần như tất cả các khả năng gỡ lỗi và kiểm tra giống nhau được tìm thấy 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 bấm 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 Microsoft Edge được nhúng trỏ đến trang web bạn đã chọn.

Ảnh chụp màn hình của hành động xem trước trang web Power Pages.

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

Ảnh chụp màn hình hiển thị danh sách tệp, mở tệp trong trình chỉnh sửa Visual Studio Code và bản xem trước ở phía bên phải.

So sánh cấu hình trang web

Sử dụng tùy chọn So sánh với cục bộ để xác định sự khác biệt giữa không gian làm việc cục bộ của bạn và cấu hình trang web trực tiếp trong môi trường từ xa. Tính năng này giúp bạn phát hiện các thay đổi ngoài ý muốn, khắc phục sự cố dành riêng cho môi trường và duy trì tính nhất quán trước khi bạn đồng bộ hóa cấu hình trang web của mình.

Khi bạn chọn hành động này, phần So sánh trang web sẽ mở ra trong Công cụ trong dạng xem Hành động Power Pages. Phần này hiển thị tất cả các tệp trong không gian làm việc cục bộ của bạn khác với môi trường, đánh dấu:

Thêm: Các tệp mới được tạo trong không gian làm việc cục bộ không tồn tại trong môi trường.
Đã sửa đổi: Các tệp có mã hoặc siêu dữ liệu khác nhau giữa phiên bản cục bộ và phiên bản môi trường.
Đã xóa: Các tệp đã bị xóa khỏi không gian làm việc cục bộ nhưng vẫn tồn tại trong môi trường.

Để so sánh cấu hình site trực tiếp với không gian làm việc cục bộ:

Trong thanh bên Explorer, hãy mở rộng ngăn Power Pages Hành động.
Trong danh sách Trang web Hoạt động/Không hoạt động , bấm chuột phải vào trang web bạn muốn so sánh.
Chọn So sánh với Địa phương.

Ảnh chụp màn hình hiển thị tùy chọn So sánh với cục bộ trong danh sách trang web.

Để so sánh một thư mục cụ thể:

Trong thanh bên Explorer, hãy chọn một thư mục (chẳng hạn như ) từ không gian làm việc cục bộ của bạn.
Nhấp chuột phải và chọn Power Pages>So sánh với Môi trường.

Ảnh chụp màn hình hiển thị tùy chọn so sánh trong thư mục không gian làm việc cục bộ.

Quản lý kết quả so sánh

Khi tab So sánh trang web hoạt động với các thay đổi, bạn có thể nhấp chuột phải vào danh sách so sánh để truy cập các hành động bổ sung:

Mở tất cả các khác biệt: Mở trình chỉnh sửa khác biệt Visual Studio Code cho mọi tệp trong danh sách để xem lại tất cả các thay đổi đồng thời.
So sánh làm mới: Quét lại không gian làm việc cục bộ và môi trường từ xa để cập nhật danh sách với những thay đổi mới nhất.
Xuất dưới dạng Báo cáo HTML: Tạo một tài liệu HTML có thể chia sẻ chi tiết tất cả các khác biệt được phát hiện.
Xuất dưới dạng JSON: Xuất dữ liệu so sánh ở định dạng JSON cho quy trình làm việc tự động hoặc báo cáo tùy chỉnh. Bạn có thể chia sẻ tệp đã xuất này với các thành viên trong nhóm, những người có thể nhập tệp đó vào chế độ xem của riêng họ bằng cách nhấp chuột phải vào phần So sánh trang web và chọn tùy chọn Nhập so sánh .
Hủy tất cả các thay đổi cục bộ: Hoàn nguyên tất cả các chỉnh sửa cục bộ để khớp với phiên bản hiện có trong môi trường từ xa.
Xóa so sánh: Đóng phiên so sánh hiện tại và xóa tab kết quả.

Tiền bo

Xuất và chia sẻ dữ liệu so sánh dưới dạng JSON cho phép nhóm của bạn cộng tác để giải quyết sự khác biệt về cấu hình mà không yêu cầu mọi người phải kết nối với cùng một môi trường.

Ảnh chụp màn hình hiển thị các tùy chọn có sẵn trong tab so sánh trang web

Tự động hoàn thành

Khả 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 yếu tố tự động hoàn thành có liên quan thông qua IntelliSense.

Ảnh chụp màn hình ví dụ về tính năng tự động hoàn thành cho ID mẫu trang.

Thẻ Liquid

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

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.

Ảnh chụp màn hình một đoạn trích có ví dụ về việc hoàn thành thẻ Liquid.

Đố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 để 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 lần nữa để xem các thuộc tính cụ thể của đối tượng Liquid.

Ảnh chụp màn hình hiển thị quá trình nhập vào một vật thể Liquid.

Thẻ mẫu

Bạn có thể xem các đề xuất mẫu web Power Pages bằng cách đặt con trỏ vào câu lệnh {include ' '} 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.

Ảnh chụp màn hình thẻ mẫu.

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 Visual Studio Code bằng cách chọn Ctrl + Shift + P.

Tạo đối tượng mới.

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ừ đ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.