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 を使用して Web サイトを構成し、組み込みの Liquid 言語 IntelliSense を使用する機能が追加されており、Visual Studio Code を使用して Web サイト インターフェイスをカスタマイズする際に、コード補完、支援、およびヒントに関するヘルプを有効にします。 Visual Studio Code 拡張機能を使用して、Microsoft Power Platform CLI のポータル サポートでポータルを構成することもできます。
注意
前提条件
Visual Studio に Power Pages Code 拡張機能を使用する前に、次の操作を行う必要があります。
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 Tool プラグインの拡張機能をインストールする必要があります。
Visual Studio Code 拡張機能をインストールするには:
Visual Studio Code を開きます。
左側ペインから 拡張機能 を選択します。
拡張機能ペインの右上から設定アイコンを選択します。
Power Platform Tools を検索して選択します。
インストールを選択します。
ステータス メッセージから、拡張機能が正常にインストールされていることを確認します。
Web サイト コンテンツのダウンロード
Microsoft Dataverse 環境に対して認証を行い、Web サイト コンテンツをダウンロードするには、チュートリアル Power Pages で Microsoft Power Platform CLI を使用する - Web サイト コンテンツをダウンロードするを参照してください。
チップ
Power Platform Tools 拡張機能では、 Visual Studio Code 内から Visual Studio 統合ターミナルを通じて Microsoft Power Platform CLI コマンドを使用することを自動的に可能にします。
ファイル アイコン
Power Pages の Visual Studio Code 拡張機能は、ダウンロードした Web サイト コンテンツ内のファイルとフォルダーのアイコンを自動的に識別して表示します。
Visual Studio Code は既定のファイル アイコン テーマを使用します。ここには、Power Pages 固有のアイコンは表示されません。 Web サイトに固有のファイル アイコンを表示するには、Power Pages 固有のファイル アイコン テーマを使用するように Visual Studio Code インスタンスを更新する必要があります。
ポータル固有のファイル アイコン テーマを有効にするには:
Visual Studio Code を開きます。
ファイル>基本設定>テーマ>ファイル アイコン テーマに移動します
PowerApps ポータル アイコンのテーマを選択します。
ライブ プレビュー
Visual Studio Code 拡張により、ライブ プレビュー オプションを開始して、開発エクスペリエンス中の Visual Studio Code インターフェースで Power Pages コンテンツ ページを表示できます。
プレビューを表示するには、HTML ファイルを編集モードで開いている状態で、右上の 
を選択します。
編集中のページの右側にプレビュー ペインが開きます。
プレビュー機能では、プレビューを表示するための HTML マークアップを構成する他のファイルも同じ Visual Studio Code セッションで開かれている必要があります。 たとえば、Visual Studio Code を使用してフォルダー構造を開かずに HTML ファイルのみを開くと、次のメッセージが表示されます。
この問題が発生した場合は、ファイル > フォルダを開くを使用してフォルダを開き、ダウンロードした Web サイト コンテンツ フォルダを選択して開き、再度プレビューを試みます。
Autocomplete
Visual Studio Code 拡張機能のオートコンプリート機能は、編集中の現在のコンテキストと IntelliSense による関連するオートコンプリート要素を表示します。
Liquid タグ
Visual Studio Code を使用してダウンロードしたコンテンツをカスタマイズする際に、Power Pages Liquid タグ に IntelliSense を使用できるようになりました。
入力を開始すると、Liquid タグのリストが表示されます。タグを選択すると、正しくフォーマットされ、さらに入力できるようになります。
Liquid オブジェクト
{{ }}と入力すると、Liquidオブジェクト のコード補完が表示されます。 括弧の間にカーソルを置いて、<CTRL + space> を選択すると、選択できる液体オブジェクトのリストが表示されます。 オブジェクトにさらにプロパティがある場合は、a . と入力し、<CTRL + space> をもう一度選択して、Liquid オブジェクトの特定のプロパティを表示できます。
テンプレート タグ
Power Pages Web テンプレートの提案を表示するには、{include ' '} ステートメントにカーソルを置き、<CTRL> - space を選択します。 選択できる既存の Web テンプレートのリストが表示されます。
Web サイト オブジェクトの作成、削除、名前変更
Visual Studio Code 内から、次の Web サイト コンポーネントを作成、削除、および名前変更できます。
- Web ページ
- ページ テンプレート
- Web テンプレート
- コンテンツ スニペット
- 新しいアセット (Web ファイル)
操作の作成
コンテキスト メニュー オプションを使用して、新しい Web サイト コンポーネントを作成し、サポートされているオブジェクトの 1 つを右クリックして、 Power Pages を選択し、作成する Web サイト オブジェクト タイプを選択します。
または、Ctrl + Shift + P を選択して、Visual Studio Code コマンド パレットを使用することもできます。
オブジェクトを作成するには、さらにパラメーターを指定する必要があります。
| Object | Parameters |
|---|---|
| Web ページ | 名前、ページ テンプレート、親ページ |
| ページ テンプレート | 名前、Web テンプレート |
| Web テンプレート | 件名 |
| コンテンツ スニペット | 名前、およびスニペットが HTML かテキストか。 |
| 新しいアセット (Web ファイル) | 名前、親ページ、アップロードするファイルを選択します。 |
操作の名前変更と削除
ファイル ナビゲーションから、コンテキスト メニューを使用して Power Pages コンポーネントの名前を変更または削除できます。
注意
削除されたオブジェクトは、デスクトップのごみ箱から復元できます。
制限
現在、以下の制限がポータルの Power Platform Tools に適用されています:
参照
Microsoft Power Platform CLI のPower Pages サポート (プレビュー)