Javelle .jvl — VS Code Extension

Editor support for Javelle Single-File Components (.jvl).

A .jvl file looks like:

<template>
  <j-page class="j-page my-page">
    <h1>Hello, Javelle</h1>
  </j-page>
</template>

<code lang="java">
@Component("my-page")
public final class MyPage {
  @Template("MyPage.html")
  public String view() { return ""; }
}
</code>

<style scoped>
.my-page { padding: 1rem; }
</style>

Features

• Syntax highlighting for <template> (HTML), <code lang="java"> (Java), <style scoped> (CSS), and <style lang="scss" scoped> (SCSS).
• Auto-close HTML/Javelle tags inside <template> — typing > after an opening tag inserts the matching </tag> (and </ completes the nearest open tag), the same as .vue/.html files. Toggle with jvl.autoClosingTags.
• Go-to-definition from a template binding to its Java declaration: Ctrl/Cmd+ click an identifier in {{ … }}, data-jv-*, :attr, or @event and jump to the field or method declared in the <code lang="java"> block (a foo reference also resolves a getFoo/isFoo declaration).
• Java symbol navigation inside <code lang="java">: Ctrl/Cmd+click imported types, local fields/methods, object members, static calls such as LocalStorage.get(...), and inherited members to open their declarations. Hover shows the matching Java signature, overload, and Javadoc when source is available. Workspace source works standalone; an installed Java extension also enables navigation into indexed Maven dependency sources.
• Java type auto-import inside <code lang="java">: class/interface/enum completions come from workspace source and the Java language server's Maven dependency index. Accepting a completion inserts the missing import in the Java block, including Javelle classes supplied by installed Maven artifacts.
• Autocomplete for Javelle j-* components, data-jv-*/data-jvl-* runtime attributes, template directives, Java annotations/composables, Javelle utility classes, and Javelle CSS variables.
• Autocomplete for attribute-driven component styling, for example variant="filled", color="primary", outlined, dense, position, align, direction, and structural flags that the .jvl compiler turns into Javelle component classes.
• Snippets for .jvl, Java, HTML, CSS, SCSS, and shell scripts. Javelle snippets use jvl-*, jv-*, or javelle-* prefixes so they are easy to find without taking over normal language snippets.
• Commands:
  • Javelle: Compile .jvl File — runs javelle jvl <file> for the active editor or selected explorer file.
  • Javelle: Compile All .jvl Files in Workspace — runs javelle jvl <workspaceRoot>.
  • Javelle: Create App Shell Sample — runs javelle create <app> --sample app-shell to create the full starter app.
  • Javelle: Open Studio — opens the VS Code Javelle Studio splash screen with target previews, DevTools, doctor, and test actions.
  • Javelle: Start Dev Server and Preview — starts javelle dev --mode <target> --no-open and opens the integrated preview panel.
  • Javelle: Open Preview Panel — opens a framed browser preview for web, PWA, mobile, SSR, Android/iOS WebView, and desktop layouts.
  • Javelle: Open DevTools Studio — starts javelle devtools serve and opens Javelle Studio.
  • Javelle: Open Mobile Browser Preview — shortcut to the preview panel with a phone frame.
  • Javelle: Inspect Current Component — opens Studio on the Components panel for the active file.
  • Javelle: Show Dependency Graph — opens Studio on the graph view.
  • Javelle: Export Debug Report — writes a redacted debug-report.zip.
• Optional compile-on-save (jvl.compileOnSave).

Settings

Building

cd vscode-jvl
npm install
npm run compile

Formatting delegates each block to VS Code's configured language formatter: Prettier can format the HTML/CSS/SCSS blocks, while the Java extension formats the Java block. Set Prettier as the default formatter for those embedded languages when you want Prettier's exact style; the JVL extension preserves the top-level block structure and re-indents the formatted content.

Then either press F5 in VS Code to launch an Extension Development Host, or package the extension:

npx vsce package
code --install-extension vscode-jvl-0.5.0.vsix

Repository layout

• package.json — extension manifest (languages, grammars, snippets, commands).
• language-configuration.json — comments, brackets, folding markers.
• syntaxes/jvl.tmLanguage.json — TextMate grammar with embedded HTML / Java / CSS / SCSS scopes.
• snippets/*.code-snippets — Javelle snippets for .jvl, Java, HTML, CSS, SCSS, and shell scripts.
• src/extension.ts — commands wiring the CLI into VS Code.
• src/embedded.ts — embedded-language IntelliSense bridge plus template→Java go-to-definition.
• src/autoclose.ts — auto-close tag behaviour for <template> blocks.
• src/format.ts — per-block document formatter.