prettier-html-templates

0.1.0 verified Sat Apr 25 auth: no javascript

Library for building Prettier plugins to format HTML files containing template language markup such as Jinja, ERB, and others. Current stable version is 0.1.0. This package provides the infrastructure to embed template language constructs into Prettier's HTML formatting pipeline. It is the base for plugins like prettier-plugin-eex (Elixir) and prettier-plugin-erb (Ruby). Key differentiator: it enables unified formatting of mixed HTML/template files using Prettier's standard HTML printer, whereas alternatives often rely on language-specific formatters.

Common errors

error Error: Could not find plugin: prettier-html-templates ↓

cause Plugin not installed or not added to plugins array in Prettier config.

fix

npm install prettier-html-templates --save-dev and add it to plugins: ['prettier-html-templates']

error TypeError: prettier.format is not a function ↓

cause Using CommonJS require on an ESM-only module.

fix

Use import instead of require, or set "type": "module" in package.json.

error SyntaxError: Unexpected token '<' in JSON at position 0 ↓

cause Plugin returns unformatted HTML; usually due to unsupported template syntax causing parser to fallback to markup.

fix

Ensure your template syntax is supported; check the plugin's GitHub issues.

Warnings

gotcha class attributes are not formatted by this package. ↓

fix Manually format class attributes or wait for a future release.

gotcha style attributes are not formatted by this package. ↓

fix Manually format style attributes or wait for a future release.

gotcha prettier ignore comments do not work with this plugin. ↓

fix Use alternative mechanisms to exclude code from formatting.

breaking Requires Prettier v2.x; incompatible with Prettier v3. ↓

fix Use Prettier v2.x for this plugin version.

Install

npm install prettier-html-templates

yarn add prettier-html-templates

pnpm add prettier-html-templates

Imports

default

wrong

const prettierPluginHtmlTemplates = require('prettier-html-templates')

correct

import prettierPluginHtmlTemplates from 'prettier-html-templates'

ESM-only; no CommonJS export. Works only with Prettier 2.x.

getFormattedHtml

wrong

const { getFormattedHtml } = require('prettier-html-templates')

correct

import { getFormattedHtml } from 'prettier-html-templates'

Internal utility, not intended for public use. Exported for plugin authors.

PRINTER
```
import { PRINTER } from 'prettier-html-templates'
```
Prettier printer object used in plugin definitions.

Quickstart

Shows how to use the plugin with Prettier to format HTML containing template syntax.

import prettier from 'prettier';
import prettierPluginHtmlTemplates from 'prettier-html-templates';

const code = '<div class="<% if (condition) { %>active<% } %>">Content</div>';
const options = {
  parser: 'html',
  plugins: [prettierPluginHtmlTemplates],
  printWidth: 80
};

const formatted = await prettier.format(code, options);
console.log(formatted);