Firefly Language Support

This extension adds Firefly language detection, syntax highlighting, live Firefly and TypeScript diagnostics, Emmet abbreviations, editing support, and Firefly file icons for .firefly components.

It highlights HTML templates, capitalized component tags, TypeScript script blocks, CSS style blocks, {{ expression }} interpolations, <template @for="item of items"> loops, @event="expression" bindings, and on:event={expression} bindings.

Install

Install Firefly Language Support by 24Digital from the Extensions view in VS Code. After installation, .firefly files are detected automatically and receive syntax highlighting, editing support, and the Firefly file icon.

Enable automatic updates in the extension's settings to receive new language features as they are released.

Firefly compiler errors and embedded TypeScript errors update while you type. Emmet treats Firefly markup as HTML, so abbreviations such as ul>li*3 expand directly inside .firefly templates.

If you previously installed firefly-framework.firefly-language-tools or 24digital.firefly-language-tools, uninstall it and install 24digital.firefly-language-support instead.

The extension contributes a Firefly language icon without replacing the active file-icon theme. Reload the editor if the icon does not appear immediately after installation.

Formatting is supplied separately by Prettier. Install Prettier - Code formatter in VS Code or Cursor and install prettier-plugin-firefly in the project to enable Format Document for .firefly files.