9

Caveat: I'm not a web developer.

That being said, there are rare occasions where I have to edit HTML. When I do, I've noticed a behavior in Vim that I don't like, and hope that I can change via configuration.

When I code, I tend to wrap lines at 80 characters. This often means that I have to split HTML tags across lines. What I'd like is some sensible indentation when this happens. So, for example, I might have the following code and would like it indented similarly:

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg"><img
   src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
   class="ri" alt="This is an image"></a>

But, by default, Vim's autoindentation will indent the split HTML tags to the same level as the HTML tag start on the previous line. In other words, I get something like the following:

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg"><img
                                                              src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
                                                              class="ri" alt="This is an image"></a>

Which is, exactly, what I don't want. As I'm typing, I find I'm constantly having to go back and fix indentations like this.

I like Vim's autoindent generally, and don't want to simply disable it universally. I'd rather just disable or change the split HTML tag indentation, but I can't figure out how.

Is it possible to change this?

(I've tried searching Stackoverflow for this question, but couldn't find it. If it's a duplicate, please point me to the original.)

EDIT: Solution was found here https://www.reddit.com/r/vim/comments/3ogbna/disabling_partial_html_indentation_in_vim/cvy8p3u

EDIT #2: Okay, the above solution didn't solve the problem. It's still there.

  • 1
    I find surprising the indentation example that you gave in the last snippet: I have tried it on my vanilla Homebrew installation (version 7.4) and it workes as I expected: when I hit <Enter> at the end of the line, with autoindent enabled vim indents the next line as the line that I just ended. So my guess is that you may have a plugin that alters the default indentation model. – Vlad GURDIGA Oct 15 '15 at 8:59
  • @VladGURDIGA, yes, I'm starting to suspect that. I'll have to dive into my vimrc and see what I can come up with. My vimrc is here, btw github.com/criswell/meh/blob/master/vim/.vimrc – criswell Oct 16 '15 at 12:58
  • also check ~/.vim/ since whatever is there is are also loaded, usually ftplugins, colors and other autoload things. 8-) – Vlad GURDIGA Oct 16 '15 at 15:05
  • I also asked on reddit, and got this answer, which turned out to fix it reddit.com/r/vim/comments/3ogbna/… . I'll update my question accordingly. – criswell Oct 16 '15 at 15:46
  • Nice! Thank you for the follow-through! :) – Vlad GURDIGA Oct 16 '15 at 18:22
4

I recommend the tidy-html5 plugin.


As a web developer myself, I also recommend aligning the HTML tags a little differently,

AirBnb React Styleguide (most legible)

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg">
  <img
    src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
    class="ri"
    alt="This is an image"
  >
</a>

Google HTML Styleguide (more common)

<a href="http://someverylongurl.com/foo/bar/blaz/SinwzvO.jpg">
  <img src="http://someverylongurl.com/foo/bar/blaz/Sinwzv0.jpg"
       class="ri" alt="This is an image">
</a>

This will really help formatters avoid crazy indentations.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.