Re-formatting inline hbs tags in tests

[dwickern]

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:

ember-template-lint-plugin-prettier/lib/rules/prettier.js

Lines 45 to 49 in 43d7270

	// in hbs AST a Program may be: a Template or a Block
	// we want to apply this rule only to files, not to blocks contents
	if (!isFile(node.loc)) {
	return;
	}

But the contents of the hbs`...` block is getting passed into this plugin without any surrounding context and with { line: 1, column: 0 }.

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.

[ijlee2]

People can now use https://github.com/ijlee2/prettier-plugin-ember-hbs-tag to format hbs tags, and leave formatting *.hbs files to Prettier (natively supported).