VS Code

Editor extension

Snippets

x-button, x-dialog, x-form-field, and standalone component scaffolds.

Insert component

Command palette or Ctrl+Shift+X — markup + import + imports array.

Completion & hover

@xngui/components/* paths and x-* selectors with export details.

Install locally

Build the extension in this monorepo
Open tools/vscode-extension in VS Code
Press F5 to launch an Extension Development Host
Or package a .vsix and install from VSIX

terminal

pnpm install

pnpm --filter @xngui/vscode build

pnpm --filter @xngui/vscode package

Commands

Xng UI: Insert @xngui Component — quick pick + template insert (Ctrl+Shift+X)
Xng UI: Add @xngui Import — TypeScript import + standalone imports array
Xng UI: List Components — output channel catalog of all entries

Snippets

In HTML templates, type x- and accept completions for common primitives. In TypeScript, use xngui-component for a standalone shell or xngui-imports for a single flat import.

html

x-button

x-form-field

x-dialog

Live catalog (optional)

Point the extension at an @xngui monorepo checkout to refresh the component index from disk instead of the bundled catalog.

settings.json

{

"xngui.workspaceRoot": "/absolute/path/to/xngui"

}

Publish

Create a Visual Studio Marketplace publisher
Bump version in tools/vscode-extension/package.json
pnpm --filter @xngui/vscode package
vsce publish from tools/vscode-extension