Package Exports

ibg-html-pretty

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ibg-html-pretty) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Pretty Html

A package to convert your messy html to beautifull one

linter

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';

    html      = `<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/>

        <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>
`;
    lintedHtml      = linter.lint(html);

Output

<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