Mino Language Support for VS Code

This extension provides language support for Mino (.mino) files and .jsxm (JavaScript with inline @html/@css). It injects highlighting for blocks and compiles to JavaScript, and includes a TS server plugin so IntelliSense works in .jsxm.

// example usage

const renderMinoStyles = @css(color) {
    :root {
        --theme-color: var(${ color });
    }
    * {
        border-sizing: box;
        padding: 0;
        margin: 0;
    }
    html, 
    body {
        width: 100%;
        min-height: 100vh;
    }
    main {
        margin: 0 auto;
        max-width: 768px;
    }
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-1 { flex: 1; }
}

const renderDocumentHead = @html({ title, color, ...head }) {
    <head>
        <meta charset="UTF-8">
        <title>${title}</title>
        <style>${renderMinoStyles(color)}</style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Brief description of your page">
        <meta name="keywords" content="keyword1, keyword2, keyword3">
        <meta name="author" content="Your Name">
        ${...head}
    </head>
}

const renderLayoutTemplate = @html({ title, body, meta }) {
    <html>
        <head>{renderDocumentHead({ title, ...meta })}</head>
        <body>
            <main class="flex flex-col flex-1">
                ${body}
            </main>
        </body>
    </html>
}



export function render({ title, body, meta }) {
    return renderLayoutTemplate({ title, body, meta })
}

Features

Syntax Highlighting: Embedded CSS and HTML inside @css { ... } and @html { ... } blocks
Injection in JS/TS: Highlights blocks in .js/.ts/.jsx/.tsx when using const name = @html/@css { ... }
Snippets: Quick insertion for const name = @css {} and const name = @html {}
Hover/Completion/Validation: Helpers and diagnostics for v2.0 assignment syntax
Compiler: Compile .mino → .js with param detection from ${...} interpolations
.jsxm Support: Use .jsxm files (JavaScript + Mino) and compile/transform to .js

Quick setup (per project)

Install the extension
Workspace settings (.vscode/settings.json)

{
  "files.associations": { "*.jsxm": "javascript" },
  "javascript.validate.enable": false
}

Optional jsconfig.json

{
  "compilerOptions": { "checkJs": true },
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.jsxm", "src/**/*.mino"]
}

Example (v2.0 assignment syntax)

// css syntax highlighting
const styleSheet = @css {
  .primary-button { padding: 8px; color: black; }
}

// html syntax highlighting
const MyButton = @html {
  <button class="primary-button">${name}</button>
}

// normal js
const render = (name) => MyButton(name)

// Compiled JS (simplified)
// const styleSheet = () => `.primary-button { padding: 8px; color: black; }`
// const MyButton = (name) => `<button class="primary-button">${name}</button>`

Advanced examples

Destructured parameters in shorthand

// .mino or .jsxm
const renderHead = @html({ title, color = "blue", ...meta }) {
  <head>
    <title>${title}</title>
    <style>${renderStyles(color)}</style>
    ${...meta}
  </head>
}

// Compiled (simplified)
// export const renderHead = ({ title, color = "blue", ...meta }) => `... ${__mino_flat(meta)} ...`

Auto-spread arrays inside templates

const list = ["a", "b", "c"]
const view = @html {
  <ul>${...list.map(x => `<li>${x}</li>`)}${""}</ul>
}

// Compiles to: `${__mino_flat(list.map(...))}` which joins arrays safely

Positional args shorthand ($0, $1, ...)

// Using $0 and $1 switches the compiled output to a function (...args)
const cell = @html { <td>$0: $1</td> }

// Compiles to:
// export const cell = (...args) => `<td>${args[0] ?? ''}: ${args[1] ?? ''}</td>`

// Usage
// cell('Row', 42)

JSDoc generation

Compiled assignments include a short JSDoc header indicating HTML/CSS template and return type, e.g.:

/**
 * HTML template function generated by Mino
 * @returns {string}
 */
export const view = `...`;

Commands

Mino: Compile Mino File (mino.compileFile): Compile the active .mino file to JS

Settings

mino.autoCompile (boolean, default: true): Automatically compile .mino files on save
mino.outputDirectory (string, default: "./dist"): Output directory for compiled JS (workspace-relative or absolute)
mino.showCompileNotifications (boolean, default: true): Show a notification when compilation completes or fails

Vanilla JS support (.jsxm)

Use .jsxm files: write JavaScript with @html/@css blocks. The extension highlights them, and the compiler (or bundler plugins) transforms them to .js.
Node loader: node --loader ./scripts/loader.mjs app.js to load .jsxm at runtime.
Vite: add the provided vite-plugin-mino to transform .jsxm/.mino.
esbuild: add scripts/esbuild-plugin-mino.js.

ESLint integration

Option A (processor for .jsxm and .mino):

{
  "plugins": ["mino"],
  "overrides": [
    { "files": ["**/*.jsxm"], "processor": "mino/.jsxm" },
    { "files": ["**/*.mino"], "processor": "mino/.mino" }
  ]
}

Option B (treat .jsxm as JS only):

{
  "overrides": [ { "files": ["**/*.jsxm"], "parserOptions": { "ecmaVersion": 2022, "sourceType": "module" } } ]
}

For .mino, either compile first (auto-compile on save) or use the processor.

Vite integration

import mino from './scripts/vite-plugin-mino';

export default {
  plugins: [mino()],
};

Building Extension

# 1. Ensure everything compiles cleanly
npm run compile

# 2. Package the extension
npx @vscode/vsce package

# 3. Test the packaged extension
code --install-extension mino-lang-*.vsix
cursor --install-extension mino-lang-*.vsix

Or you can use the following helper:

bash ./build.sh

Troubleshooting

“Decorators are not valid here” in .jsxm
- Ensure the status bar shows “JavaScript” (not “JavaScript (Babel)”) for .jsxm
- Settings: files.associations mapping to JavaScript and javascript.validate.enable: false
- Ensure a JS/TS language service is available (built‑in or “JavaScript and TypeScript Nightly”)
IntelliSense is missing in .jsxm
- Reload window (TS server plugin loads)
- Add a jsconfig.json with include for .jsxm
- Add at least one import/export
- “TypeScript: Restart TS server”
Arrow-return highlighting is inconsistent
- Prefer shorthand: const tmpl = @html(x) { ... }
- Arrow-return compiles but shorthand highlights more reliably
Assignment blocks compile to JS functions with detected parameters based on ${...} expressions.
Bare blocks (@html { ... }, @css { ... }) are allowed and compiled to inert void template expressions for valid JS output.

Requirements

VS Code 1.74.0 or higher
Node.js (for compilation features)

Testing

A basic sample is under src/tests/example.mino. Saving this file will generate dist/example.js.
You can run the built compiler via Node to verify output, or use the command palette to compile the active file.

Contributing

This extension is open source. Contributions welcome!

License

MIT

Mino: Inline HTML/CSS in JavaScript

asleepace