HTML comments inside svelte markup cause a distortion of the tag <script>

[el-leonya]

If you add any html comment (for example: <!--SomeComment-->) before the closing </ul> tag in src/routes/blog/index.svelte in this project, the script tag will be distorted. Here is an example:

<svelte:head>
  <title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>

<ul>
  {#each posts as post}
    <!-- we're using the non-standard `rel=prefetch` attribute to
				tell Sapper to load the data for the page as soon as
				the user hovers over the link or taps it, instead of
				waiting for the 'click' event -->
    <li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
  {/each}
  <!--Comment-->
</ul>

<script<svelte:head>
  >
  export function preload() {
    return this.fetch(`blog.json`)
      .then((r) => r.json())
      .then((posts) => {
        return { posts };
      });
  }
</script>

VSCode 1.50.0
Svelte for VS Code: v102.1.1
Prettier - Code formatter: v5.7.1

my settings.json:

{
  "workbench.iconTheme": "material-icon-theme",
  "editor.tabSize": 2,
  "editor.fontFamily": "' JetBrains Mono','Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback'",
  "editor.fontSize": 14.5,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "files.watcherExclude": {
    "**/build/**": true,
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "files.autoSave": "onFocusChange",
  "html.format.indentInnerHtml": true,
  "svelte.plugin.css.enable": false,
  "svelte.plugin.css.diagnostics.enable": false,
  "svelte.plugin.svelte.diagnostics.enable": false
}

[ehrencrona]

I can't reproduce this... what does your .prettierrc.json look like?

[el-leonya]

I can't reproduce this... what does your .prettierrc.json look like?

.prettierrc.json is available in the repository that I made for reproducing the bug https://github.com/ljonya/my-app.

[ehrencrona]

Sorry, I wrote before thinking :P Unfortunately, I can't reproduce it even with that .prettierrc.json. Very strange.

[dummdidumm]

I cannot reproduce this either. Do you have any other extensions installed that might mess with Svelte files? What if you disable all extensions except "Svelte for VS Code"?

[el-leonya]

I recorded a GIF with a complete sequence of actions.

[el-leonya]

@dummdidumm I disable all extensions except Svelte for VS Code (see gif above).

[dummdidumm]

No wonder we cannot reproduce this anymore - this was fixed as part of #152 😄 So this should be good after the next release.

[el-leonya]

This is great. Thank you!

[el-leonya]

@dummdidumm
With Svelte for VS Code v102.2.0 the problem is still present.

[dummdidumm]

Is prettier-plugin-svelte part of your node_modules? If so, that needs to be bumped to the latest version, too. If the plugin is present in the node_modules that one is used instead of the one bundled with VS Code.

[el-leonya]

@dummdidumm Sorry, I forgot to update the plugin. Everything works great. Thank you!