Formatting the HTML code in PHP files as it pertains to having inline PHP set in or as HTML attributes. I'll try to include pretty much every usecase or variation I have seen so far also whatever relevant examples that have been reported to me via my VSCode extension which formats the HTML code in PHP files.
I think this can pretty much be broken down into 3 high level sections:
// 1. Just the tag name.
<<?php html_element(); ?> attribute="value">
// 2. Tag name and attributes.
<<?php html_element(); ?> <?php language_attributes(); ?>>
// 3. These could also be echoed so you might see long or short syntax.
<<?php echo html_element(); ?> <?= language_attributes(); ?>>
// 4. Also with or without spaces on the short syntax.
<<?= html_element(); ?> <?=language_attributes();?>>
// 5. Random mix no space between attribute and PHP tag.
<html class="some classes"<?php language_attributes(); ?>>
// 6. Random mix w/ space.
<html class="some classes" <?php language_attributes(); ?>>
// 7. Short echo.
<div>
<input type="text" value="<?=$x["test"] . $x['test']?>">
</div>
// 8. Traditional echo.
<div>
<input type="text" value="<?php echo $x["test"] . $x['test']?>">
</div>
// 9. PHP ternary operator w/ super annoying syntax (people do write things like this if you troll WP plugins / themes, I stole this code more or less from one)
<div class="form-row" data-type="datepicker" data-name="<?php echo $public; ?>" <?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
<label for="<?php echo $public; ?>" class=col-form-label">
<?php echo $label; ?>
<?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
</label>
<div class="col col-lg-8 datepicker-group">
<input id="dob_picker" name="<?php echo $public; ?>" type="text" class="form-control" readonly>
<i class="fa fa-calendar-edit"></i>
</div>
</div>
<<?php html_element(); ?> attribute="value">
<<?php html_element(); ?> attribute="value">
<<?php html_element();
?> attribute="value">
<<?php html_element(); ?> <?php language_attributes(); ?>>
<<?php html_element(); ?> <?php language_attributes(); ?>>
<<?php html_element();
?>
<?php language_attributes(); ?>>
<<?php echo html_element(); ?> <?= language_attributes(); ?>>
<<?php echo html_element(); ?> <?= language_attributes(); ?>>
<<?php echo
html_element();
?>
<?= language_attributes(); ?>>
<<?= html_element(); ?> <?=language_attributes();?>>
<<?= html_element(); ?> <?=language_attributes();?>>
<<?= html_element();
?>
<?=language_attributes();?>>
<html class="some classes"<?php language_attributes(); ?>>
<html class="some classes"
<?php language_attributes(); ?>>
<html class="some classes"
<?php
language_attributes();
?>>
<html <?php language_attributes(); ?> class="some classes">
<html <?php language_attributes(); ?>
class="some classes">
<html <?php
language_attributes();
?> class="some classes">
<div>
<input type="text" value="<?=$x["test"] . $x['test']?>">
</div>
<div>
<input type="text"
value="<?=$x["test"] . $x['test']?>">
</div>
<div>
<input type="text"
value="<?=$x["
test"]
.
$x['test']?>">
</div>
{
"wrap_attributes": "auto"
}
<div>
<input type="text" value="<?=$x["test"] . $x['test']?>">
</div>
<div>
<input type="text" value="<?=$x["test"] . $x['test']?>">
</div>
<div>
<input type="text" value="<?=$x[" test"] . $x['test']?>">
</div>
<div>
<input type="text" value="<?php echo $x["test"] . $x['test']?>">
</div>
<div>
<input type="text"
value="<?php echo $x["test"] . $x['test']?>">
</div>
<div>
<input type="text"
value="<?php echo $x["
test"]
.
$x['test']?>">
</div>
<div class="form-row" data-type="somefield" data-name="<?php echo $name; ?>" <?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
<label for="<?php echo $name; ?>" class=col-form-label">
<?php echo $label; ?>
<?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
</label>
</div>
<div class="form-row"
data-type="somefield"
data-name="<?php echo $name; ?>"
<?php echo ( 'required' === $req ) ? ' data-validation="' . $validation . '"' : ''; ?>>
<label for="<?php echo $name; ?>"
class=col-form-label">
<?php echo $label; ?>
<?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
</label>
</div>
<div class="form-row"
data-type="somefield"
data-name="<?php echo $name; ?>"
<?php
echo
( 'required'===$req
)
? ' data-validation="'
.
$validation
. '"'
: ''
;
?>>
<label for="<?php echo $name; ?>"
class=col-form-label">
<?php echo $label; ?>
<?php echo ( 'required' === $req ) ? '<i class="fa fa-asterisk fa-xs text-danger" data-fa-transform="up-6"></i>' : ''; ?>
</label>
</div>
https://beautifier.io & JS API
Relevant Setting:
{
"indent_size": "4",
"indent_char": " ",
"wrap_line_length": "0",
"wrap_attributes": "force"
}
On examples 7, 7a, 8 the ones that get messed up because there are double-quotes inside the PHP tags and when beautified odviously the first instance of the double-quotes inside the attribute gets mistaken for another attribute thus the space is added in "auto" mode. My quick fix in my extension on that, because I'm guessing it may fall outside the scope of what your willing to fix. Is going to be something like this.
phpInAttr.js
export function phpInAttr(html) {
const regex = /[a-zA-Z_:-]+?\s*?="(\s*?<[?](?:php|=)\s*?.*?".*?\s*?[?]>\s*?)"/gm;
const result = html.replace(regex, (match, g1, g2) => {
const g2r = g2.replace('"', "'");
return `${g1}="${g2r}"`;
});
return result;
}
extension.js
let html = vscode.window.activeTextEditor.document.getText();
html = phpInAttr(html);
return beautifyHtml(html, options);
Basically locate any html attribute setup like attribute="$code"
where $code
contains any "
then replace them all with '
, don't know though that could potentionally be dangerous and break some PHP code in some cases.
@RiFi2k
Thanks for this detailed bug report.
I suspect this may turn into follow on bugs or sub-bugs to show progress.
Please for the love of all that is right and good do not try to patch this with a regex.
I have an idea that I believe will address most of these cases and it shouldn't be hard to implement.
@bitwiseman Haha, I wasn't planning on parsing the HTML or anything nutty with a regex, just changing double quotes to single or the reverse.
But I will most certainly defer to your plan, I'm not in a rush to patch anything none of it is show stopping.
If you have any related tasks you wanted to lay off all you got to do is ask I'm more than happy to help, your always right on everything and I appreciate you!
@RiFi2k Take a look at 1.9.0-beta2 now up on https://beautifier.io .
@bitwiseman You notice that the force wrap doesn't work anymore too?
Apart from that it was working out great, and it would wrap if it hit the line length, just wouldn't auto wrap after the first.
You put in some serious work on this.
@RiFi2k
Not forcing: Could you give a sample input output (or just point to one of the ones above)?
@bitwiseman So it's late haha, I wrote auto instead of force in the options.
Working as expected so far.
You are truely the man, can't believe you got # 9 fully working in my examples.