Vendy

vendy-vd is the VS Code extension for Vendy .vd files. It provides language registration, syntax highlighting, document formatting, and diagnostics for the Vendy template language.

Features

• .vd language support
• Syntax highlighting for:
  • TypeScript frontmatter
  • HTML template content
  • CSS and SCSS <style> blocks
  • TypeScript <script> blocks
  • Vendy directives and expressions
  • PascalCase Vendy components
• Document formatting through vendored Prettier:
  • frontmatter formatted as TypeScript
  • template body formatted as HTML
  • <> / </> fragments preserved
• Live diagnostics for:
  • frontmatter delimiters and balanced delimiters
  • unclosed strings
  • HTML tag and attribute issues
  • Vendy block directives
  • duplicate frontmatter markers
• Auto-closing pairs and bracket matching for .vd

Extension metadata

Contributed language

The extension registers .vd files with:

• aliases: Vendy, vd
• icon: icons/vendy-icon.png
• grammar: syntaxes/vd.tmLanguage.json
• language configuration: language-configuration.json

Embedded language scopes:

Commands

pnpm build
pnpm build:install
pnpm format:test
pnpm lint:test

pnpm build generates icons, vendors Prettier, and packages the extension with vsce.

pnpm build:install builds the extension and installs it into local VS Code profiles using scripts/install-to-profiles.js.

Development notes

• Prettier is vendored by scripts/vendor-prettier.js so the extension can format .vd files without external extension dependencies.
• The formatter supports <> and </> fragments by temporarily replacing them with a valid HTML placeholder before formatting.
• The linter tests can be run directly with pnpm lint:test [path/to/file.vd].
• The formatter test script can be run directly with pnpm format:test [path/to/file.vd].

Related packages

• @vendy/engine — Rust-backed .vd parser, renderer, and HTML pipeline.
• @vendy/shop-core — Storefront runtime that renders .vd themes.