Auto format option (=) in Vim doesn't indent HTML+JS correctly?

Question

Auto formatting (gg=G) works perfectly for code like so (example from here):

fun()
{
for(...)
{
for(...)
{
if(...)
{
}
}
}
}

becomes

fun()
{
  for(...)
  {
    for(...)
    {
      if(...)
      {
      }
    }
  }
}

but it fails for more complex code like so (copied from here)

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

becomes:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p").click(function(){
      $(this).hide();
      });
    });
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

Why is the, for example, <p> tag not indented in the body? Is this a shortcoming of vim's formatter or am I using it incorrectly?

EDIT: Thank you to everyone who mentioned I should put filetype plugin indent on in my .vimrc file. That made indenting a lot better. However, it is still failing sometimes. observe (copied from here)

<!DOCTYPE html>
<html>
  <body>

    <div style="text-align:center">
      <button onclick="playPause()">Play/Pause</button>
      <button onclick="makeBig()">Big</button>
      <button onclick="makeSmall()">Small</button>
      <button onclick="makeNormal()">Normal</button>
      <br />
      <video id="video1">
      <source src="mov_bbb.mp4" type="video/mp4" />
      <source src="mov_bbb.ogg" type="video/ogg" />
      Your browser does not support HTML5 video.
      </video>
    </div>

    <script type="text/javascript">
      var myVideo=document.getElementById("video1");

function playPause()
{
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}

function makeBig()
{
  myVideo.height=(myVideo.videoHeight*2);
}

function makeSmall()
{
  myVideo.height=(myVideo.videoHeight/2);
}

function makeNormal()
{
  myVideo.height=(myVideo.videoHeight);
}
</script>

<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body>
</html>

doesn't change at all. It doesn't realize that those functions are nested inside the <script> tag. Setting the filetype to js.html or html.js does not help either

Does it indent as expected for *any* HTML? (e.g. without JavaScript at all) — , Feb 23 '12 at 22:41
This seems to have been answered here: http://stackoverflow.com/questions/3276392/vim-gg-g-aligns-left-does-not-auto-indent — Chriseyre2000, Feb 23 '12 at 22:41
@Chriseyre2000 I'm testing it out to see if the solution makes it more reliable — puk, Feb 23 '12 at 22:57
@Chriseyre2000 it did make it more reliable, but continues to fail in certain situations. — puk, Feb 23 '12 at 23:06

score 2 · Accepted Answer · answered Feb 23 '12 at 22:43

So vim has different formatting/syntax highlighting options for different filetypes. You can read about it here. So for your regular c++ file the indenting is pretty standard so it normally gets it correct but for your html file you might have different perferences then the pereson who made the format file. You can edit and look at your formatting configuration in linux under ~/.vim/ftplugin and the html file will be called html.vim.

Also like bill says you may need to turn on the filetype plugin by either setting it in your ~/.vimrc or enabling it by typing :filetype plugin indent on

If I don't set `:filetype plugin indent on` then formatting doesn't work. If I do set it on, Vim complains that it couldn't call JSLint (Syntastic). How do I reconcile this? — puk, Feb 24 '12 at 07:13

Auto format option (=) in Vim doesn't indent HTML+JS correctly?

1 Answers1