Awesome

Serverless Workflow Specification - VSCode Extension

Provides code hints and snippets for the CNCF Serverless Workflow Specification

Conformance

This plugin conforms to the latest Serverless Workflow specification.

Features

Code Hints
Code Snippets
Preview Workflow Diagram
Exporting Diagram to SVG or PNG

Code Hints

This extension provides Code Hints, Snippets, and Diagram generation for Serverless Workflow definitions (JSON and YAML).

Code hints include:

Prompting correct attribute names as you type.
Displaying of mismatched types or missing required properties
Allows use of Ctrl+Space to show available properties
Code completion for enum types

Note that to enable the YAML code completion support, you must install the VSCode YAML extension first.

Code Snippets

This extension also provides Code Snippets for the serverless workflow specification markup:

swj: Create a new JSON workflow definition
swy: Create a new YAML workflow definition
adding more in the next version

Preview Workflow Diagram

You can preview the workflow diagram while working on a workflow:

Opening the Command Palette (⇧⌘P or Ctrl + Shift + P)
Selecting: "Serverless Workflow: Preview Diagram"

Or by using the hotkey alt+shift+s p

You can also generate a preview for multiple files by selecting them in the explorer, right-click and select from the menu "Serverless Workflow: Preview Diagram"

Exporting Diagram to SVG or PNG

Similarly to the preview, you can output the diagram to either SVG or PNG format.

The commands are "Serverless Workflow: Export Diagram to SVG" (alt+shift+s v) or "Serverless Workflow: Export Diagram to PNG" (alt+shift+s i), available in the command palette or by right clicking the files.

Building from source

If you do not want to get this extension from the Marketplace or would like to build and test the latest changes/updates locally, follow these steps:

Clone the extension git repository

git clone https://github.com/serverlessworkflow/vscode-extension.git
cd vscode-extension

Build the necessary modules

npm install

Build and package the extension with vsce:

vsce package

To install vsce run:

npm install -g vsce

vsce will create a serverless-workflow-vscode-extension-$VERSION$.vsix file which you have to install to your ide, for this run:

code --install-extension serverless-workflow-vscode-extension-$VERSION$.vsix

To uninstall the extension run:

code --uninstall-extension serverless-workflow-vscode-extension-$VERSION$.vsix