prettier-plugin-ember-hbs-tag

2.0.1 verified Sat Apr 25 auth: no javascript

A Prettier plugin to format JavaScript/TypeScript files containing `hbs` tagged template literals (Ember.js). Version 2.0.1 is the latest stable release, requiring Prettier ^3.0.0 and Node 22+ (dropped Node 20 in v2). Differs from `ember-template-lint-plugin-prettier` by natively formatting `hbs` tags without coupling to template lint, avoiding uglified code and API breakage. Works alongside `prettier-plugin-ember-template-tag` for `<template>` tags.

Common errors

error Error: Could not resolve 'prettier-plugin-ember-hbs-tag' ↓

cause Plugin not installed or missing from package.json.

fix

npm install --save-dev prettier-plugin-ember-hbs-tag

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

cause Prettier version <3.0.0 does not support plugin API used.

fix

Upgrade Prettier to ^3.0.0

error Expected a string but received undefined in plugin option ↓

cause Incorrect parser value or missing overrides.

fix

Ensure overrides section includes parser: 'ember-hbs-tag' for appropriate files.

error Error: Node.js version 20.x is not supported ↓

cause Using Node 20 with v2.0.0+.

fix

Upgrade Node to 22 or later.

Warnings

breaking Dropped support for Node 20 ↓

fix Use Node 22 or later. See https://github.com/ijlee2/prettier-plugin-ember-hbs-tag/releases/tag/v2.0.0

breaking Requires Prettier ^3.0.0 ↓

fix Upgrade Prettier to v3+. https://prettier.io/docs/en/install.html

gotcha Must set parser to 'ember-hbs-tag' in overrides for files that contain hbs tags; Prettier's default parser 'babel' will not format them. ↓

fix Add overrides with parser: 'ember-hbs-tag' for relevant file patterns (e.g., tests/**/*-test.{js,ts}).

gotcha Do not confuse with prettier-plugin-ember-template-tag; each formats different tag types (hbs vs <template>). ↓

fix Use both plugins as needed; ensure correct parser per file.

deprecated Replaces ember-template-lint-plugin-prettier; remove that plugin from package.json and template-lint config. ↓

fix Remove 'ember-template-lint-plugin-prettier' and update .template-lintrc.cjs as shown in README.

Install

npm install prettier-plugin-ember-hbs-tag

yarn add prettier-plugin-ember-hbs-tag

pnpm add prettier-plugin-ember-hbs-tag

Imports

default
wrong
```
import plugin from 'prettier-plugin-ember-hbs-tag'
```
correct
```
Add 'prettier-plugin-ember-hbs-tag' to plugins array in prettier config
```
This is a Prettier plugin, not a module you import directly. Configure it via prettier.config.mjs or .prettierrc.
parser (configuration)
wrong
```
parser: 'ember-template-tag'
```
correct
```
parser: 'ember-hbs-tag' in prettier overrides
```
Use 'ember-hbs-tag' for files with hbs tags; 'ember-template-tag' is from prettier-plugin-ember-template-tag.
require (CommonJS)
wrong
```
const plugin = require('prettier-plugin-ember-hbs-tag')
```
correct
```
plugins: ['prettier-plugin-ember-hbs-tag']
```
Prettier configs typically use string references; direct require may not work as expected.

Quickstart

Configures Prettier to format hbs tags in test files, using the ember-hbs-tag parser.

// prettier.config.mjs
export default {
  plugins: [
    'prettier-plugin-ember-hbs-tag',
    'prettier-plugin-ember-template-tag', // optional, for <template>
  ],
  overrides: [
    {
      files: ['tests/**/*-test.{js,ts}'],
      options: {
        parser: 'ember-hbs-tag',
        singleQuote: true,
        templateSingleQuote: false,
      },
    },
  ],
};

// Run: prettier --write tests/"*"