prettier-plugin-ember-template-tag
A Prettier plugin for formatting Ember template tags in both .gjs
and .gts
files. See also Ember Template Imports.
Usage
-
Install:
NPM:
npm install --save-dev prettier prettier-plugin-ember-template-tag
Yarn:
yarn add --dev prettier prettier-plugin-ember-template-tag
PNPM:
pnpm add --save-dev prettier prettier-plugin-ember-template-tag
-
Configure with prettierrc:
module.exports = {
plugins: ['prettier-plugin-ember-template-tag'],
};
-
Run npm prettier --write .
Opinions
This plugin works by weaving together Prettier's standard babel-ts and glimmer parsers, so it doesn't have many opinions of its own.
With that said, I did have to make some decisions about when and where to include or omit semicolons. You can read more about and comment on my decision process on this RFC.
Configuration
These configuration options are available in addition to Prettier's standard config for JavaScript and Handlebars files.
Name | Default | Description |
---|
templateSingleQuote | false | Same as in Prettier but affecting only template tags |
Ignoring code
Because 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:
export default class MyComponent extends Component {
cells = matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
<template>
{{! prettier-ignore }}
{{#each this.cells as |cell|}}{{cell.contents}}{{/each}}
</template>
}
To ignore the entire template, use a JavaScript //prettier-ignore
comment before the opening <template>
tag:
export default class MyComponent extends Component {
<template>
This whole template is ignored
<MyUglyComponent "shall" be="preserved">
<ThisPart
is = "also preserved as is"
/>
</MyUglyComponent>
</template>
}
Bugs
If you find a bug, please file a bug report! See CONTRIBUTING.md for more details.