<div class="details">
  {{~t "player.ads_overlay.ad"~}}
  {{~this.sep~}}
  <span class="ad-place">
    {{~this.adPlacement~}}
  </span>
</div>

It won't let me do this, trying to understand how to tell it to ignore this but I still want it to warn me about other things...?

I believe it conflicts with Prettier, am I not right?

This code fails the ember-template-lint prettier rule:

module('Integration | Component | duration-picker', function (hooks) {
  test('renders', async function (assert) {
    await render(hbs`
      <DurationPicker>
        label
      </DurationPicker>
    `);
    assert.dom(this.element).includesText('label');
  });
);

[lint:hbs] tests/integration/components/duration-picker-test.js
[lint:hbs]   10:21  error  Delete `⏎······`  prettier
[lint:hbs]   12:2  error  Delete `······`  prettier
[lint:hbs]   12:14  error  Replace `······</DurationPicker>⏎····` with `</DurationPicker>`  prettier
[lint:hbs]   21:90  error  Replace `"value"` with `'value'`  prettier

After running ember-template-lint --fix, this is the result:

module('Integration | Component | duration-picker', function (hooks) {
  test('renders', async function (assert) {
    await render(hbs`<DurationPicker>
  label
</DurationPicker>`);
    assert.dom(this.element).includesText('label');
  });
);

Not good.

This behavior seemed to start in ember-template-lint v5 because .js files were included by default. But you can reproduce it on ember-template-lint v4 by running directly against a js file, e.g. ember-template-lint ./tests/integration/components/duration-picker-test.js.

It seems like the intention in #2 was for ember-template-lint-plugin-prettier not to run against embedded blocks:

Solutions

For now the best solution IMO is to disable this plugin for js files:

// .template-lintrc.js
'use strict';

module.exports = {
  plugins: ['ember-template-lint-plugin-prettier'],
  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
  rules: {
    // ...
  },
  overrides: [
    {
      // overrides for inline hbs`...` literals in tests
      files: ['tests/**/*-test.{js,ts}'],
      rules: {
        prettier: 'off',
      },
    },
  ],
};

Inline hbs support in prettier prettier/prettier#8647 is currently blocked by prettier/prettier#5588 and not getting much traction.

All my {{else if}} are transformed into {{else}{{#if}}

Before:

After:

Is this expected 🤔 ?

v4 moved to ESM -- as a result all template-lint plugins must also move to ESM.

I get this error atm:

require() of ES Module <repo>/node_modules/ember-template-lint-plugin-prettier/ember-template-lint-plugin-prettier.js from <repo>/node_modules/ember-template-lint/lib/get-config.js not supported.
Instead change the require of ember-template-lint-plugin-prettier.js in <repo>/node_modules/ember-template-lint/lib/get-config.js to a dynamic import() which is available in all CommonJS modules.}

Using ember-template-lint v4
this plugin: v4

❯ yarn lint:hbs
yarn run v1.22.17
$ ember-template-lint .
file://<repo>/node_modules/ember-template-lint/lib/get-config.js:265
        throw new Error(`Cannot find configuration for extends: ${extendName}`);
              ^

Error: Cannot find configuration for extends: ember-template-lint-plugin-prettier
    at processExtends (file://<repo>/node_modules/ember-template-lint/lib/get-config.js:265:15)
    at getProjectConfig (file://<repo>/node_modules/ember-template-lint/lib/get-config.js:399:5)
    at async Linter.loadConfig (file://<repo>/node_modules/ember-template-lint/lib/linter.js:48:19)
    at async Linter.verify (file://<repo>/node_modules/ember-template-lint/lib/linter.js:304:7)
    at async run (file://<repo>/node_modules/ember-template-lint/bin/ember-template-lint.js:211:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.}

This is fixed by: ember-template-lint/ember-template-lint#2359
But blocked by: ember-template-lint/ember-template-lint#2360

cc @bmish

Wondering if we could integrate ember-template-lint w/ the VSC Prettier extension. Thanks!

esbenp.prettier-vscode https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Every error generated by the prettier rule is located on line 1 column 0. This should be fixed!

Can you please give me NPM publishing permission so I can release a new version? https://www.npmjs.com/~bmishkin

We need to get this change out:

• #237

This isn't a breaking change so we could just release version 4.1.0 for now.

I just released ember-template-lint v5: https://github.com/ember-template-lint/ember-template-lint/releases/tag/v5.0.0

CC: @dcyriller

Even when a template file has no newline at the end of file, ember-template-lint-plugin-prettier complains when used with ALE. This is because ALE always terminates the last line of the temp file it passes to ember-template-lint with a newline.

dense-analysis/ale#3144 fixes this.

A deprecation warning was added to ember-template-lint in v3.8.0 that requires callers of the base rule's log method to pass in the associated AST node. This was required in order to provide consistent and accurate location information, including endLine and endColumn.

Currently, this package uses the older log API, which causes that deprecation warning. Considering the version range supported in the peerDependencies property in the package.json, we should consider conditionally changing the options passed to log depending on version number of the parent repository's package.json.

I am getting an error running lint:hbs that says Cannot serialize worker response. If I remove this plugin, it goes away. Any ideas?

Reproduction here shipshapecode/swach#1947

Users should be able to use this plugin with this configuration:

module.exports = {
  extends: 'recommended',

  plugins: ['prettier'],

  rules: {
    prettier: true,
    'no-abstract-roles': true,
    'no-obsolete-elements': true,
    'no-positive-tabindex': true,
  },
};

Currently it is:

module.exports = {
  extends: 'recommended',

  plugins: ['ember-template-lint-plugin-prettier'],

  rules: {
    prettier: true,
    'no-abstract-roles': true,
    'no-obsolete-elements': true,
    'no-positive-tabindex': true,
  },
};

Delete ⏎⏎⏎⏎⏎⏎⏎⏎⏎⏎⏎····················· (fixable)

Every single one of my app's test files shows this VSCode error at position [1, 1]. Clicking "fix" causes the entire test code to be laid out on a single line. If I disable ember-template-lint-plugin-prettier in .template-lintrc.js the error goes away. It only happens in test files, and furthermore it only appears in VSCode's "Problems" drawer--it does not appear in the CLI after linting.

Is anything else seeing this?

DEBUG: -------------------------------
DEBUG: Ember             : 3.25.4
DEBUG: Ember Data        : 3.25.0
DEBUG: Ember Simple Auth : 3.1.0
DEBUG: Model Fragments   : 5.0.0-beta.2
DEBUG: -------------------------------

// .template-lintrc.js

'use strict';

module.exports = {
  plugins: ['ember-template-lint-plugin-prettier'],
  extends: ['recommended', 'ember-template-lint-plugin-prettier:recommended'],
};

// .prettierrc.js

'use strict';

module.exports = {
  singleQuote: true,
  printWidth: 300,
  overrides: [
    {
      files: '*.hbs',
      options: {
        singleQuote: false,
      },
    },
  ],
};

The surrounding curly brackets should be replaced by `.

The quest to add Handlebars support in to Prettier is now complete jgwhite/prettier#1 (comment).

The documentation in this repo should be updated to reflect this as the HBS support is no longer experimental. There may be some dependency changes that can be done at the same time to enforce usage of the officially compatible Prettier versions.

And implement in this plugin the fix function.

This is an amazing, wonderful package that will save my fingers so much typing and my brain, so much distraction. THANK YOU!

Use of version 3.0.1 results in:

(node:76359) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/lib/index.js
require() of ES modules is not supported.
require() of /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/lib/index.js from /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint-plugin-prettier/lib/rules/prettier.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/runspired/github/private/fnb/frontend/node_modules/ember-template-lint/package.json.

Also opened ember-template-lint/ember-template-lint#2320

Dependabot encountered the following error when parsing your .dependabot/config.yml:

Automerging is not enabled for this account. You can enable it from the [account settings](https://app.dependabot.com/accounts/dcyriller/settings) screen in your Dependabot dashboard.

Please update the config file to conform with Dependabot's specification using our docs and online validator.

You can mention @dependabot in the comments below to contact the Dependabot team.

I'm using the recommended prettier plugin with .gjs files and <template> tags in components.

The prettier rule formats the component code after the <template> tag.

Example:

<template>
   <h1>Header</h1>
   <div>Test</div>
</template>

However, ember-template-lint with this plugin is giving a lint error and collapsing the first and last tags to the same line as template which doesn't look good.

<template><h1>Header</h1>
<div>test</div></template>

Do you plan to support this kind of usecase:

<div class="my-class {{if this.isActive 'my-class--modifier'}}">
</div>

This is supported by eslint but it conflicts with prettier 😅. Is there a way to disable the rule on prettier or to support it.

If I can help please let me know 😉

I'm trying to set up ember-template-lint-plugin-prettier and eslint-plugin-hbs together.
The duet works, but not as well as I would like.

Given this perfectly formatted code:

module("module description", function () {
  test("test description", async function () {
    await render(
      hbs`
        <MyComponent
          @foo={{this.foo}}
          @bar={{this.bar}}
          @baz={{this.baz}}
          @qux={{this.qux}}
        />
      `
    );
  });
});

ember-template-lint-plugin-prettier wants me to write it like this:

module("module description", function () {
  test("test description", async function () {
    await render(
      hbs`<MyComponent
  @foo={{this.foo}}
  @bar={{this.bar}}
  @baz={{this.baz}}
  @qux={{this.qux}}
/>`
    );
  });
});

Which is not good.

Is it possible to somehow configure the plugins to work well together?

Or was it a bad idea to try it and I should wait for prettier/prettier#8647?

@dcyriller how would you feel about my adding release-it to this repo? We use it for most of our other repos, and it makes releasing really easy. I'm happy to add it.

"ember-template-lint": "^2.10.0"
"ember-template-lint-plugin-prettier": "^2.0.0"
"prettier": "^2.0.5"

Behavior:

ember-template-lint --fix [FILE] removes the newline at EOF

Expected behavior:

EOF newlines should at minimum be respected, or even added, since that is Prettier's behavior

I do not see this behavior if I remove prettier: true from .template-lintrc.js, which is what leads me to believe this is an issue with the plugin.

Line 29 is the last line with text, and Line 30 is a newline

ember-template-lint v5 is out:

• https://github.com/ember-template-lint/ember-template-lint/releases/tag/v5.0.0
• https://github.com/ember-template-lint/ember-template-lint/releases/tag/v5.0.0-alpha.0

The work is being tracked in: ember-template-lint/ember-template-lint#2319

https://github.com/ember-template-lint/ember-template-lint-plugin-prettier/blob/master/package.json#L31-L32

The peerDep range excludes support for ember-template-lint v3+ and prettier v2+, which throws warnings when consumed by projects using those versions:

warning " > [email protected]" has unmet peer dependency "ember-template-lint@>=2.10.0".

Unless this plugin is meant to specifically not support those versions, can we update the peerDeps to be inclusive of the latest releases?

Ember Times 180 announced Handlebars support for prettier, and recommended that folks use this repo to integrate it.

This repo defines peerDependencies for outdated major versions of both ember-template-lint@2 and prettier@1. The latest versions are [email protected] and [email protected].

From my own experimentation, this repo works fine with the latest major versions, so it may only be the peer dependency ranges that need altering.

See basic test added to confirm it was possible over in ember-template-lint/ember-template-recast#254.

An extra line break is added on each formatting of an attribute with curlies - when longer than the max line width.

Example:

<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind {{this.conditionalClass}}">
   Some stuff
</div>

Prettier the 1st time. Perfect!:

<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind 
   {{this.conditionalClass}}">
   Some stuff
</div>

Prettier the 2nd time:

<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind 

   {{this.conditionalClass}}">
   Some stuff
</div>

Prettier the 3rd time:

<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind

 
   {{this.conditionalClass}}">
   Some stuff
</div>

Prettier the 4th time:

<div class="lots of classes but we are using tailwindcss so that is the nature of things especially when you have a lot of wind

 

   {{this.conditionalClass}}">
   Some stuff
</div>

And so on. It's a niggle :)

Thanks for the great plugin BTW.