vim indent html tags with attributes on separate lines

Question

I am writing some html/vue code with vim, but I found the auto-indent functionality not working as expected, especially with nested tags and attributes broken into multiple lines.

I read the coding standard agreed upon for long html tags, and I reason it would be nice if vim can support such indentation style. I found multiple similar questions asked like this, but they don't give satisfactory answers. I have also tried the html5 plugin for vim, but it doesn't seem to help much.

For example, I would like vim to indent like following:

<template>
    <my-tag 
        attr1
        attr2
        attr3>
        <my-sub-tag
            attr1
            attr2
            attr3>
        </my-sub-tag>
    </my-tag>
</template>

But currently, when I press gg=G, it indents to something like this:

<template>
    <my-tag 
     attr1
     attr2
     attr3>
        <my-sub-tag
      attr1
      attr2
      attr3>
        </my-sub-tag>
    </my-tag>
</template>

Is there a relatively quick way to fix it (like a nice plugin), or is it not yet a primary concern for vim?

Harish · Accepted Answer · 2019-07-06 06:29:41Z

1

You don't have to use a plugin for this! When you use gg=G the equalprg (see :h 'equalprg') is run. When this option is not set it uses the default or builtin equalprg and that is why you see the odd indentation as they're not built for html.

You could use an external program that is more capable of formatting specific file types. For example, for html you could use html-beautify (npm install --global html-beautify) for css, json and others you use prettier

You can do the following to use an external program.

:setlocal equalprg=html-beautify -f - -I -s 2

newer versions of prettier also supports html formatting.

:setlocal equalprg=prettier\ --stdin\ --parser=html

add this to ~/.vim/after/ftplugin/html.vim and use the same command gg=G for formatting the lines.

Also see :h 'formatprg' and the :h gq commands.

edited Jul 6, 2019 at 6:29

answered Jul 5, 2019 at 7:18

Harish

1,4419 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PROgram52bc Over a year ago

OK, I see. formatprg is indeed a nice feature. But my concern is that it won't be very portable -- for example, when I use my school machine where I can't install external programs, I can't use this feature properly. (Currently I'm using Vundle to manage my plugins, and that doesn't require privilege to install external program.) Furthermore, the html-beautify package has been deprecated. Any other suggestions?

Harish Over a year ago

The newer version of prettier supports html formatting. setlocal equalprg=prettier\ --stdin\ --parser=html

Harish Over a year ago

@ Ben Knobble, Busted! :( Edited the answer.

PROgram52bc Over a year ago

@Harish I installed vim-prettier and that worked for me. Thanks!

Harish Over a year ago

The plugin also installs prettier and also says:

If using other vim plugin managers or doing manual setup make sure to have prettier installed globally or go to your vim-prettier directory and either do npm install or yarn install

. So, it's not a lot different. Anyway, you could use whatever works for you! Happing vimming!

Collectives™ on Stack Overflow

vim indent html tags with attributes on separate lines

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related