Editor & LSP

The Ree Templates extension bundles a Language Server Protocol server that gives VS Code deep awareness of your .ree templates. It runs as a stdio process - no network port, no daemon, and no separate server install. The project configures it through the ree section in package.json.

What It Provides

How It Works

The LSP reads the ree section from package.json to discover your project's structure:

{
  "ree": {
    "project_family": "reepolee",
    "template_roots": ["apps/main", "apps/reeman", "apps/reeqa", "platform"],
    "component_roots": ["components"],
    "translation_provider": "route-json",
    "translation_roots": ["apps/main", "apps/reeman", "apps/reeqa", "platform"]
  }
}

From these paths it builds a project profile that knows:

• Where templates live — apps/main/ and any additional template_roots
• Where components live — components/ and any additional component_roots
• Where translations live — the co-located {locale}.json files beside each template (discovered under translation_roots). The LSP reads these files for autocompletion of {_ } / {- } / {@ } keys and shows the resolved value in every locale on hover

The translation_provider: "route-json" tells the LSP that translations are co-located JSON files next to each route directory — the same files the server loads. It reads them directly rather than connecting to a database, and there is nothing to export or keep in sync.

Connecting Your Editor

VS Code

Install the Ree Templates extension from the marketplace. It bundles the LSP and connects automatically when you open a .ree file in a project with a ree section in package.json.

code --install-extension reepolee.ree-templates

The extension also provides syntax highlighting, file icons, and formatting (via reettier). See the extension docs for settings and configuration.

For Tailwind IntelliSense inside .ree files, add to your VS Code settings:

"tailwindCSS.includeLanguages": { "ree": "html" }

Other Editors

Any editor that speaks LSP over stdio can connect. The server is bundled inside the Ree Templates VSIX and is not separately installed or distributed. Other editors can use it by building the ree-templates source and launching its generated dist/ree-lsp.cjs file.

from the project root. The server uses JSON-RPC 2.0 over stdin/stdout. It accepts initialization, diagnostics, completion, hover, definition, document symbols, folding, formatting, and document synchronization requests. Consult your editor's LSP documentation for how to register a custom stdio language server.

Translation Support

The LSP reads the co-located {locale}.json files next to each template (under translation_roots). This gives you:

• Key completions — type {_ and see every key from your translation namespace with its English value as a detail string
• Multi-locale hover — hover any {_ ui.title } to see its value in every configured locale
• Go-to-definition — Cmd/Ctrl-click a key to jump to its entry in the locale JSON file

If completions don't appear, check that the locale JSON files sit in the same directory as the template. The LSP re-reads them when they change.

Environment-variable hover

Reepolee ships config/env_var_descriptions.ts with descriptions for its known environment variables. The extension shows a description when you hover Bun.env.NAME, process.env.NAME, bracket access, or require_env("NAME") in JavaScript or TypeScript. To document a project-owned variable, add it to the exported ENV_VAR_DESCRIPTIONS map:

export const ENV_VAR_DESCRIPTIONS: Record<string, string> = {
    MY_PROJECT_FLAG: "Controls the project-specific feature.",
};

Use ree.envVarDescriptionsPath when the file is elsewhere.

Without the ree Section

If package.json has no ree object, the LSP falls back to heuristics: it walks up the directory tree looking for apps/main/ alongside lib/template/compiler.ts. When it finds both it loads a default Reepolee profile. The explicit ree section is faster and unambiguous — every starter ships with it.

Troubleshooting