Edit

Use the Visual Studio Code extension

  • Article
  • 2 minutes to read

Note

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.

Overview

Visual Studio Code (VS Code) is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, and Go) and runtimes (such as .NET and Unity). For more information, see Get started with VS Code.

VS Code allows you to extend your capability through extensions. VS Code extensions can add more features to the overall experience. With the release of this feature, you can now use the VS Code extension to work with Power Apps portals.

VS Code extension for portals

The Power Platform Tools adds the capability to configure portals using VS Code, and use the built-in Liquid language IntelliSense enabling help with code completion, assistance, and hinting while customizing portals interface using VS Code. Using the VS Code extension, you can also configure portals through the portals support for Microsoft Power Platform CLI.

Animation that explains how to install and set Power Platform Tools.

Prerequisites

Before using the VS Code extension for Power Apps portals, you must:

Install VS Code extension

After you install Visual Studio Code, you need to install the extension for the Power Apps portals plug-in for VS Code.

To install the VS Code extension:

  1. Open Visual Studio Code.

  2. Select Extensions icon. (Extensions) from the left pane.

    Select extensions.

  3. Select Settings icon. from the top-right on the extensions pane.

  4. Search for and select Power Platform Tools.

    Select Power Platform Tools.

  5. Select Install.

  6. Verify the extension is installed successfully from the status messages.

Download portals content

To authenticate against a Microsoft Dataverse environment, and to download portals content, refer to the tutorial Use Microsoft Power Platform CLI with portals - download portals content.

Tip

The Power Platform Tools Extension automatically enables using Microsoft Power Platform CLI commands from within VS Code through Visual Studio Integrated Terminal.

Snippet support

When customizing downloaded content using VS Code, you can now use IntelliSense for Power Apps portals Liquid tags.

Snippet with an example of entity liquid tag completion.

File icons

The VS Code extension for portals automatically identifies and shows icons for files and folders inside the downloaded portals content.

List of files in a starter portal with portals-specific file icon theme.

VS Code uses the default file icon theme which doesn’t show portals-specific icons. To view file icons specific to your portals, you’ll have to update the VS Code instance to use the portals-specific file icon theme.

To enable a portals-specific file-icon theme:

  1. Open Visual Studio Code.

  2. Go to File > Preferences > File Icon Theme

  3. Select the theme for Power Apps portals Icons.

    Select the theme for Power Apps portals icons.

Live preview

The Visual Studio Code extension enables a live preview option to view the portals content page inside the Visual Studio Code interface during the development experience.

To see the preview, select Preview button. from the top-right when having an HTML file open in edit mode.

Page preview.

The preview pane opens on the right side of the page being edited.

A screen with file list, open file in VS Code editor, and a preview on the right-side.

The preview feature requires that the other files are also open in the same VS Code session that make up the HTML markup for the preview to show. For example, if only the HTML file is opened without the folder structure opened using VS Code, you’ll see the following message.

Running the contributed command: 'microsoft-powerapps-portals.preview-show' failed.

When this problem occurs, open the folder using File > Open folder and select the downloaded portal content folder to open before you try to preview again.

Autocomplete

The autocomplete capability in the VS Code extension shows the current context being edited, and the relevant autocomplete elements through IntelliSense.

An example of autocomplete for the page template ID.

Limitations

The following limitations currently apply to the Power Platform Tools for portals:

See also

Portals support for Microsoft Power Platform CLI (preview)