prettier-plugin-interpolated-html-tags

2.0.1 verified Sat Apr 25 auth: no javascript

A Prettier plugin that correctly formats HTML with interpolated tag names (e.g., `<${Component}>`). Version 2.0.1 is current, stable, and requires Prettier 3+. Released sporadically, it solves the problem of Prettier breaking formatting when tag names are dynamic expressions. Unlike generic HTML formatting, this plugin preserves the interpolation syntax and avoids parsing errors. Ships TypeScript types and supports both ESM and CJS.

Common errors

error Cannot find module 'prettier-plugin-interpolated-html-tags' ↓

cause The plugin is not installed or not listed in the project's dependencies.

fix

Install the plugin via npm: npm install --save-dev prettier-plugin-interpolated-html-tags

error Error: Couldn't resolve parser 'html' ↓

cause The plugin requires Prettier's HTML parser, which might not be loaded.

fix

Ensure you have @prettier/plugin-html installed or that Prettier's built-in parser is available. In Prettier v3, the HTML parser is bundled.

error The plugin 'prettier-plugin-interpolated-html-tags' is not compatible with Prettier 2 ↓

cause Plugin v2 only supports Prettier v3.

fix

Either upgrade Prettier to v3, or downgrade the plugin to v1.x (e.g., npm install prettier-plugin-interpolated-html-tags@1).

Warnings

breaking In v2.0.0, dropped support for Prettier v2. Upgrade to Prettier v3. ↓

fix Update Prettier to version 3 or later. If on Prettier v2, stay on v1.x of this plugin.

deprecated All versions prior to 1.0.0 were experimental and may have unstable behavior. ↓

fix Upgrade to v1.0.0 or later for stable functionality.

gotcha Plugin only handles HTML parser; does not apply to JSX or other parsers. ↓

fix Ensure you are using `parser: 'html'` in your Prettier config. For JSX, use separate plugins.

gotcha If your HTML template contains nested interpolations (e.g., `<\${A}><\${B}>`), ensure Prettier version is 3.0.0+ for correct handling. ↓

fix Upgrade to Prettier v3 and plugin v2 for best results.

Install

npm install prettier-plugin-interpolated-html-tags

yarn add prettier-plugin-interpolated-html-tags

pnpm add prettier-plugin-interpolated-html-tags

Imports

default

wrong

const prettierPluginInterpolatedHtmlTags = require('prettier-plugin-interpolated-html-tags')

correct

import prettierPluginInterpolatedHtmlTags from 'prettier-plugin-interpolated-html-tags'

Default import works for both ESM and CJS. Plugin is added to Prettier's `plugins` array.

Quickstart

Shows how to use the plugin to format HTML with interpolated tag names, preventing Prettier from breaking the template literal syntax.

import { format } from 'prettier';
import plugin from 'prettier-plugin-interpolated-html-tags';

const code = `<\n  \${Component}\n  prop1={value1}\n  prop2={value2}\n>\n  child content\n<\/\${Component}>`;

const formatted = await format(code, {
  parser: 'html',
  plugins: [plugin],
});

console.log(formatted);
// Output:
// <\${Component} prop1={value1} prop2={value2}>
//   child content
// </\${Component}>