將 Visual Studio Code 延伸模組
Visual Studio Code 是輕量型但功能強大的原始程式碼編輯器，可在桌面上執行，而且可供 Windows、macOS 及 Linux 使用。 內建支援 JavaScript、TypeScript 和 Node.js，並擁有針對其他語言 (例如 C++、C#、Java、Python、PHP 和 Go) 和執行時 (例如 .NET 和 Unity) 的豐富擴展生態系統。 如需詳細資訊，請參閱開始使用 VS Code。
Visual Studio Code 允許您透過擴充功能來擴展功能。 Visual Studio Code 擴充功能可將更多功能新增至整體體驗。 此功能發行後，您現在可以使用 Visual Studio Code 擴充功能來處理 Power Pages。
Power Pages 的 Visual Studio Code 擴充功能
Power Platform Tools 新增使用 Visual Studio Code 設定網站的功能，並使用內建 Liquid 語言 IntelliSense，在使用 Visual Studio Code 自訂網站介面時啟用有關程式碼完成、協助和提示的説明。 您也可以使用 Visual Studio Code 擴充功能，透過 Microsoft Power Platform CLI 來設定入口網站。
注意
先決條件
將 Visual Studio Code 擴充功能用於 Power Pages 之前，您必須：
下載、安裝及設定 Visual Studio Code。 更多資訊：下載 Visual Studio Code
使用 CLI 設定您的環境和系統以取得 Power Pages CI/CD 支援。 其他資訊：Microsoft Power Platform CLI (預覽版)
安裝 Visual Studio Code 擴充功能
安裝 Visual Studio Code 後，您必須為 Visual Studio Code 安裝適用於 Power Platform Tools 外掛程式的擴充功能。
若要安裝 Visual Studio Code 擴充功能：
打開 Visual Studio Code。
從左窗格選取延伸模組。
選取延伸模組窗格右上方的設定圖示。
搜尋並選取 Power Platform Tools。
選取安裝。
從狀態訊息確認已成功安裝延伸模組。
下載網站內容
若要對 Microsoft Dataverse 環境進行驗證，並下載網站內容，請參閱教學課程將 Microsoft Power Platform CLI 與 Power Pages 搭配使用 - 下載網站內容。
提示
Power Platform Tools 擴充功能透過 Visual Studio 整合式終端自動啟用從 Visual Studio Code 中使用 Microsoft Power Platform CLI 命令。
檔案圖示
Power Pages 的 Visual Studio Code 擴充功能會自動識別並顯示下載的網站內容中的檔案和資料夾的圖示。
Visual Studio Code 使用預設檔案圖示主題，這不會顯示 Power Pages 特定圖示。 若要查看網站特定檔案圖示，您必須更新 Visual Studio Code 執行個體以使用 Power Pages 特定檔案圖示主題。
若要啟用特定入口網站的檔案圖示主題：
打開 Visual Studio Code。
移至檔案>喜好設定>主題>檔案圖示
選取 PowerApps 入口網站圖示的主題。
即時預覽
Visual Studio Code 擴充功能支援即時預覽選項，以便在開發體驗期間查看 Visual Studio Code 介面的 Power Pages 內容頁面。
若要查看預覽，請在編輯模式下開啟 HTML 檔案時，選取右上方的 
。
預覽窗格會在編輯中的頁面右側打開。
預覽功能會要求其他檔案也在構成顯示預覽 HTML 標記的同一個 Visual Studio Code 工作階段中開啟。 例如，如果使用 Visual Studio Code 開啟的只有 HTML 檔案，而沒有開啟資料夾結構時，您將會看到下列訊息。
發生此問題時，使用檔案 > 開啟資料夾開啟資料夾，並在嘗試再次預覽之前，先選取下載的網站內容資料夾。
自動完成
Visual Studio Code 擴充功能中的自動完成功能，透過 IntelliSense 顯示目前編輯中的內容，以及相關的自動完成元素。
Liquid 標籤
使用 Visual Studio Code 自訂下載內容時，現在可以將 IntelliSense 用於 Power Pages Liquid 標籤。
首先鍵入，Liquid 標籤清單即出現，只要您選取標籤，就會正確設定格式並準備好接受更多輸入。
Liquid 物件
您可以輸入 {{ }}，查看 Liquid 物件程式碼完成。 將游標置於方括弧之間後，選取 <CTRL + space> 以顯示您可選取的 Liquid 物件清單。 如果物件有更多的屬性，您可以輸入 .，然後再次選取 <CTRL + space>，以查看 Liquid 物件的特定屬性。
範本標籤
您可以將游標放在 {include ' '} 陳述式中，並選取 <CTRL> - space，以查看 Power Pages 網站範本建議。 現有網站範本的清單會出現，供您選取。
建立、刪除和重新命名網站物件
在 Visual Studio Code 中，您可以建立、移除和重新命名下列網站元件：
- 網頁
- 頁面範本
- 網站範本
- 內容片段
- 新增資產 (Web 檔案)
建立作業
您可以使用內容功能表選項來建立新的網站元件、以滑鼠右鍵選取其中一個支援的物件、選擇 Power Pages，然後選取想要建立的網站物件類型。
或者，也可以選取 Ctrl + Shift + P 來使用 Visual Studio Code 命令選擇區。
您需要指定多個參數來建立物件。
| Object | 參數 |
|---|---|
| 網頁 | 名稱、頁面範本、上層頁面 |
| 頁面範本 | 名稱、網站範本 |
| 網站範本 | 姓名 |
| 內容片段 | 名稱，以及程式碼片段是 HTML 還是文字。 |
| 新增資產 (Web 檔案) | 名稱、上層頁面，以及選取要上傳的檔案。 |
重新命名和刪除作業
在檔案導覽中，您可以使用內容功能表來重新命名或刪除 Power Pages 元件。
注意
可以從桌面資源回收筒還原已刪除的物件。
限制
下列限制目前僅適用於入口網站 Power Platform Tools：