feat: support HTML/Vue/Angular

[ikatyang]

Fixes #1882
Fixes #2097
Fixes #3767
Fixes #4095
Fixes #5098
Fixes #5263

---

Try out this PR:

yarn add ikatyang/prettier#feat/html/todos

# *.html defaults to `--parser html`
yarn prettier filename.html

# *.component.html defaults to `--parser angular`
yarn prettier filename.component.html

# *.vue defaults to `--parser vue`
yarn prettier filename.vue

# NOTE: framework-specific formatting won't be triggered in `--parser html`

or preview playground (hard reload to ensure it's the latest one).

Please note that syntax errors produced by child language in the playground is a known issue, it won't happen if you use it locally (i.e., prettier something.html).

---

Already supported on master:

• HTML: support front matter
• HTML: whitespace-sensitive formatting
  • support magic comment (<!-- display: block -->)
  • --html-whitespace-sensitivity <css|strict|ignore>
    • magic comments take precedence
    • (default) css: respect default css style (safe in the most cases)
    • strict: every element is considered whitespace sensitive (the safest)
    • ignore: every element is considered whitespace insensitive (dangerous)
• HTML: support IE conditional comment (<!--[if IE]><![endif]-->)

Added in this PR:

• HTML: support pragma (<!-- @prettier -->)
• JS: support lit-html (html`<div>Hello ${name}!</div>`)
• HTML: support CDATA (<![CDATA[ content ]]>)
• HTML: support interpolation ({{jsExpression}})
• HTML: format vue binding syntax as js expression (:class, v-if, v-bind:id, @click)
• HTML: format angular binding syntax as js expression (*ngIf, [target], (target), [(target)])
• JS: support angular inline template (@Component({ template: `<div>Hello World</div>` }))
• HTML: disable custom self-closing tag recognition
• Vue: replace with HTML parser + enable custom self-closing tag recognition

TODOs:

• HTML: format <script type="module"> (Support for script tags in .html files #3767)
• HTML: format <script type="text/markdown"> (Markdown formatting inside html files #4095)
• HTML: no unexpected output for style content (feat: support HTML/Vue/Angular #5259 (comment))
• HTML: allow tagging HTML templates with comment (feat: support HTML/Vue/Angular #5259 (comment))
• HTML: move framework-specific formatting to --parser <vue|angular>
  • *.vue defaults to vue parser
  • *.component.html defaults to angular parser
  • the rest *.html defaults to html parser
• Vue: support v-for (feat: support HTML/Vue/Angular #5259 (comment))
• Vue: support js statements for v-on:click, @click (feat: support HTML/Vue/Angular #5259 (comment))
• Vue: support slot-scope (feat: support HTML/Vue/Angular #5259 (comment))
• Angular: support Angular-specific syntax (feat: support HTML/Vue/Angular #5259 (comment))
  • Angular action for (target)="input"
  • Angular binding for [target]="input"
  • Angular interpolation for {{input}}
  • Angular template bindings for *directive="input"
• HTML: fix "Comments are discarded from binding attributes" ([JSON] Trailing comments are not handled #5263)
• (let me know if I missed something)
  • (please report issues separately so that we can easily hide resolved comments)

---

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• I’ve read the contributing guidelines.

[michaeljota]

Thanks @ikatyang!

[ruchernchong]

Thanks, @ikatyang. I am glad to be using Vue with the awesome people behind the team.

[kissu]

Was waiting so long for that, thanks @ikatyang ! 💪🏻 🎉

[michaeljota]

@ikatyang Sorry for bother you, but I would like to confirm this behavior before I open an issue for this. I'm formatting my teams project, and came with some awkward behavior.

With --html-whitespace-sensitivity=ignore this output is produced.
Link

With --html-whitespace-sensitivity=css this output is produced.
Link

Notice that when is set to ignore, the colon is moved to a new line, while when set to css, is not. Does this is an actual issue or this is working as you would expect? I would certainly not expect for ignore to add a new line after this.

[suchipi]

@michaeljota that looks like a bug to me, could you open an issue for it?

[ikatyang]

Opened #5396 to address the sensitivity issue between interpolation and text.

[michaeljota]

Thanks @ikatyang!

[jordan-erisman]

This is awesome work!

One issue I am having is when I use arrow functions for handling events in Vue.

<custom-component @click="() => { console.log('clicked') }" />

Prettier adds a semi colon after the curly brace which throws an unexpected token error when building.

[michaeljota]

@erisman20 Can you provide a link to Prettier playground reproducing the issue?

[kissu]

@erisman20 can't you use <custom-component @click="console.log('clicked')" /> in that case ?
I don't see the point of an arrow function here.

For more complicated/longer functions, write down the method inside of the @click listener.

[michaeljota]

@kissu I don't much know about vue, but I'll guess this is about the this context. Although seems an unusual behavior, Prettier should not break the code. And I can't reproduce the issue, Prettier indeed adds a semi colon, but after the function, so it shouldn't break anything.

[jordan-erisman]

@kissu That was just a basic example to showcase what was happening.

Here is a Playground.

I have never used that before, but the "second format" is how prettier formats my code.

@michaeljota In terms of Vue, you cant have a trailing semi colon like that. It will throw an error. You can even try it in the provided playground and you can see the error

[lydell]

@erisman20 I opened an issue for you: #5406

[alfaproject]

Why add a semicolon in the first place? That adds an extra character for no reason o.o

[michaeljota]

@alfaproject That's configurable, the default behavior however is to add a semicolon at the end of a line.

[gogakoreli]

Can I find out why html wrap attributes are now enforced? I am using prettier for my html files inside Angular project. This happened after I updated prettier

[duailibe]

@gogakoreli Please open an issue filling the template