{"id":28514452,"url":"https://github.com/ijlee2/prettier-plugin-ember-hbs-tag","last_synced_at":"2026-03-09T08:01:56.464Z","repository":{"id":296803044,"uuid":"993002410","full_name":"ijlee2/prettier-plugin-ember-hbs-tag","owner":"ijlee2","description":"Prettier plugin to format hbs tags","archived":false,"fork":false,"pushed_at":"2026-02-23T09:44:30.000Z","size":303,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-23T18:31:07.056Z","etag":null,"topics":["ember","emberjs","prettier","prettier-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ijlee2.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-30T03:51:08.000Z","updated_at":"2026-02-23T09:44:24.000Z","dependencies_parsed_at":"2026-02-23T12:00:41.850Z","dependency_job_id":null,"html_url":"https://github.com/ijlee2/prettier-plugin-ember-hbs-tag","commit_stats":null,"previous_names":["ijlee2/prettier-plugin-ember-hbs-tag"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/ijlee2/prettier-plugin-ember-hbs-tag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fprettier-plugin-ember-hbs-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fprettier-plugin-ember-hbs-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fprettier-plugin-ember-hbs-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fprettier-plugin-ember-hbs-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ijlee2","download_url":"https://codeload.github.com/ijlee2/prettier-plugin-ember-hbs-tag/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fprettier-plugin-ember-hbs-tag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30287446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","emberjs","prettier","prettier-plugin"],"created_at":"2025-06-09T02:00:17.778Z","updated_at":"2026-03-09T08:01:56.453Z","avatar_url":"https://github.com/ijlee2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![This project uses GitHub Actions for continuous integration.](https://github.com/ijlee2/prettier-plugin-ember-hbs-tag/actions/workflows/ci.yml/badge.svg)](https://github.com/ijlee2/prettier-plugin-ember-hbs-tag/actions/workflows/ci.yml)\n\n# prettier-plugin-ember-hbs-tag\n\n_Prettier plugin to format `hbs` tags_\n\n1. [Why use this package?](#why-use-this-package)\n1. [Installation](#installation)\n    - [Plugin options](#plugin-options)\n1. [Compatibility](#compatibility)\n1. [Contributing](#contributing)\n1. [License](#license)\n\n\n## Why use this package?\n\nUntil now, Ember developers had to use [`ember-template-lint-plugin-prettier`](https://github.com/ember-template-lint/ember-template-lint-plugin-prettier) to format their `*.hbs` files. This is a bit strange, because Prettier natively supports Handlebars since May 2021.\n\nThe plugin also comes with a few issues:\n\n- It uglifies code inside an `hbs` tag (i.e. wrong indentations in rendering tests, Storybook stories).\n- It needs to dynamically load `prettier` and use a hook from `ember-template-lint` to format `*.hbs`. Due to strong coupling, it will fall behind if `prettier` or `ember-template-lint` makes a breaking change to their API.\n- Prettier recommends not running `prettier` through a linter plugin. In January 2025, Ember CLI removed `eslint-plugin-prettier` and `stylelint-prettier` from its blueprints, in order to separate formatting and linting.\n\nIn short, what we're missing is a Prettier plugin to format `hbs` tags.\n\n\u003e [!TIP]\n\u003e \n\u003e Use [`prettier-plugin-ember-template-tag`](https://github.com/ember-tooling/prettier-plugin-ember-template-tag/) to format `\u003ctemplate\u003e` tags. You can find out below how to set up both plugins.\n\n\n## Installation\n\n1. In `package.json`, replace `ember-template-lint-plugin-prettier` with `prettier-plugin-ember-hbs-tag`.\n\n    \u003cdetails\u003e\n\n    \u003csummary\u003e\u003ccode\u003epackage.json\u003c/code\u003e\u003c/summary\u003e\n\n    `eslint-plugin-prettier` and `stylelint-prettier` are assumed to have been removed already. For more details, please see [my blog post](https://crunchingnumbers.live/2025/06/01/its-time-to-separate-lint-and-format/).\n\n    ```diff\n    {\n      \"devDependencies\": {\n        \"ember-template-lint\": \"...\",\n    -     \"ember-template-lint-plugin-prettier\": \"...\",\n        \"prettier\": \"...\",\n    +     \"prettier-plugin-ember-hbs-tag\": \"...\",\n        \"prettier-plugin-ember-template-tag\": \"...\"\n      }\n    }\n    ```\n\n    \u003c/details\u003e\n\n1. Remove `ember-template-lint-plugin-prettier` from the `ember-template-lint` configuration.\n\n    \u003cdetails\u003e\n\n    \u003csummary\u003e\u003ccode\u003e.template-lintrc.cjs\u003c/code\u003e\u003c/summary\u003e\n\n    ```diff\n    'use strict';\n\n    module.exports = {\n    -   plugins: ['ember-template-lint-plugin-prettier'],\n    -   extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],\n    -   overrides: [\n    -     {\n    -       files: ['**/*.{gjs,gts}'],\n    -       rules: {\n    -         prettier: 'off',\n    -       },\n    -     },\n    -     {\n    -       files: ['tests/**/*-test.{js,ts}'],\n    -       rules: {\n    -         prettier: 'off',\n    -       },\n    -     },\n    -   ],\n    +   extends: ['recommended'],\n    };\n    ```\n\n    \u003c/details\u003e\n\n1. Add `prettier-plugin-ember-hbs-tag` to the `prettier` configuration.\n\n    \u003cdetails\u003e\n\n    \u003csummary\u003e\u003ccode\u003eprettier.config.mjs\u003c/code\u003e\u003c/summary\u003e\n\n    Prettier's default parser for `*.{js,ts}` is `'babel'`. To format `*.{js,ts}` with an `hbs` tag, set the parser to `'ember-hbs-tag'`.\n\n    ```js\n    export default {\n      plugins: [\n        'prettier-plugin-ember-hbs-tag',\n        'prettier-plugin-ember-template-tag',\n      ],\n      overrides: [\n        {\n          files: ['*.{cjs,cts,js,mjs,mts,ts}'],\n          options: {\n            singleQuote: true,\n          },\n        },\n        {\n          files: ['tests/**/*-test.{js,ts}'],\n          options: {\n            parser: 'ember-hbs-tag',\n            singleQuote: true,\n            templateSingleQuote: false,\n          },\n        },\n        {\n          files: ['*.{gjs,gts}'],\n          options: {\n            singleQuote: true,\n            templateSingleQuote: false,\n          },\n        },\n        {\n          files: ['*.hbs'],\n          options: {\n            printWidth: 64,\n            singleQuote: false,\n          },\n        },\n      ],\n    };\n    ```\n\n    \u003c/details\u003e\n\n1. Finally, run `install` to update your project dependencies. Run `lint` and `lint:fix` to check that `hbs` tags can be formatted.\n\n\n### Plugin options\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003epreserveTrailingWhitespace\u003c/code\u003e\u003c/summary\u003e\n\nBy default, the plugin aims for prettiness.\n\nIf you need the trailing whitespace to remain unchanged (e.g. in tests), set `preserveTrailingWhitespace` to `true`.\n\n```diff\n/* prettier.config.mjs */\nexport default {\n  overrides: [\n    {\n      files: ['tests/**/*-test.{js,ts}'],\n      options: {\n        parser: 'ember-hbs-tag',\n+         preserveTrailingWhitespace: true,\n      },\n    },\n  ],\n};\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003etemplateSingleQuote\u003c/code\u003e\u003c/summary\u003e\n\nBy default, Prettier uses single quotes in `*.{js,ts}`, and the plugin uses the global value of `singleQuote` to decide whether to use single or double quotes in templates.\n\nHowever, you will most likely want double quotes for templates. So set `templateSingleQuote` to `false`, just like you did it for `prettier-plugin-ember-template-tag`.\n\n```diff\n/* prettier.config.mjs */\nexport default {\n  overrides: [\n    {\n      files: ['tests/**/*-test.{js,ts}'],\n      options: {\n        parser: 'ember-hbs-tag',\n+         templateSingleQuote: false,\n      },\n    },\n  ],\n};\n```\n\n\u003c/details\u003e\n\n\n## Compatibility\n\n- Prettier v3\n- Node.js v22 or above\n\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijlee2%2Fprettier-plugin-ember-hbs-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fijlee2%2Fprettier-plugin-ember-hbs-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijlee2%2Fprettier-plugin-ember-hbs-tag/lists"}