Registry / devops / prettier-plugin-interpolated-html-tags

prettier-plugin-interpolated-html-tags

library2.0.1jsnpmunverified

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.

devops

npm install prettier-plugin-interpolated-html-tags

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-IN

prettier-plugin-interpolated-html-tags

devopsjavascriptv2.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

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

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

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

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}>

Debug

Known issues

breakingIn 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.

affects: >=2.0.0

deprecatedAll versions prior to 1.0.0 were experimental and may have unstable behavior.

fix

Upgrade to v1.0.0 or later for stable functionality.

affects: <1.0.0

gotchaPlugin 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.

affects: all

gotchaIf 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.

affects: <3.0.0

Errors

Common errors & fixes

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

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: Couldn't resolve parser 'html'

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.

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

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`).

Upgrade

Version history

2.0.1latest on npm

Audit

Dependencies

prettierrequiredPeer dependency: plugin requires Prettier >=3.0.0

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/electrovir/prettier-plugin-interpolated-html-tags ↗

packagehttps://www.npmjs.com/package/prettier-plugin-interpolated-html-tags ↗