prettier / plugin-php

Prettier PHP Plugin
https://loilo.github.io/prettier-php-playground/
MIT License
1.75k stars 130 forks source link

Support formatting of heredoc with HTML (& potentially other embedded languages) #2403

Open sxxov opened 2 months ago

sxxov commented 2 months ago

Thanks for all the work on this project, Prettier team!

Description

For HTML specifically, this is probably related to better inline support, & https://github.com/prettier/plugin-php/issues/845#issuecomment-441405121 but I figured the implementation for this would be slightly more straight forward as the explicit marking of HTML may make it more likely a html node be fully represented in one string. Many editors (including VSCode) also already highlight these sections by default with their respective syntax highlightings. Whilst prettier's HTML parser is still too strict to deal with interpolated tags (e.g. <$foo></$foo>, other parsers (like the one used in VSCode's builtin HTML formatter), can handle it.

For other languages, I guess it would depend more on their parsers, but I foresee that we could probably either use some sort of placeholder-replacement system, or just pass the whole string as is & YOLO.

Prettier 1.16.4

PHP Plugin 0.10.2

# Options (if any):
--use-tabs --php-version 8.2 --brace-style 1tbs

Input:

<?php

function Component($foo) {
    echo <<<HTML
        <div data-this-should-break data-bruh data-intersection>foo: $foo</div>
    HTML;
}

echo <<<HTML
    <main>
        {${Component(foo: "bar")}}
        {${Component(foo: "baz")}}
    </main>
HTML;

Output: (The same)

<?php

function Component($foo) {
    echo <<<HTML
        <div data-this-should-break data-bruh data-intersection>foo: $foo</div>
    HTML;
}

echo <<<HTML
    <main>
        {${Component(foo: "bar")}}
        {${Component(foo: "baz")}}
    </main>
HTML;

Expected behavior: The HTML should be formatted.

<?php

function Component($foo) {
    echo <<<HTML
        <div
            data-this-should-break
            data-bruh
            data-intersection
        >
            foo: $foo
        </div>
    HTML;
}

echo <<<HTML
    <main>
        {${Component(foo: "bar")}}
        {${Component(foo: "baz")}}
    </main>
HTML;