In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed.
For more information, please visit EXTENTOOL.
First, use Yeoman and VS Code Extension Generator to scaffold a TypeScript or JavaScript project ready for development.
If you do not want to install Yeoman for later use, run the following command:
npx --package yo --package generator-code -- yo code
If you instead want to install Yeoman globally to ease running it repeatedly, run the following command:
npm install --global yo generator-code
yo code
For a TypeScript project, fill out the following fields:
# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm
# ? Do you want to open the new folder with Visual Studio Code? Open with `code`
Inside the editor, open src/extension.ts and press F5 or run the command Debug: Start Debugging from the Command Palette (&#;&#;P (Windows, Linux Ctrl+Shift+P)). This will compile and run the extension in a new Extension Development Host window.
Run the Hello World command from the Command Palette (&#;&#;P (Windows, Linux Ctrl+Shift+P)) in the new window:
You should see the Hello World from HelloWorld! notification showing up. Success!
If you aren't able to see the Hello World command in the debug window, check the package.json file and make sure that engines.vscode version is compatible with the installed version of VS Code.
Let's make a change to the message:
extension.ts.You should see the updated message showing up.
Here are some ideas for things for you to try:
package.json Extension Manifest to extend VS Code, such as adding commands, menus, or keybindings to your extension.vscode.window.showInformationMessage with another VS Code API call to show a warning message.VS Code's built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Run and Debug view in the left to check a variable's value. The Debug Console allows you to evaluate expressions.
You can learn more about debugging Node.js apps in VS Code in the Node.js Debugging Topic.
In the next topic, Extension Anatomy, we'll take a closer look at the source code of the Hello World sample and explain key concepts.
You can find the source code of this tutorial at: https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample. The Extension Guides topic contains other samples, each illustrating a different VS Code API or Contribution Point, and following the recommendations in our UX Guidelines.
In this guide, we mainly describe how to develop VS Code extension with TypeScript because we believe TypeScript offers the best experience for developing VS Code extensions. However, if you prefer JavaScript, you can still follow along using helloworld-minimal-sample.
This is also a good time to review our UX Guidelines so you can start designing your extension user interface to follow the VS Code best practices.
Visual Studio 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.
Visual Studio Code allows you to extend your capability through extensions. Visual Studio Code extensions can add more features to the overall experience. With the release of this feature, you can now use the Visual Studio Code extension to work with Power Pages.
If you want to learn more, please visit our website Extension Tools.
The Power Platform Tools adds the capability to configure websites using Visual Studio Code, and use the built-in Liquid language IntelliSense enabling help with code completion, assistance, and hinting while customizing websites interface using Visual Studio Code. Using the Visual Studio Code extension, you can also configure portals through the Microsoft Power Platform CLI.
Note
Before using the Visual Studio Code extension for Power Pages, you must:
Download, install, and configure Visual Studio Code. More information: Download Visual Studio Code
Configure your environment and system for Power Pages CI/CD support using CLI. More information: Microsoft Power Platform CLI (preview)
After you install Visual Studio Code, you need to install the extension for the Power Platform tools plug-in for Visual Studio Code.
To install the Visual Studio Code extension:
Open Visual Studio Code.
Select Extensions from the left pane.
Select the Settings icon from the top-right on the extensions pane.
Search for and select Power Platform Tools.
Select Install.
Verify the extension is installed successfully from the status messages.
To authenticate against a Microsoft Dataverse environment, and to download website content, refer to the tutorial Use Microsoft Power Platform CLI with Power Pages - download website content.
Tip
The Power Platform Tools Extension automatically enables using Microsoft Power Platform CLI commands from within Visual Studio Code through Visual Studio Integrated Terminal.
The Visual Studio Code extension for Power Pages automatically identifies and shows icons for files and folders inside the downloaded website content.
Visual Studio Code uses the default file icon theme which doesn&#;t show Power Pages specific icons. To view file icons specific to your websites, you&#;ll have to update the Visual Studio Code instance to use the Power Pages specific file icon theme.
To enable a portals-specific file-icon theme:
Open Visual Studio Code.
Go to File > Preferences > Theme > File Icon Theme
Select the theme for PowerApps portals Icons.
The Visual Studio Code extension enables a live preview option to view the Power Pages content page inside the Visual Studio Code interface during the development experience.
To see the preview, select from the top-right when having an HTML file open in edit mode.
The preview pane opens on the right side of the page being edited.
The preview feature requires that the other files are also open in the same Visual Studio Code session that makes up the HTML markup for the preview to show. For example, if only the HTML file is opened without the folder structure opened using Visual Studio Code, you&#;ll see the following message.
When this problem occurs, open the folder using File > Open folder and select the downloaded website content folder to open before you try to preview again.
The autocomplete capability in the Visual Studio Code extension shows the current context being edited, and the relevant autocomplete elements through IntelliSense.
When customizing downloaded content using Visual Studio Code, you can now use IntelliSense for Power Pages Liquid tags.
Start by typing and a list of Liquid tags will appear, once you select the tag, it will be correctly formatted and ready for more input.
You can see Liquid object code completions by entering {{ }}. With the cursor placed between the brackets, select <CTRL + space> to display a list of Liquid objects that you can select. If the object has more properties, you can enter a . and then select <CTRL + space> again to see specific properties of the Liquid object.
You can see Power Pages web template suggestions by place your cursor in the {include ' '} statement and select <CTRL> - space. A list of existing web templates will appear for you to select.
From within Visual Studio Code, you're able to create, delete, and rename the following website components:
You can use the context menu options to create new website components, right-select one of the supported objects, choose Power Pages and select the website object type you wish to create.
Alternatively, you can use the Visual Studio Code command palette by selecting Ctrl + Shift + P.
You'll need to specify more parameters to create the object.
Object Parameters Web pages Name, page template, parent page Page templates Name, web template Web templates Name Content snippets Name, and if the snippet will be HTML or text. New assets (Web files) Name, parent page, and select file to upload.From the file navigation, you can use the context menu to rename or delete Power Pages components.
Note
Deleted objects can be restored from the desktop recycle bin.
The following limitations currently apply to the Power Platform Tools for portals:
Power Pages support for Microsoft Power Platform CLI (preview)
The company is the world’s best telescopic tools supplier. We are your one-stop shop for all needs. Our staff are highly-specialized and will help you find the product you need.