vim, right way to indent css and js inside html

Question

Couldn't find proper solution in old questions, so

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <style type="text/css">
body, input{
    background-color:red;
}
        </style>
        <script>
function test() {
    return false
}
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>

everything except code inside <style> and <script> tags indented ok, how can I fix it?

Possible duplicate of [How do I tidy up an HTML file's indentation in VI?](http://stackoverflow.com/questions/815548/how-do-i-tidy-up-an-html-files-indentation-in-vi) — bozzmob, Jan 23 '16 at 18:35

score 7 · Answer 1 · answered Sep 10 '18 at 00:53

7

As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.

That is however configurable via vimrc with:

let g:html_indent_script1 = "inc" 
let g:html_indent_style1 = "inc"

...and -shame on us- is also mentioned in :help html-indent

answered Sep 10 '18 at 00:53

MaxC

540
5
14

This answer needs to be at the top of the internet. I spent more than an hour trying to figure out how to do this thing that *must be simple*. Turns out it is simple! – michaelAdam Mar 17 '19 at 06:04
Wait no...It works for style tags, but it indents javascript incorrectly unless I put all of the code inside the tags within {}. Do you not see this? – michaelAdam Mar 17 '19 at 06:32
But it should. I found a bug report and made a change request here: https://github.com/vim/vim/issues/3205 – MaxC Mar 18 '19 at 16:50

score 3 · Accepted Answer · answered Jan 27 '16 at 01:23

I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.

Your code is indented like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
      body, input{
        background-color:red;
      }
    </style>
    <script>
      function test() {
        return false
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

vim, right way to indent css and js inside html

2 Answers2

Linked

Related