{"id":20375,"library":"prettier-plugin-interpolated-html-tags","title":"prettier-plugin-interpolated-html-tags","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/electrovir/prettier-plugin-interpolated-html-tags","tags":["javascript","prettier","plugin","html","interpolation","tags","typescript"],"install":[{"cmd":"npm install prettier-plugin-interpolated-html-tags","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-interpolated-html-tags","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-interpolated-html-tags","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: plugin requires Prettier >=3.0.0","package":"prettier","optional":false}],"imports":[{"note":"Default import works for both ESM and CJS. Plugin is added to Prettier's `plugins` array.","wrong":"const prettierPluginInterpolatedHtmlTags = require('prettier-plugin-interpolated-html-tags')","symbol":"default","correct":"import prettierPluginInterpolatedHtmlTags from 'prettier-plugin-interpolated-html-tags'"}],"quickstart":{"code":"import { format } from 'prettier';\nimport plugin from 'prettier-plugin-interpolated-html-tags';\n\nconst code = `<\\n  \\${Component}\\n  prop1={value1}\\n  prop2={value2}\\n>\\n  child content\\n<\\/\\${Component}>`;\n\nconst formatted = await format(code, {\n  parser: 'html',\n  plugins: [plugin],\n});\n\nconsole.log(formatted);\n// Output:\n// <\\${Component} prop1={value1} prop2={value2}>\n//   child content\n// </\\${Component}>","lang":"typescript","description":"Shows how to use the plugin to format HTML with interpolated tag names, preventing Prettier from breaking the template literal syntax."},"warnings":[{"fix":"Update Prettier to version 3 or later. If on Prettier v2, stay on v1.x of this plugin.","message":"In v2.0.0, dropped support for Prettier v2. Upgrade to Prettier v3.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to v1.0.0 or later for stable functionality.","message":"All versions prior to 1.0.0 were experimental and may have unstable behavior.","severity":"deprecated","affected_versions":"<1.0.0"},{"fix":"Ensure you are using `parser: 'html'` in your Prettier config. For JSX, use separate plugins.","message":"Plugin only handles HTML parser; does not apply to JSX or other parsers.","severity":"gotcha","affected_versions":"all"},{"fix":"Upgrade to Prettier v3 and plugin v2 for best results.","message":"If your HTML template contains nested interpolations (e.g., `<\\${A}><\\${B}>`), ensure Prettier version is 3.0.0+ for correct handling.","severity":"gotcha","affected_versions":"<3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install the plugin via npm: `npm install --save-dev prettier-plugin-interpolated-html-tags`","cause":"The plugin is not installed or not listed in the project's dependencies.","error":"Cannot find module 'prettier-plugin-interpolated-html-tags'"},{"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.","cause":"The plugin requires Prettier's HTML parser, which might not be loaded.","error":"Error: Couldn't resolve parser 'html'"},{"fix":"Either upgrade Prettier to v3, or downgrade the plugin to v1.x (e.g., `npm install prettier-plugin-interpolated-html-tags@1`).","cause":"Plugin v2 only supports Prettier v3.","error":"The plugin 'prettier-plugin-interpolated-html-tags' is not compatible with Prettier 2"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}