This is a prettier plugin for Marko that uses the htmljs parser instead of the @marko/compiler to parse the AST.

This plugin isn't built into the Marko VSCode plugin, so you'll need to install and configure it separately to use it.

npm install --save-dev prettier-plugin-marko-htmljs

Then configure prettier using a .prettierrc configuration file:

{
  "plugins": ["prettier-plugin-marko-htmljs"],
}

In your .vscode/settings.json configuration, you'll need to configure the Prettier VSCode plugin to use prettier-plugin-marko-htmljs instead of the Marko plugin.

{
  "[marko]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

npx prettier --write . "**/*.marko"

This plugin aims to follow Prettier's rules for formatting HTML where possible, for example:

This is arguably a bug in prettier-plugin-marko. In this plugin, empty lines are collapsed into a single line in the same way as the HTML plugin. Similarly, whitespace between top-level static elements follows the same rules.

See: https://prettier.io/docs/en/rationale.html#empty-lines

<div class="parent">

    <div>The newlines at the start and end of parent's body will be removed.</div>

    <div>But newlines between will be preserved.</div>

<div>

Becomes:

<div class="parent">
    <div>The newlines at the start and end of parent's body will be removed.</div>

    <div>But newlines between will be preserved.</div>
<div>

Why? Compatibility with Prettier's HTML formatting.

<div/>

Becomes:

<div></div>

prettier-plugin-htmljs will respect your bracketSameLine configuration to control the position of the end brackets.

// bracketSameLine: false (default)
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
  data-testid="this should be multi-line"
/>

// bracketSameLine: true
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
  data-testid="this should be multi-line" />

Marko code written in "concise mode" is entirely untested and unsupported, it might work, but it might not.

• Preserve <pre> tags content.
• Style less/sass support. (style.less / style.sass / style.js / etc.)
• Prettier ignore directive support.
• Shorthand class names are not merged into the "class" attribute.