Zum Hauptinhalt springen

Template support

For easier development of element templates, modellers and developers usually want two things:

  1. auto-completion
  2. syntax highlighting

The following explains how to easily obtain both in Visual-Studio-Code.

Automatic completion​

The following options are available to obtain automatic completion for element-templates.

Element templates generated by Miranum-Console​

With Miranum-IDE generated element templates automatically contain support for auto-complete in VS-Code. So you don't have to do anything in this case.

Own element-templates​

If you have your own element-templates you can achieve auto-completion in VS-Code by adding a "$schema" property at the top of the template. Camunda's schema for element templates can be found at: https://unpkg.com/@camunda/element-templates-json-schema/resources/schema.json

It should look like this: Single Schema

Automatic completion for all schemas​

With the following steps, you can obtain automatic completion by default in VS-Code:

  1. go to your settings in VS-Code (located at: Code/File -> Preferences -> Settings).

  2. search for "JSON" and click on "Edit in settings.json". Json Settings

  3. The settings.json file should open automatically. You can define custom schemas in "json.schemas": [...]. For this, a new entry must be created as follows: Create a JavaScript object with the attributes "fileMatch" and "url". Under "fileMatch" you enter something that identifies the files for which the schema is to be applied (usually the file extension). Under "url" you enter the url of the schema you want to use. In our case, save the following schema and create an entry for it in settings.json. This should then look something like this: Schema Entry

  4. Enjoy auto-completion and suggestions by using the key combination: *Ctrl + Space

Credit to FrontAid and their blog.

JSON Syntax Highlighting​

If your element templates do not end in .json, you will need to explain this to VS code first. For this, please follow steps 1 and 2 as given in autocompletion-for-all-schemas to get to the "settings.json". In this, file associations can be defined under "files.associations". So you enter your extension as the key and ".json" as the value. Here is an example in which element templates end in ".element-template". File Associations - Single Schema