Incorrect linting of `.gjs` files with `<template>` ttags

[jgadbois]

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>

[esbanarango]

I'm having a similar issue using ember-template-lint-plugin-prettier + prettie@v3 with .gts files. The way prettier formats the code ended up throwing a linter error from this plugin.

[esbanarango]

https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/20#issuecomment-1306378648

[dcyriller]

In prettier v3, prettier.resolveConfig and prettier.format became async. But we need a sync version of these functions in this package. This is why we added a dependency to prettier/prettier-synchronized.

Thing is, there is an issue opened in prettier-synchronized: it doesn't support Prettier plugins. This was okay until we need to support the new prettier-plugin-ember-template-tag.

To support the new prettier plugin, the dependency to prettier-synchronized needs to be removed and a workaround needs to be built. It seems the best option would be to have something similar to https://github.com/prettier/eslint-plugin-prettier/blob/v5.0.0/worker.js

[jelhan]

In prettier v3, prettier.resolveConfig and prettier.format became async. But we need a sync version of these functions in this package.

Why can't we use the async versions? Is that a limitation of ember-template-lint's plugin API?

[NullVoxPopuli]

prettier 3.1 should have fixed this (and latest plugin), ya? is this still an issue?

[dcyriller]

Why can't we use the async versions? Is that a limitation of ember-template-lint's plugin API?

We can't use these new async versions because of the ember-template-lint's rule API. A rule is a class with a "visitor". The visitor is a sync function. It is used to traverse the AST nodes to analyse them and / report / fix issues.

prettier 3.1 should have fixed this (and latest plugin), ya?

No, actually the bug fix released in 3.1 was for a different issue. This issue still remains: the prettier-synchronized package we use here doesn't support prettier plugins. So, in order to support prettier-plugin-ember-template-tag, we need to build a workaround similar to what has been done here: https://github.com/prettier/eslint-plugin-prettier/blob/v5.0.0/worker.js I don't have time to work on this myself. If someone wants to work on it, you're welcome.

[dcyriller]

If you want a quick and efficient workaround to this issue, you can remove the dependency to ember-template-lint-plugin-prettier and modify the package.json to add two lines:

  "scripts": {
    ...
    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
    "lint:css": "stylelint \"**/*.css\"",
    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
    "lint:hbs": "ember-template-lint .",
    "lint:hbs:fix": "ember-template-lint . --fix",
    "lint:prettier": "prettier --check .", <-- add this line
    "lint:prettier:fix": "prettier --write .", <-- add this line
    ...
  },

[jgadbois]

@dcyriller Thanks! I just ended up doing that and adding prettier to CI