prettier-plugin-marko

4.0.9 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Marko template files. Current stable version is 4.0.9, released February 2026. This plugin is maintained by the Marko team and is the official formatter for Marko files. It supports both HTML-like and concise syntax, auto-detecting the syntax used. It integrates with Prettier's CLI and editor plugins. Breaking change in v4.0.0: text adjacent to tags now prints on the same line when possible. Requires prettier v3 or later; for prettier@2, use version 2.x. Ships TypeScript types and has active patch releases.

Common errors

error Error: Could not find plugin "prettier-plugin-marko" ↓

cause Plugin not installed or not referenced correctly in config.

fix

Run npm install --save-dev prettier-plugin-marko and ensure .prettierrc contains 'plugins': ['prettier-plugin-marko'].

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

cause Plugin not installed or installed in wrong directory (e.g., global vs local).

fix

Install locally: npm install --save-dev prettier-plugin-marko. If using global prettier, install plugin globally too: npm install -g prettier-plugin-marko.

error TypeError: prettier.resolveConfig is not a function ↓

cause Using a version of Prettier that is incompatible (e.g., prettier@2 with plugin@4).

fix

Upgrade Prettier to v3+ or downgrade plugin to v2.

error Unexpected token: ... in file.marko ↓

cause The file contains syntax not supported by the Marko parser version used by the plugin.

fix

Update the plugin to the latest version: npm install prettier-plugin-marko@latest.

Warnings

breaking Text adjacent to tags in HTML mode now prints on the same line when possible (v4.0.0). ↓

fix If you rely on previous formatting with separate lines, update your code or consider using markoSyntax: 'concise' to avoid auto-detection.

gotcha The plugin auto-detects syntax (HTML vs concise) by default. This may lead to inconsistent formatting if some files are HTML and others concise. ↓

fix Explicitly set markoSyntax option to 'html' or 'concise' in .prettierrc.

deprecated Version 2.x works with prettier@2. Using version 4.x with prettier@2 will fail. ↓

fix Use prettier@3+ with prettier-plugin-marko@4, or prettier@2 with prettier-plugin-marko@2.

gotcha The plugin may change whitespace around placeholders like $!{} (v4.0.5 preserves them, but earlier versions might collapse). ↓

fix Update to v4.0.5 or later to preserve $!{} placeholders.

gotcha Static block locations are preserved in v4.0.8, but previous versions might have reformatted them incorrectly. ↓

fix Update to v4.0.8+ to ensure static block positions are kept.

Install

npm install prettier-plugin-marko

yarn add prettier-plugin-marko

pnpm add prettier-plugin-marko

Imports

default plugin
wrong
```
// Do not import directly in code; the plugin is loaded by Prettier's config
```
correct
```
// In .prettierrc: { "plugins": ["prettier-plugin-marko"] }
```
The plugin is not imported in user code; it's referenced in Prettier configuration (e.g., .prettierrc or CLI --plugin). No JavaScript import needed.

Usage with CLI

wrong

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

correct

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

Use full package name to avoid conflict with other plugins.

Config file example

wrong

// .prettierrc
{ "plugins": ["prettier-plugin-marko"] } // This is correct, but many forget to add the plugin array.

correct

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

Ensure plugins array is top-level in config. Also supports markoSyntax option.

Quickstart

Shows minimal setup: install packages, configure Prettier, create a Marko file, and format it.

// Install dependencies
npm install --save-dev prettier prettier-plugin-marko

// Create .prettierrc
cat << EOF > .prettierrc
{
  "plugins": ["prettier-plugin-marko"],
  "markoSyntax": "auto"
}
EOF

// Create a sample Marko file
cat << EOF > example.marko
<div>
    <p>  Hello World  </p>
</div>
EOF

// Format the file
npx prettier --write example.marko