Pretty Html

---

A package to convert your messy html to beautifull one

Pretty html is an opinionated Javascript package to lint html components/partials (angular components mainly) according to front-end guidelines used at @instabug.

Installation

npm (server-side)

npm install ibg-html-pretty

yarn

yarn add ibg-html-pretty

Quick Example

Node

import linter from 'ibg-html-pretty';
let lintedHtml  = linter.lint(HTML_STRING);

Before

<div class="parent">
<div class="color-orange" id="divId" ng-if="vm.variable">
</div>
<div class="color-red" ng-if="vm.variable">
</div>
<div class="color-yellow" ng-if="vm.variable">
<span>hello world, hi hello people from long line road in wide scentence streat and much words town hello hello hello hello hello hello hello hello hello hello hello hello world!</span>
<hello-component class="hello"
attr="attr1"
attr2="attr2">
<img source="image.jpg"/><img
alt="some-pic"
source="https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/gallery_slide/public/bmw-m2-road-test-0273_0.jpg?itok=rZL6Hh9r"/>
</hello-component>
</div>
</div>

After

<div class="parent">
  <div
    id="divId"
    class="color-orange"
    ng-if="vm.variable">
  </div>

  <div
    class="color-red"
    ng-if="vm.variable">
  </div>

  <div
    class="color-yellow"
    ng-if="vm.variable">
    <span>
      hello world, hi hello people from long line road in wide scentence streat and much words town
      hello hello hello hello hello hello hello hello hello hello hello hello world!
    </span>

    <hello-component
      class="hello"
      attr="attr1"
      attr2="attr2">
      <img/>

      <img
        alt="some-pic"
        source="https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/gallery_slide/public/bmw-m2-road-test-0273_0.jpg?itok=rZL6Hh9r"/>
    </hello-component>
  </div>
</div>

Options

No options yet

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Author

Ahmed Bassell

• github/ahmedBassell
• twitter/AhmedBassell