Pebble templates for VS Code

Cobble

Every tag closed. Every name accounted for. Nothing slips through in the dark.

Install from the Marketplace Source on GitHub

Under the lamp

Every stone in place

Language support for Pebble 4.x, in .html files and in .peb and .pebble files. A language server does the work, so it stays responsive in large templates.

Typing in a Pebble template: completion of a model attribute's properties, a custom filter found in the Java sources, an error for an unclosed for loop, an end tag inserted automatically, and a jump into the Kotlin controller.

Case files

What it uncovers

  1. Case 01

    Highlighting

    The complete Pebble 4.1 syntax: interpolation, whitespace control, verbatim, and every built-in tag, filter, function and test. Pebble inside attribute values is highlighted too.

  2. Case 02

    IntelliSense

    Tags with the matching end tag first, filters, functions, tests, variables in scope, macros, block names and template names. Hover documentation and signature help for everything built in.

  3. Case 03

    Diagnostics and quick fixes

    Unclosed delimiters and tags, mismatched end tags, syntax errors, unknown filters and missing templates, with fixes to insert the end tag or create the template.

  4. Case 04

    Navigation

    Go to definition, find references and rename across the whole extends hierarchy. CodeLens shows which templates extend a layout and where each block is overridden.

  5. Case 05

    Java and Kotlin awareness

    Reads your Spring, Ktor and Javalin code to learn what each template receives: typed completion for model attributes and bean properties, and the filters, functions and tests your extensions register.

  6. Case 06

    Datastar and HTMX

    No completions or diagnostics outside Pebble syntax, so the Datastar extension and HTMX tooling keep working as before. In .peb files, Cobble brings the Datastar highlighting along.

The first stone

Bring it in

From the command line, or search for Cobble in the Extensions view:

code --install-extension MarkusAugust.pebble-support

Settings, snippets and the full list of what Cobble reads from your Java and Kotlin code are in the README.