Vendy VS Code

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

Field	Value
Extension ID	`vendy.vendy-vd`
Display name	`Vendy`
Publisher	`vendy`
Version	`0.2.7`
VS Code engine	`^1.80.0`
Activation	`onLanguage:vd`
Language ID	`vd`
File extension	`.vd`

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:

Embedded block	Language
frontmatter	TypeScript
`<script>`	TypeScript
`<style>`	CSS
`<style lang="scss">`	SCSS
`{expression}`	TypeScript
VD directives	Vendy directive grammar

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].

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

Vendy