Prettier Plugin for Antlers (Statamic)

2.0.5 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Antlers templates used in Statamic CMS. Current stable version is 2.0.5, supporting Prettier 3 (peer dependency >=3). The plugin uses the same formatting engine as Antlers Toolbox. Key differentiators: specifically for Antlers syntax, not generic HTML/Latte. Older v1.x supports Prettier 2, v2.x requires Prettier 3. Installation may require explicit plugin path reference in .prettierrc to avoid module resolution errors.

Common errors

error Could not resolve module prettier-plugin-antlers ↓

cause Prettier 2 cannot find plugin via npm module resolution; or Prettier 3 misconfigured.

fix

For Prettier 2, use path './node_modules/prettier-plugin-antlers/' in .prettierrc. For Prettier 3, ensure plugin is installed and plugins list includes 'prettier-plugin-antlers'.

error No formatter for 'Antlers' found ↓

cause VS Code not configured to use Prettier for .antlers.html files.

fix

Add VS Code settings: "[antlers]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} and "prettier.documentSelectors": ["**/*.antlers.html"].

error Cannot find module 'prettier' ↓

cause Missing peer dependency prettier, or version mismatch.

fix

Install correct Prettier version: for @^2, install prettier@^3; for @^1, install prettier@^2.

Warnings

breaking Plugin v2 requires Prettier >=3. Installing @^2 with Prettier 2 will fail. ↓

fix Update Prettier to version 3 or higher, or install @^1 for Prettier 2 support.

gotcha Prettier 2 may fail to resolve plugin with error 'Could not resolve module prettier-plugin-antlers' unless path is explicit. ↓

fix Use full path './node_modules/prettier-plugin-antlers/' in plugins array.

gotcha VS Code users get 'No formatter for Antlers found' if editor setting not configured. ↓

fix Add in VS Code settings.json: "[antlers]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} and "prettier.documentSelectors": ["**/*.antlers.html"].

gotcha Plugin does not include Tailwind CSS Prettier plugin; multi-class formatting may not work without it. ↓

fix Install @tailwindcss/prettier-plugin-typography separately and add to plugins list.

Install

npm install prettier-plugin-antlers

yarn add prettier-plugin-antlers

pnpm add prettier-plugin-antlers

Imports

prettier-plugin-antlers

wrong

Trying to import in code with `const plugin = require('prettier-plugin-antlers')`

correct

Add to `plugins` array in .prettierrc as 'prettier-plugin-antlers' or './node_modules/prettier-plugin-antlers/'

This is a Prettier plugin, not a library to require directly. Use via .prettierrc config.

antlers parser
wrong
```
Using parser: 'antlers.html' or 'antlers-html'
```
correct
```
Use `parser: 'antlers'` in config or CLI
```
The parser identifier is exactly 'antlers'. Commonly mistaken as 'antlers.html' due to file extension.
require('prettier-plugin-antlers')
wrong
```
const plugin = require('prettier-plugin-antlers')
```
correct
```
Do not require/import directly
```
The plugin is designed for Prettier's plugin system, not for direct programmatic use. Prettier 3 resolves plugins automatically if named correctly.

Quickstart

Minimal .prettierrc configuration to enable Antlers formatting with the plugin.

// .prettierrc
{
  "plugins": ["prettier-plugin-antlers"],
  "overrides": [
    {
      "files": ["*.antlers.html"],
      "options": {
        "parser": "antlers"
      }
    }
  ]
}