[Bug] New line added in comment block (and maybe generally when dealing with embedded formats with syntax errors)

[gabrielcsapo]

🐞 Describe the Bug

When initial saving the following template

/**
 * EditCaptions, a component for editing the captions of a video.
 * @param {Object} videoPlayMetadata - meta data of the video
 * @param {Function} onEditCaptions - function to call and pass edited captions to
 * @param {Function} onEditCancel - function to call if user cancels editing actions
 * Usage:
    <Video$EditCaptions
      @videoPlayMetadata={{@videoPlayMetadata}}
      @onEditCaptions={{this.onEditCaptions}}
      @onEditCancel={{this.onCloseEditCaptionsModal}}
    />
 */
export default class EditCaptions extends Component {}

the following will result

/**
 * EditCaptions, a component for editing the captions of a video.
 * @param {Object} videoPlayMetadata - meta data of the video
 * @param {Function} onEditCaptions - function to call and pass edited captions to
 * @param {Function} onEditCancel - function to call if user cancels editing actions
 * Usage:
    <Video$EditCaptions
      @videoPlayMetadata={{@videoPlayMetadata}}
      @onEditCaptions={{this.onEditCaptions}}
      @onEditCancel={{this.onCloseEditCaptionsModal}}
    />

 */
export default class EditCaptions extends Component {}

It adds a new line after the content block

🔬 Minimal Reproduction

I am trying to make a reproduction, but it seems to only happen in my environment via the vscode plugin

😕 Actual Behavior

Adds a new line in comment

🤔 Expected Behavior

Do not add a new line in comment block

🌍 Environment

• prettier-plugin-ember-template-tag version: - 0.3.0
• ember-template-imports version: - 5.3.1

[gabrielcsapo]

seems to be related to https://github.com/prettier/prettier-vscode/issues/691

[gitKrystan]

Thanks for the report. I will look into this as soon as I get a chance.

[gitKrystan]

Are you using prettier-plugin-jsdoc ?

I am running into a similar issue here: https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/49

I suspect that prettier-plugin-jsdoc considers your documentation block invalid due to the lines starting without *, which is indeed triggering the bug mentioned in prettier/prettier-vscode#691

I managed to recreate the issue with this code:

/**
 * EditCaptions, a component for editing the captions of a video.
 * @param {Object} videoPlayMetadata - meta data of the video
 * @param {Function} onEditCaptions - function to call and pass edited captions to
 * @param {Function} onEditCancel - function to call if user cancels editing actions
 * Usage:

 */

And if I add the leading * to your example, the issue goes away.

[gabrielcsapo]

thank you so much @gitKrystan will try that locally and get back

[gitKrystan]

Weirdly, if I move your code into a .ts file, I do not experience the issue, so possibly it is related to this plugin, but I think the underlying issue has something to do with Prettier gobbling up errors, which I've been running into again and again as an issue.

[Techn1x]

I'm also hitting this issue unfortunately. Every save I do adds an extra newline

My template looks like this

// prettier-ignore
export const MyComponent: TOC<Signature> = <template><span class="inline">
  content goes here
  // new line keeps getting added here
</span></template>

Specifically, I have that prettier-ignore line there, to avoid extra whitespace before/after the template tags, as on this inline component the whitespace control is important. Same occurs if I use {{! prettier-ignore }} inside the template tags

When I format on save, it correctly avoids changing the opening <template><span... but then instead adds newlines at the end!

---

If this is unavoidable, is there a different way to avoid the extra whitespace when using template tags?

[gitKrystan]

Thanks for the report, @Techn1x. I was able to reproduce consistently. Looking into this now. It seems to be specific to format-on-save.

[hmajoros]

im seeing weird issues where, if you have a JSDoc comment with a type annotation with an object:

  /**
   * Error message from loading the suggestions and whether the user can retry.
   * @type {{ errorMessage: string, canRetry: boolean} | undefined }}
   */

this breaks the prettier plugin

✖ yarn prettier:
[error] packages/addons/profile-shared/addon/components/generated-suggestions/generated-suggestion-edit-view.gjs: SyntaxError: Unexpected token (544:9)
[error]   542 |
[error]   543 |
[error] > 544 |  export default [__GLIMMER_TEMPLATE(`{{!voyager-i18n-resource}}
[error]       |         ^
[error]   545 | {{t-def "Original" key="i18n_original"}}
[error]   546 | {{t-def "Dismiss" key="i18n_dismiss"}}
[error]   547 | {{t-def "Something went wrong. Please try again." key="failure_toast"}}

something about the double-curly in the comment block is throwing off prettier, because when i delete that line it works fine

[gitKrystan]

Thanks for the report @hmajoros. Can you move this to a top-level issue? It seems like a big deal. I might not be able to debug for a few weeks, unfortunately, but hopefully someone else will have time.

[Techn1x]

Specifically, I have that prettier-ignore line there, to avoid extra whitespace before/after the template tags, as on this inline component the whitespace control is important. Same occurs if I use {{! prettier-ignore }} inside the template tags

When I format on save, it correctly avoids changing the opening <template><span... but then instead adds newlines at the end!

Just confirming that it's definitely prettier (and not something like editorconfig, or eslint autofix, or whatever). I added *.gts to my .prettierignore file and it finally stops adding the newlines on save (but then I don't get prettier for the whole file of course!)

So it seems like there's 2 issues;

• newlines being inserted when they shouldn't be
• inline prettier-ignore directives not working as expected