prettier-plugin-astro is driving me crazy

[shell fjord]

I have this code block:

{
  showStyleURL && (
    <pre id="style-url-pre">
      <code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code>
    </pre>
  )
}

I want to remove the space between <pre> and <code> but prettier-plugin-astro is always formatting it like this. Can you tell me a workaround? Like can I put that 3 lines into a variable which I later put behind the if-block?

[edgy oak]

bit difficult for me to understand the issue but using .prettierignore can help avoid what your currently facing

even a variable in the code fences (---) will be formatted which should be exact replica of your current code block

[shell fjord]

I want to put this:

<p>Use the following style in a MapLibre map:</p>
<pre
  id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>

under an if-block:

{
  showStyleURL && (
    <>
      <p>Use the following style in a MapLibre map:</p>
      <pre
        id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
    </>
  )
}

My problem is that as soon as it's under an if-block, the formatter breaks it by entering a new line between the pre and the code which breaks the DOM.

{
  showStyleURL && (
    <>
      <p>Use the following style in a MapLibre map:</p>
      <pre id="style-url-pre">
        <code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code>
      </pre>
    </>
  )
}

Both of my GitHub issues got closed as duplicate / not planned.
https://github.com/withastro/prettier-plugin-astro/issues/419
and
https://github.com/withastro/prettier-plugin-astro/issues/420

I'd just like to have those lines ignored, but the rest of the file still working, of course. Can you help me find any workarounds? So far my only idea is to make a separate component for that 3 lines.

[edgy oak]

the issue is being tracked as we speak, but for the mean time you can choose a separate component and have it ignored by prettier as i mentioned previously

[shell fjord]

For the separate component do you mean a separate file? Basically this is what I did:

StyleUrlBug.astro

<p>Use the following style in a MapLibre map:</p>
<pre
  id="style-url-pre"><code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>

main file:

{showStyleURL && <StyleUrlBug />}