yasuyk / web-beautify

Format HTML, CSS and JavaScript/JSON by js-beautify
GNU General Public License v3.0
219 stars 21 forks source link

not same behaviour as atom-beautify #23

Open CestDiego opened 8 years ago

CestDiego commented 8 years ago

Thank you for creating this, it's very useful in my day to day work. Nevertheless It's not very useful when trying to beautify things that are not perfectly spaced after tags.

given this example

<li class="nope ">
    <a class="tile" href="#">
        <div class="yeap nope__bg-image">
            <div class="yeap__background"></div><img alt="A Camper" onload="lazyLoad && lazyLoad.addToQueue(this)" src="//image.jpg">
        </div>
    </a>
    <div class="nope__link"><a class="ellipsis-2" href="#">such text</a></div><span class="nope__price">$39.00</span>
</li>

it does not put the img tag in a new line, and the later a tags and span tags are also not put in a new line.

Whereas using atom beautify: https://github.com/Glavin001/atom-beautify this is true, and therefore it makes the file more readable. This is why I would like support for atom-beautify-like functionality because I think it would be very useful for the community

yasuyk commented 7 years ago

@CestDiego Sorry for my late response

atom-beautify use js-beautify as JavaScript library, but web-beautify use command line interface of js-beautify. It seems that something wrong with the command line interface of js-beautify from version 1.5.5.

I try your example with js-beautify 1.5.5 and result is like this:

> npm install -g js-beautify@1.5.5
> js-beautify -html /tmp/issue23.html
<li class="nope ">
    <a class="tile" href="#">
        <div class="yeap nope__bg-image">
            <div class="yeap__background"></div><img alt="A Camper" onload="lazyLoad && lazyLoad.addToQueue(this)" src="//image.jpg">
        </div>
    </a>
    <div class="nope__link"><a class="ellipsis-2" href="#">such text</a></div><span class="nope__price">$39.00</span>
</li>

And I try it with js-beautify 1.5.4 and result is like this:

> npm install -g js-beautify@1.5.4
> js-beautify -html /tmp/issue23.html
<li class="nope ">
    <a class="tile" href="#">
        <div class="yeap nope__bg-image">
            <div class="yeap__background"></div><img alt="A Camper" onload="lazyLoad && lazyLoad.addToQueue(this)" src="//image.jpg">
        </div>
    </a>
    <div class="nope__link"><a class="ellipsis-2" href="#">such text</a>
    </div><span class="nope__price">$39.00</span>
</li>

Could you check above results?