Visual Studio Code Example Extension

broken image


  1. Visual Studio Code Example Extension Tool
  2. Best Visual Studio Code Extension

Features

With AdaptiveCards Studio you can author cards directly in Visual Studio Code. The Extension automatically detects all Adaptive Cards in your working space and lets you easily edit the card template and sample data.

The extension can be installed either from Marketplace, integrated extension manager inside Visual Studio Code, or using the VSIX installation file available as a download on this page. I'm gonna go with the integrated extension manager, but feel free to use any of the other two methods.

Extension Settings

Visual
  • Calling CMake using Visual Studio Code extensibility. There are currently two Visual Studio Code extensions in the Visual Studio Code marketplace. The first extension provides the language service support for CMake the latter will allow for building your CMake targets. For a good CMake experience in Visual Studio Code install both extensions.
  • One place for all extensions for Visual Studio, Azure DevOps Services, Azure DevOps Server and Visual Studio Code. Discover and install extensions and subscriptions to create the dev environment you need.

To use the Extension you must configure it first!

This extension contributes the following settings:

  • acstudio.defaultHostConfig : The HostConfig to be used when rendering cards

Usage

Open the Adaptive Cards Panel and select a card.... thats all you have to do :)

Testing Cards

Login to your M365 account, click the outlook icon to send the card to yourself by email.

Snippets

The Extension comes with various snippets to make authoring cards even easier. Just press ctrl+space anywhere in the AdaptiveCard Json

Snippets for Adaptive Cards Elements:

  • ac-txt : TextBlock with minimum properties
  • ac-txtfull : TextBlock with all properties
  • ac-col3 : Columnset with 3 columns
  • ac-col2 : Columnset with 2 columns
  • ac-fctset : Factset
  • ac-ctr : Container
  • ac-img : Image

Snippets for Adaptive Card Samples:

  • ac-empty : A new, blank AdaptiveCard
  • ac-activityUpdate : Adaptive Cards Activity Update Sample
  • ac-expenseReport : Adaptive Cards Expense Report Sample
  • ac-inputForm : Adaptive Cards Input Form Sample

SampleData

Visual Studio Code Example Extension Tool

When editing templates its a tremendous help to have sample data available. The Extension lets you create and store sample data for your templates easily.

CMS Usage

Best Visual Studio Code Extension

The CMS interoperability is in alpha preview, to connect the extension to your self hosted CMS set the config values above to your URL and access token. The only way to get an access token right now is using developer tools in your browser and inspecting the calls when logged in to your CMS. This is an alpha proof of concept and will have a proper login mechanism soon.





broken image