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? — Satvik
– Satvik, Commented Jan 23, 2016 at 18:35

MaxC · Accepted Answer · 2018-09-10 00:53:13Z

8

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, 2018 at 0:53

MaxC

5905 silver badges14 bronze badges

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

3 Comments

michaelAdam Over a year ago

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 Over a year ago

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?

MaxC Over a year ago

But it should. I found a bug report and made a change request here: github.com/vim/vim/issues/3205

Yosh · Accepted Answer · 2016-01-27 01:23:58Z

3

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>

answered Jan 27, 2016 at 1:23

Yosh

2,8123 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

vim, right way to indent css and js inside html

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related