how to configure jsbeautifier settings to actually beautify my HTML/Javascript code

Question

I have seen several questions about how to format HTML and javascript code. A common answer seems to be that jsbeautify (and GitHub page for jsbeautify.js ) is a good solution.

However, I can't seem to get it to properly format any of my code, and I'm wondering if there are some default parameters that need changing, or if I am simply misunderstanding what beautification is supposed to do. What I am expecting is that each nested tag will be on a new line indented to the proper level. But instead what I see (and this does not seem to be unique to jsbeautifier) is that sometimes several tags get string together on the same line, and directives to break the line are ignored.

Example 1:

I took this example straight from this question .

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC</div>

When I go to jsbeautifer.org and enter the above code and click on "Beautify Javascript or HTML" it does nothing! I would expect the output to look something like this:

<div id="hlogo">
    <a href="/">Stack Overflow</a>ABC
</div>

Here's another example. I have selected "Wrap lines near 80 characters".

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
</script></div></span>

The output of this is below. Note that there is no wrapping going on.

<!--Meta 6,1--><span><div>Just some sample text here which is fairly long, maybe about 100 characters or so, I'm not really counting.<input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/><script type="text/javascript">;
<
/script></div > < /span>

Why isn't <span> , <div> , and preferably <input> on separate lines? And why is the opening < on a separate line? I expected something like this:

<!--Meta 6,1-->
<span>
    <div>
        Just some sample text here which is fairly long, maybe about 100 
        characters or so, I'm not really counting.
        <input id="sdlkjhfkjhjkjhfjdfjkshdfkjshk"/>
        <script type="text/javascript">;
        </script>
    </div > 
</span>

Is there some parameters I need to pass to make this work? I have looked at the documentation for this but am coming up empty.

Answer 1

The first example you listed

<div id="hlogo"> <a href="/">Stack Overflow</a>ABC</div>

Is not working correctly because the forward slashes around the ABC are causing beautify to read it as a Regular Expression.

In the wrapping example I think there is a problem because you have an apostrophe in the word I'm. I took it out and beautify did a little bit of moving things around after that. Have you ever tried repl.it? It is free and has a prettier button and I have found that is works really well.