# @destination/prettier-plugin-twig

> Prettier Twig/HTML plugin by Destination

Latest version **3.1.0** (published 2026-08-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @destination/prettier-plugin-twig
pnpm add @destination/prettier-plugin-twig
yarn add @destination/prettier-plugin-twig
bun add @destination/prettier-plugin-twig
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2026-08-13 |
| First published | 2023-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 14 |
| Author | Andy Palmer |
| Maintainers | andypalmer-wearedestination.com |

## Links

- npm: https://www.npmjs.com/package/@destination/prettier-plugin-twig
- Repository: https://github.com/wearedestination/prettier-plugin-twig
- Issues: https://github.com/wearedestination/prettier-plugin-twig/issues
- npm.io page: https://npm.io/package/@destination/prettier-plugin-twig

## Dependencies (3)

- [ohm-js](https://npm.io/package/ohm-js.md) ^16.3.0
- [html-styles](https://npm.io/package/html-styles.md) ^1.0.0
- [line-column](https://npm.io/package/line-column.md) ^1.0.2

## Recent versions

- 3.1.0 (latest) — 2026-08-13
- 3.0.1 — 2026-07-31
- 3.0.0 — 2026-07-17
- 2.0.1 — 2026-05-08
- 2.0.0 — 2026-03-06
- 1.5.0 — 2024-05-20
- 1.4.0 — 2024-05-20
- 1.3.0 — 2024-05-17
- 1.2.7 — 2023-11-21

## README

# Twig HTML Prettier Plugin

This is a fork of the excellent [Shopify Liquid Prettier Plugin](https://github.com/Shopify/prettier-plugin-liquid).

As Liquid and Twig are quite similar, we were able to make minimal changes to the original plugin to support Twig.

This plugin is intended for HTML Twig templates (e.g. `.html.twig`). Twig can be used to template other file types (`.js.twig`, `.xml.twig`, etc.) but those are not a goal of this plugin. 
It may happen to work for some of them (such as `.xml.twig`), but that is incidental and not officially supported.

[Prettier](https://prettier.io) is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

## Installation

```bash
# with npm
npm install --save-dev prettier @destination/prettier-plugin-twig

# with pnpm
pnpm add --save-dev prettier @destination/prettier-plugin-twig
```

The plugin must be declared in the [configuration](https://prettier.io/docs/en/configuration.html).

```
{
  "plugins": ["@destination/prettier-plugin-twig"]
}
```

## Configuration

Prettier for Twig supports the following options.

| Name                        | Default | Description                                                                                                                                                    |
|-----------------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `printWidth`                | `120`   | Changed from Prettier's default (`80`) ([see prettier docs](https://prettier.io/docs/en/options.html#print-width))                                             |
| `tabWidth`                  | `2`     | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tab-width))                                                                  |
| `useTabs`                   | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#tabs))                                                                       |
| `singleQuote`               | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#quotes))                                                                     |
| `bracketSameLine`           | `false` | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#bracket-line))                                                               |
| `twigSingleQuote`           | `true`  | Use single quotes instead of double quotes in Twig tag and objects (since v0.2.0).                                                                             |
| `embeddedSingleQuote`       | `true`  | Use single quotes instead of double quotes in embedded languages (JavaScript, CSS, TypeScript inside `<script>`, `<style>` or Twig equivalent) (since v0.4.0). |
| `htmlWhitespaceSensitivity` | `css`   | Same as in Prettier ([see prettier docs](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity))                                                |
| `singleLineLinkTags`        | `false` | If set to `true`, will print `<link>` tags on a single line to remove clutter                                                                                  |
| `indentSchema`              | `false` | If set to `true`, will indent the contents of the `{% schema %}` tag                                                                                           |

## Ignoring code

We support the following comments (either via HTML or Twig comments):

- `prettier-ignore`
- `prettier-ignore-attribute`
- `prettier-ignore-attributes` (alias)

They target the next node in the tree. Unparseable code can't be ignored and will throw an error.

```twig
{# prettier-ignore #}
<div         class="x"       >hello world</div            >

{# prettier-ignore-attributes #}
<div
  x-data="{
    open: false,
    items: ['one', 'two', 'three']
  }"
  data-action="click->modal#open keydown.escape@window->modal#close"
></div>
```

## Contributing

[Read our contributing guide](CONTRIBUTING.md)

## License

MIT.

---
_Source: https://npm.io/package/@destination/prettier-plugin-twig · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._