prettier-plugin-eta

0.2.11 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Eta template files (`.eta`) with full-document support. Version 0.2.11, released periodically on GitHub. Formats JavaScript inside Eta tags using babel-ts and surrounding HTML via Prettier's HTML parser, preserving trim markers and template literals. Honors standard Prettier options. Also exposes an Eta-aware HTML tag matcher for editor tooling.

Common errors

error Error: Cannot find module 'prettier-plugin-eta' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev prettier prettier-plugin-eta

error Error: Plugin prettier-plugin-eta not found ↓

cause Prettier config file does not include the plugin correctly.

fix

Add '"plugins": ["prettier-plugin-eta"]' to your .prettierrc

error TypeError: Cannot read properties of undefined (reading 'match') ↓

cause The `findMatchingHtmlTag` function was called without proper Eta syntax or outside a template.

fix

Ensure the source string is a valid Eta template and contains matching HTML tags.

Warnings

gotcha Range formatting is intentionally out of scope; formatting must be full-document. ↓

fix Use `--range-start` and `--range-end` with caution; the plugin may ignore range requests.

gotcha Requires Prettier v3.0.0 or higher; does not work with Prettier v2. ↓

fix Ensure prettier version is ^3.0.0 in your package.json.

deprecated The plugin is still actively maintained but the repository is labeled as 'eta-template-language' with multiple components. ↓

fix No action needed, but be aware of potential name changes in the future.

Install

npm install prettier-plugin-eta

yarn add prettier-plugin-eta

pnpm add prettier-plugin-eta

Imports

prettier-plugin-eta

wrong

import { prettierPluginEta } from 'prettier-plugin-eta'

correct

add 'prettier-plugin-eta' to plugins array in Prettier config (e.g., .prettierrc)

This is a Prettier plugin, not a library. It must be listed in Prettier's plugins config.

findMatchingHtmlTag

wrong

import { findMatchingHtmlTag } from 'prettier-plugin-eta'

correct

import { findMatchingHtmlTag } from 'prettier-plugin-eta/html-tag-matcher'

The tag matcher is a secondary export from a separate entry point.

default import
wrong
```
const plugin = require('prettier-plugin-eta')
```
correct
```
import plugin from 'prettier-plugin-eta'
```
TypeScript types are shipped; ESM import works. CommonJS require may also work but is not recommended.

Quickstart

Install the plugin, configure it in .prettierrc, and format .eta files with Prettier.

// .prettierrc
{
  "plugins": ["prettier-plugin-eta"],
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2
}

// Run:
// npx prettier --write "views/**/*.eta"

// Example Eta template (input.eta):
// <html>
//   <body>
//     <%= it.users.map(u => u.name).join(', ') %>
//   </body>
// </html>

// After formatting (output.eta):
// <html>
//   <body>
//     <%= it.users.map((u) => u.name).join(", ") %>
//   </body>
// </html>