prettier-plugin-embed weekly downloads statistics

<div align="center">

Prettier Plugin Embed

Online playground · Run the playground locally

A configurable Prettier plugin to format embedded languages in JS/TS Files.

npm i -D prettier prettier-plugin-embed

</div>

Introduction

What?

This Prettier plugin formats embedded languages in template literals within JavaScript and TypeScript files.

Why?

It adds per-language formatting controls, configurable block comments and tags, and per-identifier overrides to Prettier's embedded formatting. See prettier/prettier#4424 and prettier/prettier#5588 for related use cases.

How?

The plugin extends the embed method of Prettier's estree printer. Each integration delegates formatting to Prettier or a loaded language plugin. See the printer implementation for the integration point.

Features

• Support for Additional Languages: Extend embedded formatting to languages such as XML, SQL, PHP, and more. See Language-Specific Options for the supported languages and their default identifiers.

• Dual Identification Modes: Identify embedded languages by block comments /* comment */ `...` or tags tag`...` preceding the template literals.

• Customizable Language Comments or Tags: Customize the comments or tags used for identifying the embedded languages.

• Formatting Opt-out Mechanism: Offer the capability to deactivate formatting for certain comments or tags, including the built-in ones (html, css...) supported by the embedded-language-formatting option.

• Configurable Formatting Style: Provide additional options to tailor the formatting style for embedded languages.

• Strongly Typed API: Benefit from comprehensive type support for configuring this plugin's options.

• Easy Integration: Integrate with the existing Prettier setup seamlessly, requiring minimal configuration to get started.

Installation

npm i -D prettier prettier-plugin-embed

Install Prettier 3 in the project that runs formatting. The consumer supplies the formatter and its language plugins.

Install the formatter plugin for each embedded language you use as a separate project dependency; the Language-Specific Options section shows which integrations require one.

Choose Prettier and runtime versions supported by every loaded language plugin. Parser availability and syntax support follow the installed formatter version.

<details> <summary>Dependency resolution in strict installations</summary>

The plugin loads Prettier through static imports, which resolve from the plugin's installation location. Standard project installs and Yarn's default Plug'n'Play dependency fallback allow these imports to access the project's installed Prettier.

Yarn projects using pnpFallbackMode: none, and pnpm projects using enableGlobalVirtualStore: true with hoisting disabled, need an explicit dependency relationship for this resolution. For these configurations, add the following to .yarnrc.yml (Yarn) or pnpm-workspace.yaml (pnpm) to connect the plugin to the project's installed Prettier:

packageExtensions:
  "prettier-plugin-embed@*":
    peerDependencies:
      prettier: ">=3.0.0 <4"

Projects can also use Yarn's default pnpFallbackMode: dependencies-only or pnpm's project-local virtual store (enableGlobalVirtualStore: false).

</details>

Usage

Playground

Try the plugin in the online playground. Edit JavaScript or TypeScript alongside your .prettierrc configuration, including the plugins array and embedded-language options. Formatting runs locally in your browser.

To report a formatting issue, keep the original code in Input, enable Compare to inspect the native Prettier output, then use Copy issue report. The report includes the input, configuration, output or error, formatter versions, and a shareable playground link. Share copies a link containing the current example and configuration.

See the playground guide for local development, keyboard shortcuts, browser limitations, and GitHub Pages deployment.

Getting Started…