Correct indentation of HTML and PHP using Vim

Question

I've been using Vim for a while, and I can't get proper HTML indentation working in PHP files.

For example, what I want is for each child to be indented one tab more than it's parent, as shown below.

<?php
if(isset($sports)) {
 //Do something
?>
<div>
 <label>Uniform Size</label>
 <ul>
  <li class="left"><label for="s" class="small">S</label><input type="radio" name="size[]" value="S" id="s" class="radio" /></li>
  <li class="left"><label for="m" class="small">M</label><input type="radio" name="size[]" value="M" id="m" class="radio" /></li>
  <li class="left"><label for="l" class="small">L</label><input type="radio" name="size[]" value="L" id="l" class="radio" /></li>
  <li class="left"><label for="xl" class="small">XL</label><input type="radio" name="size[]" value="XL" id="xl" class="radio" /></li>
 </ul>
</div>
<?php
}
?>

Using the PHP-correct-Indent script, the code results in being formatted as follows:

<?php
if(isset($sports)) {
    //Do something
?>
<div>
<label>Uniform Size</label>
<ul>
<li class="left"><label for="s" class="small">S</label><input type="radio" name="size[]" value="S" id="s" class="radio" /></li>
<li class="left"><label for="m" class="small">M</label><input type="radio" name="size[]" value="M" id="m" class="radio" /></li>
<li class="left"><label for="l" class="small">L</label><input type="radio" name="size[]" value="L" id="l" class="radio" /></li>
<li class="left"><label for="xl" class="small">XL</label><input type="radio" name="size[]" value="XL" id="xl" class="radio" /></li>
</ul>
</div>
<?php
}
?>

Even with indented HTML which I then add PHP code to, the indentation is ignored, moving new lines of HTML code without any indentation at all.

So, is there any way that I can get the indentation format that I want working with HTML within PHP files, using Vim?

Answer 1

In your ~/.vimrc file:

set expandtab
set sw=4
set ts=4

The expandtab option will convert tabs to spaces, the sw option sets your shift width to 4 and the ts sets tab stop to 4 spacs.

Answer 2

php-correct-indenting only cares about your PHP, and assumes the readability of the HTML is of no interest. An XML indenter would position the tags nicely, but wouldn't be able to indent the contents of a <?php> processing instruction to match. Maybe there is an indentation script that understands both the C-like syntax of PHP the programming language and [X][HT]ML the markup language being templated, but I've never met one yet - sorry.

Still, I'd like to fiddle with the indenting in your example even before php-correct-indenting mauled it! The <div> element is inside an outer if-statement, but I have no way to see that from the indenting. I'd suggest something like:

<?php if(isset($sports)) { ?>
    <?php
        // Do something
    ?>
    <div>
        <label>Uniform Size</label>
        <ul>
            <li>etc. etc.</li>
        </ul>
    </div>
<?php } ?>

Answer 3

You can try this tip; it still doesn't work perfectly but it's better than nothing.