Axonyx VS Code Extension

Syntax highlighting, snippets, diagnostics, and basic formatting for Axonyx .asx frontend files and .ax backend files.

MVP Scope

This version focuses on making modern Pages ASX files readable and pleasant in VS Code:

• Pages V2 declarations such as page Home() { return ASX { ... } }
• component, scope, query, action, guard, state, data, type, and interface
• import ... from
• JSX-like tags such as <Head>, <SectionCard>, <Slot />
• strings, numbers, booleans, attributes, and embedded {expression} blocks
• starter snippets for pages, data pages, components, scopes, queries, actions, imports, Head, Each, If, Slot, routes, and common Foundry UI blocks such as SectionCard, HeroCard, ContentGrid, SiteShell, and Copy
• newer Foundry snippets for Form, FormGroup, Fieldset, Table, TableHead, TableCell, PaginationItem, and layout primitives
• persistent parser-backed diagnostics through axonyx-lsp on open/change
• compiler-owned formatting through axonyx-lsp, with a CLI fallback
• distinct highlighting for typed props/parameters, bindings, function calls, runtime scopes, operators, and ASX component/HTML tags

Example:

page Home() {
  data posts: List<Post> = loadPosts("published")

  return ASX {
    <Container max="xl">
      <Each items={posts} as="post">
        <Card title={post.title}>
          <Copy>{post.excerpt}</Copy>
        </Card>
      </Each>
    </Container>
  }
}

Local Development

1. Open this folder in VS Code.
2. Run Developer: Install Extension from Location... and choose this repo folder.
3. Open any .asx page/component or .ax backend file.

If you are working inside the Axonyx repo family, the extension looks for a local sibling axonyx-framework checkout and launches its axonyx-lsp binary through Cargo. Otherwise it looks for axonyx-lsp on PATH.

For published CLI diagnostics, install the current beta CLI:

cargo install cargo-axonyx --force

Until axonyx-lsp is published, contributors can install it from a framework checkout:

cargo install --path crates/axonyx-lsp

Use axonyx.languageServer.path to select an explicit binary, or set axonyx.languageServer.enabled to false to use the CLI diagnostics fallback.

The extension automatically becomes the default formatter for Axonyx files. Use Shift+Alt+F (Format Document) to format the active .asx or .ax file.

To also format on save, enable the standard VS Code setting for Axonyx files:

{
  "[ax]": {
    "editor.formatOnSave": true
  }
}

Alternative dev flow:

1. Install vsce if needed: npm install -g @vscode/vsce
2. Package the extension: vsce package
3. Install the generated .vsix in VS Code.

Language Server Support

• persistent parser and workspace import diagnostics
• compiler-owned formatting and symbol-aware go-to-definition
• compiler-owned hover for local, imported, aliased, and namespace symbols
• workspace references through Shift+F12 for direct, aliased, and namespace imports
• safe symbol rename through F2, with collision and package-source protection
• completion for local declarations, imported components, namespace members, typed component props, and literal-union prop values
• lightweight Foundry prop/value suggestions when the language server has no result

Next: precise parser spans, documentation comments, and richer scope-aware refactoring for local bindings and parameters.

Foundry file icons

If you use Material Icon Theme, keep it selected and run Axonyx: Add Icons to Material Icon Theme from the Command Palette. This opt-in command adds the bronze .asx and silver .ax SVGs while preserving Material's other file and folder icons and your existing custom associations. It requires Material Icon Theme to be installed. It updates your user settings and keeps a version-independent copy of the SVGs under your VS Code extensions directory. Run it again after an Axonyx icon redesign to refresh those copies.

The separate Axonyx Foundry icon theme is a minimal alternative. It does not include a full icon set for other file types or folders.

Select Preferences: File Icon Theme > Axonyx Foundry for bronze .asx frontend icons and silver .ax backend icons. Both retain language ID ax, so diagnostics, formatting, snippets, and existing editor settings keep working. Light editor themes use darker variants for contrast. VS Code allows one file icon theme at a time: selecting this theme replaces the current file icon set. Other file types retain language-provided icons where available; this theme intentionally provides no complete generic file/folder icon collection. If another icon theme is active, its mappings take precedence; language fallback uses the silver X for both extensions. The extension does not change your theme.