VS Code extension

Install the Chroma extension to get chroma.json, plugin manifest, and .chr project diagnostics in VS Code, Cursor, and VSCodium.

The Chroma extension (targapps.chroma) shows errors for chroma.json, chroma.plugin.json, and chroma-fs.json in the Problems panel, using the same rules as the linter. It also registers the .chr file type as language id chroma. It bundles the linter, so you do not need to install anything else.

In plain words: install the extension like any other, then open the folder that contains your app's chroma.json. Configuration errors appear under View, Problems without running anything in a terminal.

Install

Open Extensions (Ctrl+Shift+X or Cmd+Shift+X).
Search for Chroma and install the entry from publisher targapps. On VSCodium and Cursor the extension comes from Open VSX.
Run Developer: Reload Window.
Open your app with File, Open Folder (the folder that contains chroma.json, not a single file).

To install from a .vsix file instead, use Extensions, ..., Install from VSIX, then reload the window.

Check that it works

Open chroma.json in your project.
Change "mode" to an invalid value and save. A diagnostic with code chroma/schema appears in Problems.
Undo the change and run Chroma: Lint Project (chroma.lintProject) from the Command Palette to refresh the project rules across the workspace.

If Chroma: Lint Project is not found, the extension is not installed or not enabled. Install it and reload the window.

When it lints

On save of chroma.json and any .chr file, and when the workspace opens.
On demand with Chroma: Lint Project.

For .chr files, the extension also runs JavaScript syntax checks (chroma/chr-syntax) as you type and on save. Invalid expressions (for example a broken arrow function or JSX attribute expression) show in Problems with the parse error location.

Syntax highlighting

The chroma TextMate grammar colors standard JavaScript in .chr files. JSX attribute values and {expression} blocks (including template ${…} segments) use the embedded javascript language id so your theme applies the same keyword, string, and operator colors as in .js files.

Schema errors for chroma.json come from the Chroma linter, not from the built-in JSON language service, because the extension gives the file its own language id (chroma-manifest).

Validated files

File	Schema
`chroma.json`	`chroma.schema.json`
`chroma-fs.json`	`chroma-fs.schema.json`
`chroma.plugin.json`	`chroma.plugin.schema.json`

Chroma source files use the .chr extension. The extension does not treat .js or .ts files as Chroma source. See chr format and the schema catalog.

File icons

The extension adds icons for .chr files and for chroma.json, chroma.plugin.json, and chroma-fs.json. To see them in the Explorer, choose Preferences: File Icon Theme, then Chroma, and reload the window.

Extensions — editor & CLI — how tooling relates to Portable vs Executable deploys
Linter for the rules and CLI
Runtime modes
Quick start
Reference
Examples