prettier-plugin-marko-htmljs

0.1.1 verified Mon Apr 27 auth: no javascript

A Prettier plugin for Marko templates that uses the htmljs-parser (^5) instead of @marko/compiler. Version 0.1.1 is current; development is active with monthly releases. Key differentiators: follows Prettier's HTML formatting rules (empty line collapsing, separate close tags for non-void elements, bracketSameLine support) and supports prettier-ignore comments. Does not support Marko concise mode. Requires Prettier ^3 as a peer dependency.

Common errors

error Error: Cannot find module 'htmljs-parser' ↓

cause Missing peer dependency htmljs-parser

fix

npm install --save-dev htmljs-parser

error Error: Cannot find module 'prettier-plugin-marko-htmljs' ↓

cause Plugin not installed or not listed in package.json

fix

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

error [error] .marko: SyntaxError: Expected attribute value but got "<" ↓

cause Using concise mode syntax which is unsupported

fix

Rewrite template using HTML-like syntax with explicit tags.

Warnings

gotcha Not compatible with @marko/compiler-based formatting; behavior diverges on empty lines and void elements. ↓

fix Use this plugin exclusively for Marko formatting; do not mix with prettier-plugin-marko.

deprecated Concise mode syntax is untested and may produce invalid output. ↓

fix Write all templates in HTML-like (non-concise) mode.

gotcha prettier-ignore only works on elements with a closing tag; self-closing elements cannot be ignored. ↓

fix Wrap content in a div or other container to use prettier-ignore.

breaking May reformat <pre> tag content despite prettier-ignore missing; known issue. ↓

fix Use prettier-ignore on the <pre> element or its parent.

Install

npm install prettier-plugin-marko-htmljs

yarn add prettier-plugin-marko-htmljs

pnpm add prettier-plugin-marko-htmljs

Imports

(plugin)

wrong

Missing plugin configuration – prettier won't recognize .marko files

correct

// Add to .prettierrc: { "plugins": ["prettier-plugin-marko-htmljs"] }

No import needed; plugin auto-detects .marko files when configured in .prettierrc.

Quickstart

Install and configure the plugin, then run prettier on Marko files.

// Install plugin and peer dependencies
npm install --save-dev prettier-plugin-marko-htmljs htmljs-parser prettier@^3

// .prettierrc
{
  "plugins": ["prettier-plugin-marko-htmljs"],
  "bracketSameLine": false,
  "singleAttributePerLine": false
}

// Format all .marko files
npx prettier --write "**/*.marko"