prettier-plugin-ember-template-tag
Advanced tools
A prettier plugin for formatting Ember template tags
A Prettier plugin for formatting Ember template tags in both .gjs and .gts files. See also Ember Template Imports.
Prettier 3.0.0 and above
IMPORTANT! If you are running Prettier via eslint-plugin-ember and eslint-plugin-prettier1:
| eslint-plugin-ember | prettier-plugin-ember-template-tag |
|---|---|
| <12 | 1.1.0 |
| >=12 | 2+ |
1 Neither I nor the Prettier project recommend running Prettier this way.
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 prettier using your preferred method. For example, with .prettierrc.js:
// .prettierrc.js
module.exports = {
// ...
plugins: ['prettier-plugin-ember-template-tag'],
overrides: [
{
files: '*.{js,ts,gjs,gts}',
options: {
singleQuote: true,
},
},
// ...
],
};
If you already have a "prettier" section in package.json, remember that takes precedence over the .prettierrc.js file!
Run prettier on your codebase
# With prettier >= 3.1
npm prettier --write .
# With prettier < 3.1
# See <https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/113> and
# <https://github.com/prettier/prettier/issues/15351> for details on why using the
# `--plugin` flag is required here.
npm prettier --write . --plugin prettier-plugin-ember-template-tag
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 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 <template> tag.
Semicolons will be included or omitted as follows:
export default class MyComponent extends Component {
<template>Hello</template> // omit
}
<template>Hello</template> // omit
export default <template>Hello</template> // omit
export const MyComponent = <template>Hello</template>; // include by default, omit in no-semi mode
You can read more about and comment on my semicolon decision process on this RFC.
Template 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:
import Component from '@glimmer/component';
const what = <template>Used as an expression</template>;
export const who = <template>Used as an expression</template>;
<template>
The default export
</template>
class MyComponent extends Component {
<template>
Top-level class template
</template>
}
export defaultThe following <template> invocations both desugar to default exports:
// template-only-component.js
<template>Hello</template>;
// or
export default <template>Hello</template>;
By 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.
These configuration options are available in addition to Prettier's standard config for JavaScript and Handlebars files.
| Name | Default | Description |
|---|---|---|
templateExportDefault | false | If true, default export template tags will be prepended with export default. |
templateSingleQuote | undefined | Same as in Prettier but affecting only template tags. If undefined, will fall back to whatever is set for the global singleQuote config. |
Install Prettier and this plugin as shown above.
Install the Prettier - Code Formatter VSCode Extension.
Reload your VSCode window.
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:
// .vscode/settings.json
{
"[gjs]": {
// "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[gts]": {
// "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
If you're still having issues, check out this issue for troubleshooting ideas and comment there with what ends up working.
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 {
// prettier-ignore
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 {
// prettier-ignore
<template>
This whole template is ignored
<MyUglyComponent "shall" be="preserved">
<ThisPart
is = "also preserved as is"
/>
</MyUglyComponent>
</template>
}
If you find a bug, please file a bug report! See CONTRIBUTING.md for more details.
v2.0.0 (2023-12-29)
This version is essentially a re-write. We are switching from using ember-template-imports to parse template tags to the more robust content-tag preprocessor. This should result in fewer unhandled cases and other bugs. For example, this plugin can now format route templates from ember-route-template!
This is a breaking change in that we are breaking compatibility with the current version of eslint-plugin-ember. If you are running Prettier via eslint-plugin-ember and eslint-plugin-prettier<sup>1</sup>, you will need to follow the following compatibility table, which also appears in the README for this plugin:
| eslint-plugin-ember | prettier-plugin-ember-template-tag | | ------------------- | ---------------------------------- | | <12 | 1.1.0 | | >=12.0.0-alpha.1 | 2+ |
<sup>1</sup> Neither I nor the Prettier project recommend running Prettier this way.
Additionally, there are some formatting differences in this version as discussed in the following RFCs:
FAQs
A prettier plugin for formatting Ember template tags
The npm package prettier-plugin-ember-template-tag receives a total of 18,442 weekly downloads. As such, prettier-plugin-ember-template-tag popularity was classified as popular.
We found that prettier-plugin-ember-template-tag demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.