ember-template-lint-plugin-prettier
Advanced tools
It uses Prettier to lint your handlebars templates with ember-template-lint. The plugin defines a - single - rule. That rule will compare your code with Prettier's output.
⚠️ Prettier support for handlebars is still experimental ⚠️
Here is an output example:
error: Replace `New·Addons</h1>` with <h1>⏎New Addons⏎</h1>` (prettier/prettier) at app/templates/lists/new-addons.hbs:2:5:
1 | <div class="addons-index">
> 2 | <h1>New Addons</h1>
3 | {{addon-list addons=model}}
4 | </div>
./node_modules/.bin/ember-template-lint app/templates/lists/new-addons.hbs(code from emberobserver).
yarn add -D prettier ember-template-lint-plugin-prettier
As peerDependencies, prettier and ember-template-lint will have to be installed in your project. Prettier version local to the project will be used (not any global one!).
Also, this plugin doesn't come with a recommended set of rules (that you often provide in the extends config key). At least for today! You'll have to enable them manually (see "Recommended configuration").
You can merge your existing .template-lintrc.js configuration with this object:
module.exports = {
plugins: ["ember-template-lint-plugin-prettier"],
rules: {
prettier: true, // turn this plugin's rule on
// if you use ember-template-lint's recommended set of rules
// through `extends: "recommended"`,
// these two rules need to be disabled
// to let Prettier handle formatting
"block-indentation": false,
"self-closing-void-elements": false,
},
};
Handlebars support is still experimental in Prettier! So, between Prettier upgrades, you'll probably find out that your code is formatted in a slightly different way. Also, a few bug fixes are in progress. You can follow the work in progress here.
Are you're using bare strings in your templates? If you're unsure, you can lint your templates against this rule.
If you do so, you implicitly rely on your templates whitespaces. As such, you most probably want to wait before using this package. Indeed, whitespaces / newlines handling is still not 100% settled in Prettier.
You may want to define these two scripts in your package.json:
{
"scripts": {
"lint:hbs": "ember-template-lint .",
"format:hbs": "prettier **/*.hbs --write --parser=glimmer"
}
}
yarn lint:hbs is useful in CI. yarn format:hbs will let you format your templates if your editor does not have this feature yet.
Here is an early example of usage in emberobserver source code. As you can see, it's illustrating the whitespaces / newlines issue with bare strings.
Here is another early example of usage in ember-osf-web.
This plugin has been inspired by the prettier plugin for Eslint.
See CONTRIBUTING.md
v1.0.0 (2019-11-04)
FAQs
A prettier plugin for ember-template-lint
The npm package ember-template-lint-plugin-prettier receives a total of 4,247 weekly downloads. As such, ember-template-lint-plugin-prettier popularity was classified as popular.
We found that ember-template-lint-plugin-prettier demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.