Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

This plugin teaches Prettier how to format Rock RMS Lava templates (and the HTML they live in).

This plugin is published on npm and usable today. It's still evolving, so if you hit a formatting bug or have a suggestion, please open an issue.

# with npm
npm install --save-dev prettier prettier-plugin-rock-lava

# with bun
bun add --dev prettier prettier-plugin-rock-lava

See our Wiki pages on the subject:

• In the terminal (with Node.js)
• In the browser
• In your editor
• In a CI workflow
• As a pre-commit hook
• With a bundler

Install it as a dev dependency in the repo where you edit .lava files:

npm install --save-dev prettier prettier-plugin-rock-lava

Then add a .prettierrc.json:

{
  "plugins": ["prettier-plugin-rock-lava"],
  "printWidth": 600,
  "tabWidth": 4
}

If your Lava projects aren't JS projects and you don't want a node_modules folder in each one, install the plugin once in a fixed folder that is independent of your Node version manager (so the path doesn't break when you switch Node versions):

mkdir -p ~/.prettier-lava && cd ~/.prettier-lava
npm init -y
npm install prettier-plugin-rock-lava
npm install -g prettier   # the Prettier engine, found via resolveGlobalModules

Create a global ~/.prettierrc.json that points at the absolute path to the plugin's entry file:

{
  "plugins": [
    "/Users/<you>/.prettier-lava/node_modules/prettier-plugin-rock-lava/dist/index.js"
  ]
}

A bare package name does not work for a global config — Prettier resolves plugins relative to the file being formatted, so you must use the absolute path to dist/index.js.

Update later with:

cd ~/.prettier-lava && npm install prettier-plugin-rock-lava@latest

prettier --write "**/*.lava"

The plugin registers the .lava extension and the lava / Lava VS Code language IDs automatically, so no overrides block is required. If your files use a different extension, add:

{
  "overrides": [{ "files": "*.lava", "options": { "parser": "lava-html" } }]
}

Install the Prettier extension, then configure it for whichever scope suits you — a single project, a whole workspace, or a VS Code profile. In all cases the Prettier extension resolves the plugin from the plugins entry in the .prettierrc it loads, so the same config powers both the CLI and the editor.

If the Lava project is a JS project (or you don't mind a node_modules), install the plugin locally and add a project .prettierrc with a plugins entry. Then add to the repo's .vscode/settings.json:

{
  "[lava]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "files.associations": {
    "*.lava": "lava"
  },
  "prettier.documentSelectors": ["**/*.lava"]
}

Prettier finds the project's .prettierrc by walking up from each file, so no prettier.configPath is needed here.

When you rely on the global ~/.prettierrc.json (the Global setup), point the extension at it with prettier.configPath. Put this in a workspace .vscode/settings.json to scope it to one project, or in your User settings.json to apply everywhere:

{
  "prettier.configPath": "~/.prettierrc.json",
  "prettier.resolveGlobalModules": true,
  "prettier.documentSelectors": ["**/*.lava"],
  "[lava]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Use the ~/ form, not an absolute path. Prettier auto-discovers ~/.prettierrc.json for any saved file under your home directory, so saved .lava files format either way. But new, unsaved (untitled) files have no path on disk, and the extension can only resolve configPath for them when it starts with ~ on macOS — an absolute path is silently dropped for untitled docs. Writing ~/.prettierrc.json makes new files set to the Lava language mode format too.

Setting prettier.configPath at the User level forces that one config for every project (it overrides each project's own .prettierrc). If you also work in non-Lava projects, prefer the workspace or profile scope below.

A VS Code profile is the cleanest way to enable this only when you want it: the settings apply when the profile is active and leave no global footprint otherwise. Create (or open) a "Rock Lava" profile, then add the same block as above to that profile's settings.json (Command Palette → Preferences: Open Settings (JSON) while the profile is active):

{
  "prettier.configPath": "~/.prettierrc.json",
  "prettier.resolveGlobalModules": true,
  "prettier.documentSelectors": ["**/*.lava"],
  "[lava]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

If a freshly created untitled file (language mode set to Lava, never saved) shows "Prettier … is configured as formatter but it cannot format 'Lava'-files," that's a registration quirk in the Prettier extension — at startup it only registers its built-in languages, and it adds lava only after it has loaded the plugin config for a saved file in an open workspace folder (untitled docs don't trigger this). To work around it, once per window:

• open a workspace folder (not just loose files), and
• click into any saved file once (a .lava file is ideal) — this registers lava for the rest of the session, after which untitled Lava files format.

Saving the scratch file as something.lava also formats it immediately, since it then has a path on disk.

Prettier for Lava supports the following options.

We support the following comments (either via HTML or Lava comments):

• prettier-ignore
• prettier-ignore-attribute
• prettier-ignore-attributes (alias)

They target the next node in the tree. Unparseable code can't be ignored and will throw an error.

{% # prettier-ignore %}
<div         class="x"       >hello world</div            >

{% # prettier-ignore-attributes %}
<div
  [[#if Condition]]
    class="a b c"
  [[/if ]]
></div>

Take a look at our known issues and open issues.

Read our contributing guide

This plugin builds on the original Lava fork created by Garrett Johnson, who first adapted Prettier's Liquid formatting to Rock RMS Lava. Many thanks for that foundation.

MIT.