Jacaré for VS Code

Official language support for Jacaré .jcr files — syntax highlighting, file icons, and editor ergonomics for the Jacaré reactive UI framework.

Publisher: heberalmeida
Extension ID: heberalmeida.jacare
Author: Heber Almeida

Features

Feature	Description
Syntax highlighting	JavaScript module body, `view` templates, `style` blocks, directives, HTML, and bindings
Template directives	`#if`, `#elif`, `#else`, `#end`, `#for` (and `@if` / `@each` aliases)
Component tags	PascalCase components such as `<Field />` and `<Card>`
Bindings	`bind-value`, `on-click`, `@click`, `:prop`, `class-active`, and `${expr}` interpolations
Scoped CSS	`style` tagged templates highlighted as CSS
File icons	Jacaré logo for `.jcr` files in the Explorer
Editor helpers	Auto-closing brackets, quotes, and template literals

Installation

Visual Studio Marketplace

Open the Extensions panel (Cmd+Shift+X / Ctrl+Shift+X)
Search for Jacaré
Install Jacaré by heberalmeida

Or install from the command line:

code --install-extension heberalmeida.jacare

From source (monorepo)

cd packages/vscode-jacare
yarn install
yarn build
yarn package
code --install-extension jacare-0.0.4.vsix --force

Development mode

Open the packages/vscode-jacare folder in VS Code
Run Run Extension from the Debug panel (F5)
A new Extension Development Host window opens with the extension loaded

Language support

File extension

Extension	Language ID	Aliases
`.jcr`	`jacare`	Jacaré, jacare, jcr

Jacaré files are plain JavaScript modules. The extension highlights both the script and embedded templates.

Highlighted syntax

JavaScript module

Tagged template

import { signal, view } from '@jacare/core'

const count = signal(0)

function increment() {
  count.update((n) => n + 1)
}

export default view`
  <div class="counter">
    <p>${count}</p>
    <button on-click=${increment}>+1</button>
  </div>
`

View block (HTML-style alternative)

import { signal } from '@jacare/core'

const count = signal(0)

function increment() {
  count.update((n) => n + 1)
}

export default <view>
  <div class="counter">
    <p>${count}</p>
    <button on-click=${increment}>+1</button>
  </div>
</view>

Template directives

view`
#if show()
  <p>Visible</p>
#else
  <p>Hidden</p>
#end

#for items() as item (item.id)
  <li>{item.label}</li>
#end
`

Components and slots

view`
<Card :title=${title}>
  <p>Slot content</p>
</Card>
`

Scoped styles

style`
.card { padding: 1rem; }
.title { font-weight: bold; }
`

Scope names (for theme authors)

Scope	Used for
`source.jacare`	Root language scope
`keyword.control.jacare`	`#if`, `#for`, `#end`, `@each`, etc.
`keyword.tag.jacare`	`view`, `style` tagged templates and `<view>` blocks
`entity.name.type.tag.jacare`	PascalCase components
`entity.name.tag`	HTML elements (`div`, `slot`, `button`, …)
`entity.other.attribute-name`	`bind-`, `on-`, `class-*`, `:prop`
`meta.embedded.expression.jacare`	`${expression}` inside templates
`source.css`	Content inside `style` blocks

File icons

The extension contributes the Jacaré Icons file icon theme and sets it as the default when installed.

File type	Icon
`.jcr`	Jacaré logo
Other files	Minimal generic file/folder icons

If icons do not appear:

Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Run Preferences: File Icon Theme
Select Jacaré Icons
Run Developer: Reload Window

Configuration

The extension works out of the box. No settings are required.

To use another file icon theme while keeping syntax highlighting, pick any theme in Preferences: File Icon Theme. Language highlighting for .jcr files remains active.

Recommended workspace settings

Optional settings.json for Jacaré projects:

{
  "files.associations": {
    "*.jcr": "jacare"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

What this extension does not include

Not included	Alternative
IntelliSense / autocomplete	Use TypeScript with `jacare.d.ts` in your project
Go to definition in templates	Planned for a future release
Formatting	Format the JavaScript parts with your Prettier/ESLint setup
Linting	Use `jacare check` from `@jacare/cli`

Publishing (maintainers)

Prerequisites

Personal Access Token with Marketplace → Manage
Publisher heberalmeida registered at marketplace.visualstudio.com/manage
GitHub repository secret VSCE_PAT

Automated release (recommended)

Go to Actions → Publish VS Code Extension
Choose version bump: patch, minor, or major
Run workflow

The workflow will:

Bump packages/vscode-jacare/package.json version
Build and publish to the Visual Studio Marketplace
Commit the version bump and create tag vscode-vX.Y.Z

Manual release

node scripts/sync-versions.mjs vscode bump patch
cd packages/vscode-jacare
yarn build
yarn publish

Jacaré

Heber Almeida