# @destination/prettier-plugin-twig 中文文档

规范地址：https://npmcn.com/package/%40destination/prettier-plugin-twig/

版本：3\.1\.0
npm 元数据更新时间：2026-08-13T09:26:43.694Z
中文译文更新时间：2026-11-12T01:42:57.482Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40destination/prettier-plugin-twig
原文对照：https://npmcn.com/package/%40destination/prettier-plugin-twig/?lang=original
项目主页：https://github.com/wearedestination/prettier-plugin-twig
源码仓库：https://github.com/wearedestination/prettier-plugin-twig

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.2 MB，66 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：prettier ^3\.0\.0
- 首次发布：2023-11-21T14:35:55.187Z
- 最新版本发布：2026-08-13T09:26:43.269Z
- 近 30 天下载量：10148（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 5 个）

## 中文简介

目的地 Pretier Twig/ HTML 插件

## 安装

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

## README

# Twig HTML 高级插件

这是优秀的叉子 [购买液体前置插件](https://github.com/Shopify/prettier-plugin-liquid)。 。 。 .

由于Liquid和Twig相当相近,我们能够对原插件进行最小的修改,以支持Twig.

此插件用于HTML Twig模板(例如. `.html.twig`) (中文(简体) ). Twig可用于模板其他文件类型(`.js.twig`, (中文(简体) ), `.xml.twig`等),但这些不是此插件的目标. 它可能恰好对其中一些人起作用(例如: `.xml.twig`),但这是偶然的,没有官方支持.

[高级](https://prettier.io/) 是一个有观点的代码。 它通过解析你的代码并用自己的规则重新打印来执行一个一致的样式,这些规则考虑到了最大行长,必要时会包接代码.

## 安装

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

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

插件必须在 [配置](https://prettier.io/docs/en/configuration.html)。 。 。 .

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

## 配置

Twig的Pretier支持以下选项.

| 名称 | 默认 | 说明 |
| --- | --- | --- |
| `printWidth` | `120` | 从 Pretier 默认值中更改(`80`(中文(简体) )[见更漂亮的文件](https://prettier.io/docs/en/options.html#print-width)(中文(简体) ) |
| `tabWidth` | `2` | 与Pretier相同([见更漂亮的文件](https://prettier.io/docs/en/options.html#tab-width)(中文(简体) ) |
| `useTabs` | `false` | 与Pretier相同([见更漂亮的文件](https://prettier.io/docs/en/options.html#tabs)(中文(简体) ) |
| `singleQuote` | `false` | 与Pretier相同([见更漂亮的文件](https://prettier.io/docs/en/options.html#quotes)(中文(简体) ) |
| `bracketSameLine` | `false` | 与Pretier相同([见更漂亮的文件](https://prettier.io/docs/en/options.html#bracket-line)(中文(简体) ) |
| `twigSingleQuote` | `true` | 在 Twig 标签和对象( 自 v. 2. 0) 中使用单引号而不是双引号 . |
| `embeddedSingleQuote` | `true` | 在嵌入式语言(JavaScript, CSS, TypeScript)中使用单引出而不是双引出 `<script>`, (中文(简体) ), `<style>` (自v. 4.0起). |
| `htmlWhitespaceSensitivity` | `css` | 与Pretier相同([见更漂亮的文件](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity)(中文(简体) ) |
| `singleLineLinkTags` | `false` | 如果设置为 `true`,将打印 `<link>` 在单行上去除拼接符的标记 |
| `indentSchema` | `false` | 如果设置为 `true`,将缩进 `{% schema %}` 标签 |

## 忽略代码

我们支持以下评论(通过HTML或Twig评论):

-   `prettier-ignore`
-   `prettier-ignore-attribute`
-   `prettier-ignore-attributes` (别名)

他们瞄准了树上的下一个节点. 无法解析的代码不能被忽略,并且会丢出一个错误.

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

## 捐款

[阅读我们的贡献指南](https://npmcn.com/package/%40destination/prettier-plugin-twig/CONTRIBUTING.md)

## 许可证

麻省理工学院.

## 常见问题

### @destination/prettier-plugin-twig 是什么？

目的地 Pretier Twig/ HTML 插件

### 如何安装 @destination/prettier-plugin-twig？

在项目目录运行 npm install @destination/prettier-plugin-twig，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prettier（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @destination/prettier-plugin-twig 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @destination/prettier-plugin-twig 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @destination/prettier-plugin-twig 可以商用吗？

@destination/prettier-plugin-twig 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @destination/prettier-plugin-twig 的下载量有多少？

根据 npm 官方下载统计，@destination/prettier-plugin-twig 在 2026/10/12 – 2026/11/10 这 30 天内被下载 10,148 次，日均约 338 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @destination/prettier-plugin-twig 还在维护吗？

最新版本 3\.1\.0 发布于 2026/08/13（2 个月前）；至今共发布 9 个版本，其中过去 12 个月发布了 5 个；首次发布于 2023/11/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。