Prettier Plugin for Handlebars (Ember.js Templates)

1.0.1 verified Fri May 01 auth: no javascript

A Prettier plugin that adds support for formatting Handlebars templates, primarily used in Ember.js applications. Current stable version 1.0.1. Development appears to be minimal with infrequent updates. Differentiates from other Handlebars formatters by integrating directly with Prettier, leveraging its consistent formatting engine and configuration. Suitable for Ember.js projects using GJS/GTS files or standalone .hbs templates.

Common errors

error Cannot find module 'prettier-plugin-hbs' ↓

cause Plugin not installed or not in node_modules.

fix

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

error Couldn't resolve parser "hbs" ↓

cause Plugin is not specified in Prettier plugins list.

fix

Add 'plugins': ['prettier-plugin-hbs'] to .prettierrc or pass plugins option in API.

error Error: Plugin prettier-plugin-hbs requires Prettier 2.x ↓

cause Incompatible Prettier version (e.g., 3.x).

fix

Downgrade Prettier to 2.x or use a compatible plugin.

Warnings

gotcha Plugin must be installed as a devDependency alongside Prettier. ↓

fix Ensure prettier is also installed: npm install --save-dev prettier

deprecated Version 1.0.1 may not support the latest Prettier versions (e.g., 3.x). ↓

fix Check plugin compatibility; consider alternative plugins like 'prettier-plugin-ember-template-tag' for Ember GJS/GTS files.

gotcha Parser name is 'hbs', not 'handlebars' as one might expect. ↓

fix Use parser: 'hbs' in Prettier configuration or API calls.

Install

npm install prettier-plugin-hbs

yarn add prettier-plugin-hbs

pnpm add prettier-plugin-hbs

Imports

prettier-plugin-hbs

wrong

import plugin from 'prettier-plugin-hbs'; (not used directly; plugin is used via Prettier configuration)

correct

// In .prettierrc: { "plugins": ["prettier-plugin-hbs"] } or Prettier API: const prettier = require('prettier'); prettier.format(code, { parser: 'hbs', plugins: [require('prettier-plugin-hbs')] });

Plugin is not imported directly in code; it's registered in Prettier config or passed as an option.

hbs

wrong

const formatted = prettier.format(template, { parser: 'handlebars' }); (wrong parser name)

correct

const formatted = prettier.format(template, { parser: 'hbs', plugins: [require('prettier-plugin-hbs')] });

Parser ID is 'hbs', not 'handlebars'.

Quickstart

Install Prettier and the plugin, configure with .prettierrc, then format a .hbs file.

npm install --save-dev prettier prettier-plugin-hbs
# Then create .prettierrc:
echo '{ "plugins": ["prettier-plugin-hbs"] }' > .prettierrc
# Format a file:
npx prettier --write app/templates/application.hbs