Power Pages code editing improvements with Visual Studio Code

Visual Studio Code Power Platform Tools extension allows code-first professional developers to configure and customize any Power Pages site within Visual Studio Code. With the recent release (version v1.1.20), we are improving IntelliSense support and adding support for create, delete, and rename operations for Power Pages site components.

Feature capabilities

These improvements will include following capabilities:

  • Improved IntelliSense support
  • Create, delete, and rename operations support

Note: You will need to ensure that node.js is downloaded and installed on the same workstation as Visual Studio Code for the Power Pages features to work.

Improved IntelliSense support

Visual Studio Code provides IntelliSense support for JavaScript, HTML, CSS and more out of the box. With these improvements we are adding support for Power Pages Liquid objects and Template tags.

Liquid Objects support

You can see liquid object code completions when you trigger IntelliSense by typing “{{<CTRL + space >}}”.

Template tags support

You can see Power Pages Template suggestion as code complete when you trigger IntelliSense by typing Ctrl+Space.

Create, delete, and rename operations support

You can perform Create/Delete/Rename operations on the following Power Pages site components.

  • Web pages
  • Page templates
  • Web templates
  • Content snippets
  • New assets (Web files)

Create operation support

Pro-developers can use context menu options or Command Palette (Ctrl + Shift + P) for create operation.

Use context menu to perform create operation
Use Command Palette to perform create operation

Delete or Rename operation support

Pro-developers can use context menu to perform delete or rename operations. They can select the file which they want to delete or rename and choose respective operation from context menu items.

Deleted files will be moved to desktop recycle bin, and you can restore these files.

Use rename and delete operations from context menu

Demo

We are looking forward to your feedback

Your feedback will help us continue to build on and improve the capabilities of this feature. We want to hear from you!

Please refer to Visual Studio Code feature documents for more details.

Thank you,

Neeraj Nandwana