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