prettyhtml/prettyhtml

💅 The formatter for the modern web https://prettyhtml.netlify.com/

Opinionated general formatter for your Angular, Vue, Svelte or pure HTML5 templates. Try it on the playground.

Project status: Unfortunately, This project lacks maintainers. Prettier has landed HTML support in 1.15.0. I recommend it to use it if it matches your requirements. If you want to contribute to this project, feel free to create a PR/Issue.

Features

• Indentation based primary on node-level + tag length, not content.
• Can parse Angular, Vue or HTML5 templates.
• Formats embedded content with prettier with respect to your local settings.
• Doesn't change the behaviour of your attributes and tags.
• Remove all superfluous white-space. There are two additional rules:
  • Collapses multiple blank lines into a single blank line.
  • Empty lines at the start and end of blocks are removed. (Files always end with a single newline, though.)
• Enforce consistent output of your HTML.
• Follows the same option philosophy as prettier.

Framework specific features

Feature	Framework
HTML5	all
Self-closing custom elements	vue
Self-closing none void elements	vue
Case-sensitive attributes	angular
Case-sensitive elements	angular

Packages

• prettyhtml CLI and API.
• prettyhtml-formatter Formatter.
• prettyhtml-hast-to-html Stringifier.
• prettyhtml-hastscript Hyperscript compatible DSL for creating virtual HAST trees.
• prettyhtml-sort-attributes Sort attributes alphabetically.
• prettyhtml-quick Formats your changed files based on Git.
• webparser Optimized HTML parser for formatters
• expression-parser Framework agnostic template expression parser.
• rehype-webparser Adapter between HTML parser and rehype.
• rehype-minify-whitespace Collapse whitespace.
• hast-util-from-parse Transform webparser AST to HAST.

Ignore element

Adding this flag before a tag will preserve from whitespace and/or attribute wrapping.

1. Preserve from indentation, whitespace and attribute wrapping

<!--prettyhtml-ignore-->
<div></div>

2. Preserve only from whitespace processing. This excludes indentation.

<!--prettyhtml-preserve-whitespace-->
<h1> foo </h1>

3. Preserve only from attribute wrapping

<!--prettyhtml-preserve-attribute-wrapping-->
<h1 foo="bar" ...> foo </h1>

Install

# regular
$ npm install @starptech/prettyhtml --global

# when using proxy like sinopia/verdaccio
$ npm install @starptech/prettyhtml --global --registry=https://registry.npmjs.org/

CLI

This will process recursively all HTML files in the current directory.

$ prettyhtml example.html "./**/*.html"

Help

$ prettyhtml --help

Pre-Commit hook integration

We provide a simple package called prettyhtml-quick which is able to format only changed files. This example use husky to manage git hooks in the package.json

{
  "husky": {
    "hooks": {
      "precommit": "prettyhtml-quick --staged"
    }
  }
}

API

prettyhtml(doc: string, options?): vFile

Formats a string and returns a vFile. The method can throw e.g when a parsing error was produced. The error is from type vfile-message.

options

options.tabWidth

The space width of your indentation level (default: 2)

options.useTabs

Use tabs instead spaces for indentation (default: false)

options.printWidth

Use different maximum line length (default: 80)

options.usePrettier

Use prettier for embedded content (default: true)

options.prettier

Use custom prettier settings for embedded content (default: local config)

options.singleQuote

Use single quote instead double quotes (default: false)

options.wrapAttributes

Force to wrap attributes (when it has multiple, default: false)

options.sortAttributes

Sort attributes alphabetically (default: false)

Editor support

• VSCode extension (not published yet)
• Vetur Vue tooling for VS Code

Why

Prettier has landed HTML support some days ago. This is awesome and will help many people to reduce the headache of correct formatting in teams. The reason why I still using prettyhtml is clear:

• It is very easy to maintain because we have a specification and an ecosystem (and @vfile, @syntax-tree) of plugins.
• It should be able to format any superset of HTML as long it is parseable with minor tweaks. We use a modified version of the Angular 6 template parser. There is no need to maintain multiple parser.
• Prettyhtml doesn't try to understand all Javascript frameworks in depth even when it means that the user has to update some places manually.

Acknowledgement

Big thanks to the creators of the excellent rehype and unified ecosystem.

prettyhtml's Issues

Base indentation inside <script> and <style>

🚀 Feature Proposal

Prettier applied on a .vue file will remove the base indentation of <script> and <style> content:

Input:

<script>
  console.log('Hello World!');
</script>

Output:

<script>
console.log('Hello World!');
</script>

Not everyone is happy with this tho: prettier/prettier#3888

Prettyhtml actually do the opposite:

Input:

<script>
console.log('Hello World!');
</script>

Output:

<script>
  console.log('Hello World!');
</script>

Desired output

There are two solutions imo:

• Follow the current convention established by Vue guidelines and followed by Prettier: remove initial indentation on <script> and <style> content
• Be flexible and align the base indentation with the first line of the element. For instance:

Input:

<script>
  console.log('Hello');
console.log('World!');
</script>

Output:

<script>
  console.log('Hello');
  console.log('World!');
</script>

Input:

<script>
console.log('Hello');
  console.log('World!');
</script>

Output:

<script>
console.log('Hello');
console.log('World!');
</script>

Motivation

Either respect the current Vue / Prettier convention, or respect the current initial base indentation.

Handle comments

Problems with tables

I encountered some problems with tables. I have two components my-table and my-row.

The template for my-table is like this:

<table>
  <tbody><ng-content select="my-row"></ng-content></tbody>
</table>

One pf the problems is that ng-content gets extracted from the table tree, i.e. the output is like this:

<ng-content select="my-row"></ng-content>
<table>
  <tbody></tbody>
</table>

The other problem I encountered is when I actually use my-table in another template:

<my-table>
  <my-row>
    <td>foo</td>
    <td>bar</td>
  </my-row>
</my-table>

prettyhtml strips the td elements:

<my-table>
  <my-row>
    foo
    bar
  </my-row>
</my-table>

Version is 0.0.55

Indent <template> tags

Current behavior

In

<body>
<template></template>
</body>
```
out
````html
<body>
<template></template>
</body>
```
should
````html
<body>
	<template></template>
</body>
```
since we have to handle `<template>` tags separatly we have to increase the indentation at this place.

Close Html Empty Tags

I hope the formatted document will be well-formed, that is, all html tags including br, input, etc are closed.

Motivation

1. Although html5 is not required this, xml-conformance document would be better to read and use.
2. Better support for vue customized component in case vue components use html empty element tag names.

Example

Currently if I use iview (a vue library) Input component, https://www.iviewui.com/components/input-en, the formatted document will be invalid, as iview component tags are required to be closed, but your tool will treat Input tag as html input tag, and keep that tag opened even I have written the end tag.

Vote

If you agree with my proposal vote with a 👍

Option to never wrap single attributes and always wrap multiple attributes

🚀 Feature Proposal

I don't see a setting for attribute wrapping other than printWidth. This is surprisingly ok since with a pretty low printWidth, the default formatting is quite to my liking, but it ends up looking odd when wrapping single attribute elements. I would love a setting like this:

"wrapAttributesIgnoreSingle": true,
"wrapAttributesNumber": 2 // wrap all attributes when there are n or more 

or more simply but less flexible:

"wrapMultipleAttributes": true

Motivation

Approaching wrapping based on attribute number instead of length is fairly visually appealing, it makes it a little easier for humans to read, but so much easier for git to read, so it will reduce the number of git conflicts if multiple people change an element's attributes. It is also in accordance with the official Vue.js styleguide

Example

Current output:

  <InputItem :input="inputs.currentAge"/>
  <InputItem
    :input="inputs.theRetirementAgeOfYourGreatestGrandMother"
  />
  <a href="#" class="a" rel="tag">A</a>

I would want a combination of settings that would get me this output:

  <InputItem :input="inputs.currentAge"/>
  <InputItem :input="inputs.theRetirementAgeOfYourGreatestGrandMother"/>
  <a 
    href="#" 
    class="a" 
    rel="tag"
  >A</a>

Vote

If you agree with my proposal vote with a 👍

Handle text template expression from different frameworks

• Format template expression correctly

While template expressions like {{}} are handled correctly in some other frameworks you can nest them e.g with loops or conditions. Those inner expressions should be indented one level further.

• Implement a template expression parser

Allow parsing of self closing custom and known HTML elements

🚀 Feature Proposal

Allow parsing of self closing custom and known HTML elements.

Motivation

https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

Example

in

<meta charset="UTF-8">
<div/>
<my-com/>

out

<meta charset="UTF-8">
<div/>
<my-com/>

Implement print-width (default 80)

Create HAST from X parser

For angular and vuejs

Attributes quotes escaping/transformation

e.g

<div data-label='"whatever"'></div>
<div data-label="{ "test": "hi" }"></div>

will produce

<div data-label=""whatever""></div>
<div data-label="{ " test&#x22;: &#x22;hi&#x22; }&#x22;></div>

should produce

<div data-label="'whatever'"></div>
<div data-label="{ 'test': 'hi' }"></div>

HTML attributes being transformed even on custom components

I've noticed HTML attributes being transformed.

="" added for value-attributes:

<base-flex wrap><base-text title>Title</base-text></base-flex>
// formatted to <base-flex wrap=""><base-text title="">Title</base-text></base-flex>

hyphen removed when this attribute without hyphen exists:

<base-list item-type="contact"><!-- --></base-list>
// formatted to <base-list itemtype="contact"><!-- --></base-list>

I can understand why I probably shouldn't even use global HTML attributes like itemtype or title on custom components, but should I really be prevented to use the wrap attributes on a custom component just because it's defined for <textarea>?

Thanks for your time.

unwanted tbody tags being inserted

🐛 Bug Report

prettyhtml is inserting unwanted tbody tags when formatting a Vue template where the actual tbody tag will be inserted by a component.

In the example below, the draggable component will provide the tbody tag. However, prettyhtml adds its own tbody tag, leading to 2 tbody tags in the final output.

To Reproduce

Steps to reproduce the behavior:
$ prettyhtml [filename]

Paste your markup here:

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <draggable :element="'tbody'">
    <tr v-for="val in data"
      :key="val">
      <td></td>
    </tr>
  </draggable>
</table>

Expected behavior

HTML is formatted with no tbody tag inserted, instead got:

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <draggable :element="'tbody'">
    <tbody>
      <tr v-for="val in data" :key="val">
        <td></td>
      </tr>
    </tbody>
  </draggable>
</table>

Context

• Angular
• Svelte
• Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version:
  @starptech/[email protected]
• NodeJs version:
  v8.9.1
• Environment name and version:
  Not sure what to provide here.
• Operating System and version:
  Microsoft Windows [Version 10.0.17134.112]

Preserve attributes line break config

Set the number of attributes before the line breaks.

• force (wrap each attributes)
• number (minimum number before wrap)

Because sometimes there are long values in attributes

  <div class="nav__item" v-for="item in nav.development" :key="item.title">
    <router-link :to="item.path">{{ item.title }}</router-link>
  </div>

It looks better

<div
  class="nav__item"
  v-for="item in nav.development"
  :key="item.title">
  <router-link :to="item.path">{{ item.title }}</router-link>
</div>

For example, if there are more attributes than one, I always brake the line.
As I understand it now is the value of 5 attributes

With respect

Correct attribute quoting

Input

<p translate></p>
<p class=""></p>
<p class></p>
<p disabled=""></p>
<p disabled></p>

Output

<p translate></p>
<p class=""></p>
<p class=""></p>
<p disabled></p>
<p disabled></p>

The attributes is modified when formatting.

class-name => class

input

<div id="app">
      <div class="header">
    <button @click="prettify">Prettify</button>
  </div>
      <div style="display:flex">
    <prism-editor class-name="my-editor" :code="code" @change="changeCode" language="html" />
<prism-editor :code="result" language="html" />
  </div>
</div>

output

<div id="app">
  <div class="header">
    <button @click="prettify">Prettify</button>
  </div>
  <div style="display:flex">
    <prism-editor
      class="my-editor"
      :code="code"
      @change="changeCode"
      language="html"
    />
    <prism-editor :code="result" language="html"/>
  </div>
</div>

this is ElementUI of Table components
when i used "class-name" it modified "class"

support templated html expressions

Original: prettier/prettier#4753 (comment)

Example:

<!doctype html>
<html lang="en">
<body>
  <% if local(:message).nil? %>
    <span>Hello world</span>
  <% else %>
    <span><%= message %></span>
  <% end %>
</head>
</html>

prettyhtml outputs

<!doctype html>
<html lang="en">
<head></head>
<body>
  <% if local(:message).nil? %>
  <span>Hello world</span>
  <% else %><span><%= message %></span>
  <% end %>
</body>
</html>

It would be nice if prettyhtml could output something like:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <% if local(:message).nil? %>
      <span>Hello world</span>
    <% else %>
      <span><%= message %></span>
    <% end %>
  </body>
</html>

In fragment mode html body are removed

Fix test suite

Fix tests according to our changes.

• prettyhtml-hast-to-html
• prettyhtml-hast-util-from-parse

Allow one blank line between elements at the same level

🚀 Feature Proposal

Like prettier allows one blank line between statements in the same scope, prettyhtml could also allow one blank line between elements at the same level (potentially as a configuration option).

Motivation

It can improve readability of long html.

Example

This would then be allowed:

<div>
  <div class="header">
    <h1>Title...</h1>
  </div>

  <div class="content">
     <p>paragraph...</p>
  </div>
</div>

where as

<div>

  <div class="header">...</div>



  <div class="content">...</div>

</div>

should become

<div>
  <div class="header">...</div>

  <div class="content">...</div>
</div>

Put ">" on newline when wrapping multiple attributes

For multiple attributes that extend beyond the printWidth, I would prefer this:

<div
  attr="foo"
  attr="foo"
  attr="foo"
  attr="foo"
>bar</div>

over

<div
  attr="foo"
  attr="foo"
  attr="foo"
  attr="foo">bar</div>

prettyhtml removes html, head and body tags

I ran prettyhtml on this input:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div><div>       test
    </div>
</div>
<ol>   <li>test</li>
</ol>
</body>
</html>

The output is:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<div>
  <div>test</div>
</div>
<ol>
  <li>test</li>
</ol>

Extra line added under comments containing "if"

🐛 Bug Report

A rogue extra line is being added under comments containing the word "if".

To Reproduce

Steps to reproduce the behaviour:

<!-- Brunch-->
<p>Brunch</p>
<!-- Gifts -->
<p>Gifts</p>

Expected behaviour

Should output the same as the input.

Actual behaviour

<!-- Brunch-->
<p>Brunch</p>
<!-- Gifts -->

<p>Gifts</p>

Context

Just plain HTML5.

Sort attributes

.d.ts is not published in npm packages

 foo > yarn add @starptech/prettyhtml
 foo > yarn list --pattern prettyhtml
yarn list v1.10.1
warning package.json: No license field
warning No license field
├─ @starptech/[email protected]
├─ @starptech/[email protected]
├─ @starptech/[email protected]
└─ @starptech/[email protected]
✨  Done in 0.24s.
 foo > ls node_modules/@starptech/prettyhtml/
node_modules  LICENSE  README.md  cli.js  index.js  package.json
 foo >

Webparser - missing tests for lexer, whitespace handling

Add more tests for webparser

• Lexer: https://github.com/angular/angular/blob/cf0968f98e844043a0f6c2548201f3c0dfd329a7/packages/compiler/test/ml_parser/lexer_spec.ts
• Whitespace: https://github.com/angular/angular/blob/cf0968f98e844043a0f6c2548201f3c0dfd329a7/packages/compiler/test/ml_parser/html_whitespaces_spec.ts

Define basic ruleset

How to format the code?

• Remove superfluous white-space but still line-wrap as expected.
• Reorder attributes based on how often they occur.
• Special indentation for custom elements.
• No content manipulation in attributes or tags.
• lower case tag names
• close all elements
• avoid long code lines when possible?
• ...

References

• http://codeguide.co/#html-syntax
• www.w3schools.com/html/html5_syntax.asp
• https://code.visualstudio.com/docs/languages/html
• https://github.com/beautify-web/js-beautify
• http://jsbeautifier.org/

Format template expressions

• Remove whitespace when possible
• Format on one line

foramt image tag throw error

Before you submit an issue we recommend you drop into the Gitter community and ask any questions you have or mention any problems you've had getting started with prettyhtml.

🐛 Bug Report

format a tag, throw Error.

To Reproduce

Config: Defaull config

Steps to reproduce the behavior:

Paste your markup here:

<template>
    <div>
        <image src="http://google.com">
    </div>
</template>

Expected behavior

A clear and concise description of what you expected to happen.

Paste the results here:

<template>
    <div>
        <image src="http://google.com" />
    </div>
</template>

Context

Vue or html

Your Environment

• Prettyhtml version: @starptech/[email protected]
• NodeJs version:8.12.0
• Environment name and version:
• Operating System and version: macos

Can't pass vetur plugin unit test

Before you submit an issue we recommend you drop into the Gitter community and ask any questions you have or mention any problems you've had getting started with prettyhtml.

🐛 Bug Report

since the 0.8.2 version seems can't pass the vetur unit test.(https://github.com/vuejs/vetur/blob/master/test/lsp/formatting/basic.test.ts),I think the 0.8.2`s update don't change the template behavior,but 0.8.1 version can pass the test unit ,0.8.2 can't.

I also run npx prettyhtml VueHNUserView.vue two times,the result is different.

Is it expect?

To Reproduce

Default config.

Steps to reproduce the behavior:
the input is copy from vetur unit test
https://github.com/vuejs/vetur/blob/master/test/fixture/client/formatting/VueHNUserView.vue
Paste your markup here:

<template>
  <div class="user-view">
    <template v-if="user">
      <h1>User : {{ user.id }}</h1>
      <ul class="meta">
        <li><span class="label">Created:</span> {{ user.created | timeAgo }} ago</li>
        <li><span class="label">Karma:</span> {{ user.karma }}</li>
        <li v-if="user.about" v-html="user.about" class="about"></li>
      </ul>
      <p class="links">
        <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> |
        <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
      </p>
    </template>
    <template v-else-if="user === false">
      <h1>User not found.</h1>
    </template>
  </div>
</template>

Expected behavior

A clear and concise description of what you expected to happen.

Paste the results here:

<template>
  <div class="user-view">
    <template v-if="user">
      <h1>User : {{ user.id }}</h1>
      <ul class="meta">
        <li>
          <span class="label">Created:</span>
          {{ user.created | timeAgo }} ago
        </li>
        <li>
          <span class="label">Karma:</span>
          {{ user.karma }}
        </li>
        <li v-if="user.about" v-html="user.about" class="about"></li>
      </ul>
      <p class="links">
        <a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a>|
        <a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
      </p>
    </template>
    <template v-else-if="user === false">
      <h1>User not found.</h1>
    </template>
  </div>
</template>

Context

Vue

Your Environment

• Prettyhtml version: 0.8.2
• NodeJs version:8.12
• Environment name and version:
• Operating System and version:macos

Fix failing travis build

Issue: jestjs/jest#7094

Indent nested template expressions

While template expressions like {{}} are handled correctly in some other frameworks you can nest them e.g with loops or conditions. Those inner expressions should be indended one level further.

improperly closed textarea element unexpectedly slurps following content

🐛 Bug Report

Improper closing of <textarea> slurps up the rest of the content in the file (as opposed to adding a </textarea> tag and proceeding.

To Reproduce

Steps to reproduce the behavior: https://repl.it/repls/OnlyShabbyCgi

Paste your markup here:

<!doctype html>
<html class="no-js" lang="">
  <body>
    <p>Hello</p>
    <textarea />
    <p>World</p>
  </body>
</html>

creates

<!doctype html>
<html class="no-js" lang="">
<body>
  <p>Hello</p>
  <textarea/>
</body>
</html>

and

<!doctype html>
<html class="no-js" lang="">
  <body>
    <p>Hello</p>
    <textarea>
    <p>World</p>
  </body>
</html>

produces

<!doctype html>
<html class="no-js" lang="">
<body>
  <p>Hello</p>
  <textarea></textarea>
</body>
</html>

Expected behavior

keep the textarea element, close it, and keep following content, as browsers generally behave

Paste the results here:

<!doctype html>
<html class="no-js" lang="">
<body>
  <p>Hello</p>
  <textarea></textarea>
  <p>World</p>
</body>
</html>

Context

• HTML5 only

Your Environment

• Prettyhtml version: 0.1.5
• NodeJs version: 9.7.1
• Environment name and version: repl.it
• Operating System and version: linux

Quotes are added on empty known html arttributes

🐛 Bug Report

Omit quotes when possible. According to https://html.spec.whatwg.org/multipage/introduction.html#intro-early-example

Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn't contain ASCII whitespace or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string.

To Reproduce

Steps to reproduce the behavior:

When a known HTML attribute is used and it has no value we add quotes.

<v-layout row wrap>

result

<v-layout row wrap="">

Expected behavior

Quotes should only be added when the attribute has a value

Paste the results here:

<v-layout row wrap>

result

<v-layout row wrap>

Context

• Angular
• Svelte
• Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version: 0.3.3

support wrap attribute based on the count of attributes

based on the count of tag's attributes, decide whether to wrap attribute.

thx :)

More tests for components and special cases

Formatter removes spaces around inline elements

To Reproduce

<p>I am writing to tell you that I am <em>extremely</em> excited about this new <a href="http://w3c.com">HTML</a> formatter. It promises to be <small>as far as I can tell</small> both <strong>flexible</strong> and <strong>resilient</strong> in the face of many new ways of writing <i>HTML</i>

Current behaviour

<p>I am writing to tell you that I am
  <em>extremely</em>excited about this new
  <a href="http://w3c.com">HTML</a>formatter. It promises to be
  <small>as far as I can tell</small>both
  <strong>flexible</strong>and
  <strong>resilient</strong>in the face of many new ways of writing
  <i>HTML</i>
</p>

Expected behavior

Spaces around words should not be removed. The current behaviour breaks completely reasonable and common ways of writing HTML by forcing multiple words together. it should at the very least retain the space between the end of the tag and a new word not contained by a tag

Context

Used the netlify site to create this example.

Do not add head/body/html etc

const prettyhtml = require('@starptech/prettyhtml')

const input = `
<template>
  <div id="app">
    <header class="header">
      <nav class="inner">
        <router-link to="/" exact>
          <img class="logo" src="~public/logo-48.png" alt="logo">
        </router-link>
        <router-link to="/top">Top</router-link>
        <router-link to="/new">New</router-link>
        <router-link to="/show">Show</router-link>
        <router-link to="/ask">Ask</router-link>
        <router-link to="/job">Jobs</router-link>
        <a class="github" href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank" rel="noopener">
          Built with Vue.js
        </a>
      </nav>
    </header>
    <transition name="fade" mode="out-in">
      <router-view class="view"></router-view>
    </transition>
  </div>
</template>
`

console.log(prettyhtml(input))

I'm wondering why the result is:

<html>
<head>
  <template>
    <div id="app">
      <header class="header">
        <nav class="inner">
          <router-link to="/" exact>
            <img class="logo" src="~public/logo-48.png" alt="logo">
          </router-link>
          <router-link to="/top">Top</router-link>
          <router-link to="/new">New</router-link>
          <router-link to="/show">Show</router-link>
          <router-link to="/ask">Ask</router-link>
          <router-link to="/job">Jobs</router-link>
          <a
            class="github"
            href="https://github.com/vuejs/vue-hackernews-2.0"
            target="_blank"
            rel="noopener"
          >Built with Vue.js</a>
        </nav>
      </header>
      <transition name="fade" mode="out-in">
        <router-view class="view"></router-view>
      </transition>
    </div>
  </template>
</head>
<body></body>
</html>

IMO the default behavior should be just formatting the input, not wrapping anything around it.

Tabs and spaces are mixed when `use-tabs: true`

Hi, first of all thank you for the lib 👍

Issue

When I configured prettyhtml to useTabs it indents using tabs except for the HTML attributes. Attributes indented using spaces. Which I guess should be indented using tabs. See the example below.

Example

Ascii chars:

·  Represents a space char

→  Represents a tab char

Options:

{
  useTabs: true,
  tabWidth: 2,
  printWidth: 80
}

Input:

<div class="test">
··<prism-editor
····class="my-editor"
····:code="code"
····@change="changeCode"
····language="html"
··/>
</div>

Expected Output:

<div class="test">
→   <prism-editor
→   →   class="my-editor"
→   →   :code="code"
→   →   @change="changeCode"
→   →   language="html"
→   />
</div>

Got:

<div class="test">
→   <prism-editor
→   ··class="my-editor"
→   ··:code="code"
→   ··@change="changeCode"
→   ··language="html"
→   />
</div>

you can also test it on prettyhtml.netlify.com

• Click VUE example button
• Click the Use Tabs option on the left
• Click Run button on the top right

You should see that attributes are indented using spaces not with tabs.

When nesting single/double quote element attribute values, incorrect markup can be generated

🐛 Bug Report

When nesting single/double quote element attribute values, incorrect markup can be generated. For example <div @click="onClick('div')"> and using single quotes, it becomes <div @click='onClick('div')'>

also vice versa with @click='onClick("div")' with double quotes, becomes @click="onClick("div")"

To Reproduce

Steps to reproduce the behavior:

https://repl.it/repls/OnlyShabbyCgi

Paste your markup here:

<!doctype html>
<html class="no-js" lang="">
  <body>
    <p>Hello</p>
    <div @click='clicked("div")'></div>
    <p>World</p>
  </body>

</html>

Expected behavior

I expect the nested quotes to be replaced with the valid quote type based on the outer quote type. (single for double, double for single)

Paste the results here:

<!doctype html>
<html class="no-js" lang="">
  <body>
    <p>Hello</p>
    <div @click="clicked('div')"></div>
    <p>World</p>
  </body>

</html>

Context

• Angular
• Svelte
• Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version: 0.3.3
• NodeJs version: 9.7.1
• Environment name and version: repl.it
• Operating System and version: repl.it

Parse5 converts html entities in attributes

The current parse5 html parser converts html entity codes &#xxx inside attributes with the Utf8 equivalent. This is indeed compliant with the specs but we should avoid it.

[icon]="'&#333'" 

We have to modify our fork in order to skip this behavior with a flag.

Setup travis and codecov

Add tests for prettyhtml cli

As titled

minify-whitespace pkg is missing the `list.json` file

Hey!

Error: Cannot find module './list.json' from '@starptech/rehype-minify-whitespace'

i'm getting this error when browserifying the prettyhtml.
I guess you forgot to add list.json to package.json files section ?

Align comments

Input

  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->

Output

  <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

Create cli interface

Use

• https://github.com/sindresorhus/globby
• https://github.com/substack/minimist

Options

• --tab-width (default 2)
• --use-tabs (default spaces)
• --no-attr-reorder (default true)

Option to never wrap attributes

🚀 Feature Proposal

Attributes always get wrapped, even when 'wrap attributes' set to false. I believe this is intentional. It would be great if there was an option to never wrap attributes, keeping them inline.

To Reproduce

Steps to reproduce the behavior:

Set wrap attributes to 'false'

<div id="app">
      <div class="header">
    <button @click="prettify">Prettify</button>
  </div>
  <textarea wrap/>
      <div style="display:flex">
    <prism-editor class="my-editor" :code="code" @change="changeCode" language="html" />
<prism-editor :code="result" language="html" />
  </div>
</div>

Expected behavior

A clear and concise description of what you expected to happen.

Paste the results here:

<div id="app">
  <div class="header">
    <button @click="prettify">Prettify</button>
  </div>
  <textarea wrap/>
  <div style="display:flex">
    <prism-editor
      class="my-editor"
      :code="code"
      @change="changeCode"
      language="html"
    />
    <prism-editor :code="result" language="html"/>
  </div>
</div>

Context

• Angular
• Svelte
• [ x ] Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version: Vetur 0.14.2
• NodeJs version:
• Environment name and version:
• Operating System and version:

<tbody> element added as <tr> parent

🐛 Bug Report

If the parent of <tr> is not <tbody> then a <tbody> element is added.
But with custom components, prettyhtml can't see if the parent isn't providing the <tbody> element under the hood. And a double <tbody> is pretty bad.

To Reproduce

<custom-table-body>
  <tr></tr>
<custom-table-body>

Expected result

<custom-table-body>
  <tr></tr>
<custom-table-body>

Actual result

<custom-table-body>
  <tbody>
    <tr></tr>
  </tbody>
<custom-table-body>

Context

• Angular
• Svelte
• Vue
• Riot
• HTML5 only

Your Environment

• Prettyhtml version: 0.3.3
• NodeJs version: 8.11.4
• Environment name and version: VSCode 1.28.2 / Vetur 0.13.0
• Operating System and version: MacOs Mojave

Update tests from forked packages

Split repo in multiple packages

As soon as we arrived a stable state we should split it up into multiple packages for better maintainability. Lerna ?