Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Pesanle TemplateNew to Visual Studio Code? Get it now.
Pesanle Template

Pesanle Template

pesanle

| (0) | Free
Highlighting, IntelliSense and the real compile diagnostics for Pesanle theme templates (.tpl).
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Pesanle Template (.tpl)

The editor half of the Pesanle theme toolchain: syntax highlighting, IntelliSense and — the point of it — the same compile pesanle-theme push runs, in the editor, as you type.

Open a theme project and the extension reads layout/, templates/, snippets/, sections/ and assets/, compiles them with the platform's own compiler and puts the result where you can see it. If the editor says the theme is clean, the push compiles it. If it shows an error, the push would refuse it with the same code.

What it does

Highlighting for the whole language: {{ output }}, {% directives %}, filters, strings, numbers, operators, {% schema %} as real JSON, comments, the host slots — and inside HTML attribute values too, where <a href="{{ routes.cart }}"> would otherwise read as one string.

IntelliSense, all of it from the compiler's own tables:

Where the caret is What it offers
{% every directive — if, for, render, slot, schema, … with docs
{% slot '…' the seven host slots, each described
{% render '…' the snippets this theme actually has
{% render 'card', the argument names that snippet is rendered with elsewhere
… \| every registered filter, with its signature and description
{{ / {% for x in the drops, a {% for %}'s own binding, forloop
product. that drop's properties — the ones the checker types
section.settings. the settings your {% schema %} declares
{% schema %} the schema keys, the 15 field kinds, the categories

Hover over a filter, a drop, a property, a slot, a directive or a snippet name explains what it is and what it returns.

Diagnostics — unknown filters, typo'd drop properties, missing snippets, bad JSON in a schema, a route a theme does not define — each on the line that has to change, in the Problems panel, with the compiler's own code. A status bar item keeps the count; clicking it compiles again.

Install

From a .vsix:

bun run --cwd packages/vscode-pesanle build
npx --yes @vscode/vsce package --no-dependencies --out pesanle-template.vsix
code --install-extension pesanle-template.vsix

Publishing

The Marketplace needs a publisher and a Personal Access Token, both tied to a Microsoft account:

  1. Create the publisher pesanle at https://marketplace.visualstudio.com/manage (its ID is permanent).
  2. Create a PAT — All accessible organizations, scope Marketplace → Manage — and keep it somewhere safe.
  3. Publish:
npx --yes @vscode/vsce login pesanle     # paste the PAT once
bun run publish                          # build, package, upload

The manifest has no repository field (the repository is private), so the commands pass --allow-missing-repository; without it vsce refuses to package.

From CI: store the PAT as the VSCE_PAT secret and push a tag vscode-v<version> — .github/workflows/publish-vscode.yml runs the tests, builds, checks the tag against package.json and publishes. The workflow can also be started by hand with a dry run.

Open VSX (Cursor, Windsurf, VS Codium)

Open VSX has its own namespace and token (https://open-vsx.org/user-settings/tokens):

npx --yes ovsx create-namespace pesanle -p <token>   # once
npx --yes ovsx publish pesanle-template.vsix -p <token>
# or: bun run publish:ovsx   (builds the .vsix first, token via OVSX_PAT)

Store the token as the OVSX_PAT secret and the tag workflow publishes to both registries; each is skipped when its secret is missing.

Settings

  • pesanle.diagnostics.enable — compile on change (default true).
  • pesanle.themeRoot — the theme project, when it is not a workspace root. Empty: each workspace folder is checked for layout/theme.tpl, .pesanle.json or templates/index.tpl.

How it stays honest

The extension does not re-implement the language. Filters, their arity and their descriptions, the drop schema and its types, the slot list, the routes, the schema field kinds and the compiler itself all come from @repo/page-builder/template — the module the CLI and the dashboard compile with. A filter added to the engine shows up in completions at the next build of the extension; a property the checker would refuse is never suggested.

Requirements

VS Code 1.85 or newer. A theme project is any folder with a layout/theme.tpl, a templates/index.tpl or a .pesanle.json — the shape pesanle-theme init writes.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft