VexJS — VSCode Extension

Syntax highlighting and navigation for VexJS, a vanilla JavaScript meta-framework with file-based routing, SSR/CSR/SSG/ISR rendering strategies, and a Vue-like reactive system.

Features

Syntax highlighting for .vex files and framework HTML files (pages/**/*.html, components/**/*.html)
Three distinct sections highlighted independently:
- <script server> — Node.js server-side code (runs per request)
- <script client> — Browser-side reactive code
- <template> — HTML with directives
Directive highlighting: x-if, x-else-if, x-else, x-for, x-show, :prop, @event, x-bind:, x-on:
Expression highlighting inside {{ }} interpolations
Embedded JavaScript language support in script blocks (autocompletion, IntelliSense)
Jump-to-definition (F12) for component imports — works on both the import name and the path string
Document links (Ctrl+Click) on import statements — navigate directly to the imported file
Supports default imports (import Foo from), named imports (import { foo } from), and namespace imports (import * as ns from)

File Format

VexJS components use the .vex extension (or .html under pages/ and components/):

<script server>
  async function getData({ req, props }) {
    return { title: "Hello World" };
  }
</script>

<script client>
  import { reactive } from "vex/reactive.js";
  const count = reactive(0);
</script>

<template>
  <h1>{{ title }}</h1>
  <button @click="count.value++">{{ count.value }}</button>
</template>

Installation

From `.vsix` file (local install)

Open VS Code
Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run Extensions: Install from VSIX...
Select the .vsix file from the vscode-extension/ folder

Or via the CLI:

code --install-extension vscode-extension/vexjs-x.x.x.vsix

From source (development)

cd vscode-extension
npm install -g @vscode/vsce   # install packaging tool if not present
vsce package                  # generates vexjs-x.x.x.vsix
code --install-extension vexjs-*.vsix

File Icon

VS Code icon themes are mutually exclusive — activating one replaces another entirely. To keep your current icon theme and add the .vex icon, configure the association inside your active theme:

Material Icon Theme (settings.json):

"material-icon-theme.files.associations": {
  "*.vex": "javascript"
}

Requirements

VS Code ^1.75.0

Known Limitations

Autocompletion for directives (x-if, x-for, etc.) is not yet implemented
Linting of {{ }} expressions is not yet supported

License

MIT

VexJS

Vexjs