Beautify breaking tags - fix in docs not working

[sicahjes]

Describe the bug

No matter what I do, I cannot save a file with closing tags intact. I have tried the adding the 'bracketSameLine' to the phcode.json file, but that does not work. I then went down a rabbit hole with AI (I am not a coder), truing to find a fix. This resulted in various versions of .jsbeautifyrc.json and .jsbeautifyrc at root, wrap attributes in the phcode.json etc.

I use Phoenix Code to format pages in Canvas Instructure, this is a content management system that strips a lot of css. Unfortunately, it does not recognise tags split across lines, so my code ends up breaking.

Reproduction

1. Write code (see below)
2. Either save or press cmd + B to beautify.

Example of input

<section id="Example">
    <hr />
    <p style="text-align: justify; padding: 0;"><span style="font-size: 11pt;">Some text with link <a title="Link title" href="/courses/internal/url" data-course-type="wikiPages" data-published="true">will go here</a> followed by other text. </span></p>
    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;">
    <span style="color: #000000;"> 
    <a style="display: inline-block; background-color: #246b88; color: #ffffff; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: 14px; align-items: center;" href="mailto:some@email.edu.au?cc=other@email.edu.au&another@email.edu.au&amp;subject=custome%subject%20line">Email button name</a> </span></div>
</section>  

3. The beautifed code is formatted as:

section id="Example">
    <hr />
    <p style="text-align: justify; padding: 0">
        <span style="font-size: 11pt"
            >Some text with link<a
                title="Link title"
                href="/courses/internal/url"
                data-course-type="wikiPages"
                data-published="true"
                >will go here</a
            >
            followed by other text.
        </span>
    </p>
    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center">
        <span style="color: #000000">
            <a
                style="
                    display: inline-block;
                    background-color: #246b88;
                    color: #ffffff;
                    padding: 6px 12px;
                    border-radius: 999px;
                    text-decoration: none;
                    font-size: 14px;
                    align-items: center;
                "
                href="mailto:some@email.edu.au?cc=other@email.edu.au&another@email.edu.au&amp;subject=custome%subject%20line"
                >Email button name</a
            >
        </span>
    </div>
</section>

Expected behavior

When the json file is set to bracketSameLine: true closing tags are not split over lines.

<section id="Example">
    <hr />
    <p style="text-align: justify; padding: 0">
        <span style="font-size: 11pt">Some text with link
            <a
                title="Link title"
                href="/courses/internal/url"
                data-course-type="wikiPages"
                data-published="true"
                >will go here</a>
            followed by other text.
        </span>
    </p>
    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center">
        <span style="color: #000000">
            <a
                style="
                    display: inline-block;
                    background-color: #246b88;
                    color: #ffffff;
                    padding: 6px 12px;
                    border-radius: 999px;
                    text-decoration: none;
                    font-size: 14px;
                    align-items: center;"
                href="mailto:some@email.edu.au?cc=other@email.edu.au&another@email.edu.au&amp;subject=custome%subject%20line"
                >Email button name</a>
        </span>
    </div>
</section>

OS, Browser and Phoenix versions

• Mac OS
• macbook Air M3
• Desktop app, Version 4.0.3

logs or debug stack trace if any

Additional context

I apologise if this not a bug but something I have done. I've followed the steps on the docs page.

[abose]

Phoenix Code’s built-in Beautify uses Prettier, and Prettier doesn’t support a setting to prevent tags like </a> from being split across lines (options like bracketSameLine won’t change this). I also checked available Beautify extensions (js-beautify based) and none reliably provide a “never split tags across lines” mode either.

One workaround you can use is to have a very long line length in prettier config. To do that add this in the preferences file (file>open preferences file) and add this into that file at end and try beautify:

"beautify.options": {
        "bracketSameLine": true,
        "singleAttributePerLine": false,
        "printWidth": 1000
    }, - omit this comma if adding last

See if this helps @sicahjes