{"id":41764,"library":"prettier-edge","title":"prettier-plugin-edge","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/edge-js/prettier-plugin-edge","tags":["javascript","prettier","prettier-plugin","edge","edgejs","adonisjs","template","formatter"],"install":[{"cmd":"npm install prettier-edge","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-edge","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-edge","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency — the plugin runs inside Prettier's formatting pipeline","package":"prettier","optional":false}],"imports":[{"note":"Prettier is ESM-only since v3. CommonJS require will fail. Use dynamic import() or upgrade to ESM.","wrong":"const prettier = require('prettier')","symbol":"default","correct":"import prettier from 'prettier'"},{"note":"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']`.","wrong":"import edgePlugin from 'prettier-plugin-edge'","symbol":"plugin","correct":"// auto-detected by Prettier for .edge files after npm install"},{"note":"prettier-plugin-edge does not export TypeScript types. Use Prettier's built-in types with module augmentation if needed.","wrong":"import type { PluginOptions } from 'prettier-plugin-edge'","symbol":"types","correct":"import type { Options } from 'prettier'"}],"quickstart":{"code":"// 1. Install\n// npm install --save-dev prettier prettier-plugin-edge\n\n// 2. Format all .edge files in resources/views\nimport { format } from 'prettier';\n\nconst code = `@if(showFooter)\n<footer class=\"border-t border-gray-200\">\n<div class=\"container mx-auto py-8\">\n@each(section in sections)\n<h3>{{section.title}}</h3>\n<ul>\n@each(item in section.items)\n<li><a href=\"{{item.href}}\">{{item.label}}</a></li>\n@end\n</ul>\n@end\n</div>\n</footer>\n@end`;\n\nconst formatted = await format(code, {\n  parser: 'edge',\n  plugins: ['prettier-plugin-edge'],\n  printWidth: 80,\n  tabWidth: 2,\n});\n\nconsole.log(formatted);\n// Output will have proper indentation and spacing around Edge tags","lang":"typescript","description":"Shows how to programmatically format an Edge template using prettier-plugin-edge with the Prettier API."},"warnings":[{"fix":"Migrate your project to ESM (type: 'module' in package.json) or use dynamic import(): const prettier = await import('prettier');","message":"Prettier v3 is ESM-only — CommonJS require() will throw ERR_REQUIRE_ESM","severity":"breaking","affected_versions":">=1.0.0"},{"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']","message":"The plugin does not export a default plugin object — importing 'prettier-plugin-edge' directly yields undefined","severity":"deprecated","affected_versions":">=1.0.0"},{"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.","message":"Alpine.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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Keep interpolations short or adjust printWidth. The plugin reduces available width by the indent level, so nested expressions may wrap prematurely.","message":"Embedded JavaScript in {{ }} interpolations uses a nested printWidth based on indentation level — deep nesting can cause unexpected line wrapping.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'/livewire':31 '1.0.0':14 '18':68 '3.0.0':65 'activ':15 'adonisj':10,76 'alpine.js':30 'alpine.js/livewire':29 'attribut':32 'automat':58 'card':56 'compon':49 'edg':4,11,22,42,74 'edgej':75 'embed':26 'format':9,20,59 'formatt':39,78 'generic':38 'github':18 'html':21 'includ':52 'inject':53 'insid':61 'interpol':25,62 'javascript':60,69 'javascript/css':27 'let':51 'like':46 'maintain':16 'node':67 'pass':36 'plugin':3,7,73 'prettier':2,6,64,70,72 'prettier-plugin':71 'prettier-plugin-edg':1 'raw':55 'requir':63 'singl':35 'slot':50 'syntax':45 'tag':23 'templat':12,77 'understand':41 'uniqu':44 'unlik':37 'version':13 'vite':54","created_at":"2026-06-04T18:53:59.618652+00:00","updated_at":"2026-06-04T18:53:59.618652+00:00","problems":[{"fix":"Run: npm install --save-dev prettier prettier-plugin-edge","cause":"Plugin not installed or not in node_modules. Prettier must be installed as well.","error":"Error: Cannot find module 'prettier-plugin-edge'"},{"fix":"Change to ESM (type: 'module' in package.json) or use: const prettier = await import('prettier');","cause":"Using CommonJS require() with Prettier v3 which is ESM-only.","error":"SyntaxError: Unexpected token 'export'"},{"fix":"Use: const result = await prettier.format(code, options);","cause":"Using default import (import prettier from 'prettier') but Prettier v3 default export is an object with format as a method; likely calling it incorrectly.","error":"TypeError: prettier.format is not a function"},{"fix":"Ensure plugin is installed and, if using programmatic API, add plugins: ['prettier-plugin-edge'] to options.","cause":"prettier-plugin-edge is not loaded. Either not installed or not listed in Prettier's plugins array.","error":"Unknown parser \"edge\""}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/edge-js/prettier-plugin-edge#readme","github":"https://github.com/edge-js/prettier-plugin-edge","docs":null,"changelog":null,"pypi":null,"npm":"prettier-edge","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}