{"id":17482232,"url":"https://github.com/ember-tooling/prettier-plugin-ember-template-tag","last_synced_at":"2025-04-13T21:41:15.944Z","repository":{"id":61316466,"uuid":"550417831","full_name":"ember-tooling/prettier-plugin-ember-template-tag","owner":"ember-tooling","description":"A prettier plugin for formatting Ember template tags","archived":false,"fork":false,"pushed_at":"2025-04-11T19:42:14.000Z","size":1601,"stargazers_count":23,"open_issues_count":18,"forks_count":13,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T20:36:30.487Z","etag":null,"topics":["emberjs","hacktoberfest","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/ember-tooling.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2022-10-12T18:25:27.000Z","updated_at":"2025-04-11T19:41:07.000Z","dependencies_parsed_at":"2023-12-06T21:31:05.275Z","dependency_job_id":"880131de-8f8a-4cee-bd27-1c6a3e73f819","html_url":"https://github.com/ember-tooling/prettier-plugin-ember-template-tag","commit_stats":{"total_commits":368,"total_committers":11,"mean_commits":33.45454545454545,"dds":0.5461956521739131,"last_synced_commit":"5556a1e8102ebd3507eafe7b51c6561cc96f84fa"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-tooling%2Fprettier-plugin-ember-template-tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-tooling%2Fprettier-plugin-ember-template-tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-tooling%2Fprettier-plugin-ember-template-tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ember-tooling%2Fprettier-plugin-ember-template-tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ember-tooling","download_url":"https://codeload.github.com/ember-tooling/prettier-plugin-ember-template-tag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248479941,"owners_count":21110929,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["emberjs","hacktoberfest","prettier-plugin"],"created_at":"2024-10-18T23:04:49.898Z","updated_at":"2025-04-13T21:41:15.903Z","avatar_url":"https://github.com/ember-tooling.png","language":"TypeScript","readme":"# prettier-plugin-ember-template-tag\n\n[![CI](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/actions/workflows/ci.yml/badge.svg)](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/prettier-plugin-ember-template-tag.svg)](https://www.npmjs.com/package/prettier-plugin-ember-template-tag)\n[![license](https://img.shields.io/npm/l/prettier-plugin-ember-template-tag.svg)](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/blob/main/LICENSE.md)\n\nA [Prettier](https://prettier.io/) plugin for formatting [Ember template tags](https://rfcs.emberjs.com/id/0779-first-class-component-templates/) in both `.gjs` and `.gts` files. See also [Ember Template Imports](https://github.com/ember-template-imports/ember-template-imports).\n\n## Compatibility\n\nPrettier 3.0.0 and above\n\n**_IMPORTANT!_** If you are running Prettier via eslint-plugin-ember and eslint-plugin-prettier\u003csup\u003e1\u003c/sup\u003e:\n\n| eslint-plugin-ember | prettier-plugin-ember-template-tag |\n| ------------------- | ---------------------------------- |\n| \u003c12                 | 1.1.0                              |\n| \u003e=12                | 2+                                 |\n\n\u003csup\u003e1\u003c/sup\u003e Neither I [nor the Prettier project](https://prettier.io/docs/en/integrating-with-linters.html) recommend running Prettier this way.\n\n## Usage\n\n1. Install:\n\n   NPM:\n\n   ```bash\n   npm install --save-dev prettier prettier-plugin-ember-template-tag\n   ```\n\n   Yarn:\n\n   ```bash\n   yarn add --dev prettier prettier-plugin-ember-template-tag\n   ```\n\n   PNPM:\n\n   ```bash\n   pnpm add --save-dev prettier prettier-plugin-ember-template-tag\n   ```\n\n1. [Configure prettier](https://prettier.io/docs/en/configuration.html) using your preferred method. For example, with `.prettierrc.js`:\n\n   ```js\n   // .prettierrc.js\n   module.exports = {\n     // ...\n     plugins: ['prettier-plugin-ember-template-tag'],\n     overrides: [\n       {\n         files: '*.{js,ts,gjs,gts}',\n         options: {\n           singleQuote: true,\n         },\n       },\n       // ...\n     ],\n   };\n   ```\n\n   _If you already have a `\"prettier\"` section in `package.json`, remember that takes precedence over the `.prettierrc.js` file!_\n\n1. Run prettier on your codebase\n\n   ```shell\n   # With prettier \u003e= 3.1\n   npm prettier --write .\n\n   # With prettier \u003c 3.1\n   # See \u003chttps://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/113\u003e and\n   # \u003chttps://github.com/prettier/prettier/issues/15351\u003e for details on why using the\n   # `--plugin` flag is required here.\n   npm prettier --write . --plugin prettier-plugin-ember-template-tag\n   ```\n\n## Opinions\n\nThis plugin works by weaving together Prettier's standard [babel-ts](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBLWcBOAzAhmOAAgFkBPASQx3yOAB0pDDsIIAKASiUIGcZN0AcwA0DJgCNcmbgEFMmXKQA8UAK4BbcVgB8oqAF8GDOAA8ADhEwxCucXwVhrYADa4ePQgDFWhVOrPOcOoIMB5klPDUBIT0jMysnDFiTCmpTAD06YQAKgDyACK53JhwMKqYjLiVjqq4zoQAbnWqRAAWWHDJaYQlZRWEAOTtzs4QA10phnGCpYSSmImxqb3ljADaTACMehNMAEzChADMeqkAuslTUwwwpGZEAEpwAI4tfNl3RAC8gwDiAKLZAaEAA+gwAEv8ZPlgWCBgAFXIAZSBoMG8IAqqi4bl4dlyLkAHJI2GDADCRMJ-zJ2MG+X+ABlAf9SQNsg8ZGSWSBhCAIGYYKhoDxkKApJgIAB3eFSBAilB1SWKEW88QOADWpSRuGCDPQcGQeGcPDgqo1WrM+CEyH4LV5QS0ABNHXBHQyqoJajNvJh1LgYIKoIJkCBcKoYBAeSBWjB1M4AOqtVDwHiWghIuXJ1ANZOkENgdxR9AmqzwhSCP2Guom3kAKx4JiRQkCAEVVBB4FXjaaQJbMCWQ5ItM4ALShKNmASweOoR0wVrIAAcAAZeZOICb4wozCHJ3ASw0DbzXh24GX+fLQzwR1A4K7XVGSq9UCUy7gK7guzWQCb1KgbZgdo-s2cBtqeX49jAtgznOC5IAcID8LgqDOEIZIQOolYoPuACsUaqCa2S2PKRrfg0LSUC6sBImAAgCjIUCOkityBBB+j6EAA) and [glimmer](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEACVAeAJgSwG7qFgA2AhgM7kC8AOiAjAE4CedhqAfDVOhgBYBGDsGDoYOGMTjsAvjIwB6QVx6ZcBdCQrU6AIwhZWIFe1OERhfYbOE53Reo6YFjkABoQEAA7jo5ZKCkjIwQAO4ACkEI-iikxKGkzP4euoykYADWcDAAyqQAtnAAMjhQcMgAZnHkcClpmdk5XumlAObITACutfT5unBYWANFpFCtnaStcABiEIz5pDDiY8ggpJ0wEO4gfDD5xADqfBJw5M1gcDnREvgSzKtglNulNYww4WmtC5XVPQBW5AAHjk2lIAIqdCDwH7EGoeZqMV6rVrEHD5QqMbZeRilGAHHBYGB8ZAADgADPCQjUDmkvKtsac4Iw8OUPABHSHwD7eGJrcgAWjKAwG20YcA5ODFH0m3yQVVhPRq+RwHUY3Q85FBcAhUPKct+HhgpF0+MJxKQACZDWkcKixgBhCDo0irU4AVm2nRqABVjTF5XCQHhugBJKBDWA5MA4nwAQXDORgzCkMJqciAA) parsers, so it doesn't have many opinions of its own. With that said, I did have to make some opinionated decisions regarding how templates are printed within the JavaScript. In general, my strategy has been to ask \"What would a function do?\" since functions can be used in the same positions as the `\u003ctemplate\u003e` tag.\n\n### Semicolons\n\nSemicolons will be included or omitted as follows:\n\n```js\nexport default class MyComponent extends Component {\n  \u003ctemplate\u003eHello\u003c/template\u003e // omit\n}\n\n\u003ctemplate\u003eHello\u003c/template\u003e // omit\n\nexport default \u003ctemplate\u003eHello\u003c/template\u003e // omit\n\nexport const MyComponent = \u003ctemplate\u003eHello\u003c/template\u003e; // include by default, omit in no-semi mode\n```\n\nYou can read more about and comment on my semicolon decision process [on this RFC](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/1).\n\n### New Lines\n\nTemplate tags will always be printed on their own line for templates that are default exports or top-level class templates. Templates used as expressions will be allowed to collapse onto a single line if they fit:\n\n```js\nimport Component from '@glimmer/component';\n\nconst what = \u003ctemplate\u003eUsed as an expression\u003c/template\u003e;\n\nexport const who = \u003ctemplate\u003eUsed as an expression\u003c/template\u003e;\n\n\u003ctemplate\u003e\n  The default export\n\u003c/template\u003e\n\nclass MyComponent extends Component {\n  \u003ctemplate\u003e\n    Top-level class template\n  \u003c/template\u003e\n}\n```\n\n### `export default`\n\nThe following `\u003ctemplate\u003e` invocations both desugar to default exports:\n\n```js\n// template-only-component.js\n\n\u003ctemplate\u003eHello\u003c/template\u003e;\n\n// or\n\nexport default \u003ctemplate\u003eHello\u003c/template\u003e;\n```\n\nBy default, this plugin will remove `export default` to print the more concise \"sugared\" default export template. If you would prefer to always include `export default`, you can enable the `templateExportDefault` option described below.\n\n## Configuration\n\nThese configuration options are available in addition to [Prettier's standard config for JavaScript and Handlebars files](https://prettier.io/docs/en/options.html).\n\n| Name                    | Default   | Description                                                                                                                                                                                     |\n| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `templateExportDefault` | `false`   | If `true`, default export template tags will be prepended with `export default`.                                                                                                                |\n| `templateSingleQuote`   | undefined | [Same as in Prettier](https://prettier.io/docs/en/options.html#quotes) but affecting only template tags. If `undefined`, will fall back to whatever is set for the global `singleQuote` config. |\n\n\u003c!-- TODO: | `templatePrintWidth`  | `80`    | [Same as in Prettier](https://prettier.io/docs/en/options.html#print-width) but affecting only template tags | --\u003e\n\n## Editor integration\n\n### VSCode\n\n1. Install Prettier and this plugin as [shown above.](#usage)\n1. Install the [`Prettier - Code Formatter` VSCode Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).\n1. Reload your VSCode window.\n1. The format command and format-on-save should now work for `.gjs` and `.gts` files. You might need to wait a few seconds for the Prettier extension to register the plugin. If this does not work, you can manually set Prettier as the default formatter for `.gjs` and `.gts` as shown below, like so, but please file an issue if you need to do this:\n\n   ```jsonc\n   // .vscode/settings.json\n   {\n     \"[gjs]\": {\n       // \"editor.formatOnSave\": true,\n       \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n     },\n\n     \"[gts]\": {\n       // \"editor.formatOnSave\": true,\n       \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n     }\n   }\n   ```\n\n1. If you're still having issues, check out [this issue](https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/38) for troubleshooting ideas and comment there with what ends up working.\n\n## Ignoring code\n\nBecause gts/gjs files include both JavaScript and Glimmer template code, you'll need to use the appropriate prettier-ignore comment for the code you are ignoring:\n\n```js\nexport default class MyComponent extends Component {\n  // prettier-ignore\n  cells = matrix(\n    1, 0, 0,\n    0, 1, 0,\n    0, 0, 1\n  )\n\n  \u003ctemplate\u003e\n    {{! prettier-ignore }}\n    {{#each this.cells as |cell|}}{{cell.contents}}{{/each}}\n  \u003c/template\u003e\n}\n```\n\nTo ignore the entire template, use a JavaScript `//prettier-ignore` comment before the opening `\u003ctemplate\u003e` tag:\n\n```js\nexport default class MyComponent extends Component {\n  // prettier-ignore\n  \u003ctemplate\u003e\n    This whole template is ignored\n    \u003cMyUglyComponent     \"shall\"     be=\"preserved\"\u003e\n      \u003cThisPart\n        is  =  \"also preserved as is\"\n      /\u003e\n    \u003c/MyUglyComponent\u003e\n  \u003c/template\u003e\n}\n```\n\n## Bugs\n\nIf you find a bug, please file a bug report! See [CONTRIBUTING.md](CONTRIBUTING.md) for more details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-tooling%2Fprettier-plugin-ember-template-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fember-tooling%2Fprettier-plugin-ember-template-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fember-tooling%2Fprettier-plugin-ember-template-tag/lists"}