prettier-edge

library1.0.0jsnpmunverified

A Prettier plugin for formatting AdonisJS Edge templates. Version 1.0.0 actively maintained on GitHub. It formats HTML, Edge tags and interpolations, embedded JavaScript/CSS, and Alpine.js/Livewire attributes in a single pass. Unlike generic formatters, it understands Edge's unique syntax like `@if`, `@each`, `@component`, `@slot`, `@let`, `@include`, `@inject`, `@vite`, `@raw`, `@!card(...)`, and automatically formats JavaScript inside `{{ }}` interpolations. Requires Prettier ^3.0.0 and Node >=18.

devops

npm install prettier-edge

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PRETTIER-EDGE

prettier-edge

devopsjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import prettier from 'prettier'

✗ const prettier = require('prettier')

Prettier is ESM-only since v3. CommonJS require will fail. Use dynamic import() or upgrade to ESM.

plugin

✓ // auto-detected by Prettier for .edge files after npm install

✗ import edgePlugin from 'prettier-plugin-edge'

There is no default export from prettier-plugin-edge. The plugin registers itself when installed as a dependency. To use programmatically, pass to Prettier's `plugins` option as a string: `plugins: ['prettier-plugin-edge']`.

types

✓ import type { Options } from 'prettier'

✗ import type { PluginOptions } from 'prettier-plugin-edge'

prettier-plugin-edge does not export TypeScript types. Use Prettier's built-in types with module augmentation if needed.

Shows how to programmatically format an Edge template using prettier-plugin-edge with the Prettier API.

// 1. Install // npm install --save-dev prettier prettier-plugin-edge // 2. Format all .edge files in resources/views import { format } from 'prettier'; const code = `@if(showFooter) <footer class="border-t border-gray-200"> <div class="container mx-auto py-8"> @each(section in sections) <h3>{{section.title}}</h3> <ul> @each(item in section.items) <li><a href="{{item.href}}">{{item.label}}</a></li> @end </ul> @end </div> </footer> @end`; const formatted = await format(code, { parser: 'edge', plugins: ['prettier-plugin-edge'], printWidth: 80, tabWidth: 2, }); console.log(formatted); // Output will have proper indentation and spacing around Edge tags

Debug

Known issues

breakingPrettier v3 is ESM-only — CommonJS require() will throw ERR_REQUIRE_ESM

fix

Migrate your project to ESM (type: 'module' in package.json) or use dynamic import(): const prettier = await import('prettier');

affects: >=1.0.0

deprecatedThe plugin does not export a default plugin object — importing 'prettier-plugin-edge' directly yields undefined

fix

Do not import it explicitly; install as a devDependency and Prettier auto-detects it for .edge files. For programmatic usage, pass the package name string: plugins: ['prettier-plugin-edge']

affects: >=1.0.0

gotchaAlpine.js event bindings like @click.prevent are incorrectly parsed as Edge tags if they contain a dot. This can cause formatting errors or unexpected output.

fix

Use HTML attribute syntax: x-on:click.prevent instead of @click.prevent, or escape the '@' with \@click.prevent. The plugin attempts to recognize Alpine syntax but may fail with complex event chains.

affects: >=1.0.0

gotchaEmbedded JavaScript in {{ }} interpolations uses a nested printWidth based on indentation level — deep nesting can cause unexpected line wrapping.

fix

Keep interpolations short or adjust printWidth. The plugin reduces available width by the indent level, so nested expressions may wrap prematurely.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Cannot find module 'prettier-plugin-edge'

Plugin not installed or not in node_modules. Prettier must be installed as well.

fix

Run: npm install --save-dev prettier prettier-plugin-edge

SyntaxError: Unexpected token 'export'

Using CommonJS require() with Prettier v3 which is ESM-only.

fix

Change to ESM (type: 'module' in package.json) or use: const prettier = await import('prettier');

TypeError: prettier.format is not a function

Using default import (import prettier from 'prettier') but Prettier v3 default export is an object with format as a method; likely calling it incorrectly.

fix

Use: const result = await prettier.format(code, options);

Unknown parser "edge"

prettier-plugin-edge is not loaded. Either not installed or not listed in Prettier's plugins array.

fix

Ensure plugin is installed and, if using programmatic API, add plugins: ['prettier-plugin-edge'] to options.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

prettierrequiredPeer dependency — the plugin runs inside Prettier's formatting pipeline

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/edge-js/prettier-plugin-edge ↗

packageprettier-edge ↗

homepagehttps://github.com/edge-js/prettier-plugin-edge#readme ↗