Roll20 Sheet Dev

Tools for Roll20, to help with Character Sheet Development.

• Roll20 Sheet Dev
  • Features
    • HTML
      • Rolltemplates
    • JS
    • PUG
    • CSS/SCSS
  • Examples
  • Contribute
• Related Extensions

Features

HTML

• recognize, autocompletes, and on hover, shows documentation + links
  • elements: <rolltemplate> and <charmancer>
  • global attributes: data-i18nand it's variants
  • recognize: button type="roll", type="action"; input type="hidden" as options
• snippets: common roll20 elements & fills out with relevant attributes

Rolltemplates

Roll20 rolltemplate syntax is higlighted in .html-files using Handlebar-syntax

Any files named .rolltemplate or .rtemplate will show HTML & rolltemplate syntax highlight

JS

• <script type="text/worker">-blocks in .html-files now shows js highlight properly

PUG

• snippets: common roll20 elements & fills out with relevant attributes
  • e.g. inputs always have name="attr_", buttons recognize type="roll" & "action"
• autocomplete & documentation links: partial

CSS/SCSS

• couple of snippets

Examples

Roll20 Sheet Development documentation, and rolltemplate/sheetworker syntax highlight:

Pug-snippet expanded

Contribute

repo: Anduh/vscode-roll20sheetdev

You can help even without knowing how VS Code extensions work. Here are a few concrete parts to start from:

• add more html/pug/css/js Snippets: if you look at the existing snippets for the plugin, you can follow the same patterns and expand the collection of snippets easily.
  • About:VS Code Snippet Syntax

Related Extensions

Roll20 Macros is a related extension, which provides syntax highlight for Roll20's macro & dice syntax.