{"id":20354,"library":"prettier-plugin-eex","title":"Prettier EEX Plugin","description":"A Prettier plugin that formats .html.eex and .html.leex files used in Elixir/Phoenix projects. Current stable version is 0.6.0. This plugin leverages Prettier's parsing and formatting capabilities to handle Elixir's EEx templates, preserving embedded Elixir expressions while formatting the surrounding HTML. It requires a minimum of Elixir 1.10 and Erlang OTP 22. Key differentiators include support for LiveView .leex files, configurable multiline expression formatting, and seamless integration with Phoenix projects via mix aliases. The plugin is actively maintained with regular bug fixes and breaking changes between major versions.","status":"active","version":"0.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/adamzapasnik/prettier-plugin-eex","tags":["javascript","plugin","prettier","eex","elixir","html-eex"],"install":[{"cmd":"npm install prettier-plugin-eex","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-eex","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-eex","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; the plugin requires Prettier to function.","package":"prettier","optional":false}],"imports":[{"note":"No explicit import needed; Prettier auto-discovers plugins in node_modules or via plugins config.","wrong":"import prettierPluginEex from 'prettier-plugin-eex'","symbol":"default","correct":"// Automatically loaded by Prettier when placed in project root or in .prettierrc plugins"},{"note":"Set parser only in overrides for specific file extensions to avoid conflicts with other file types.","wrong":"{\n  \"plugins\": [\"prettier-plugin-eex\"],\n  \"parser\": \"html-eex\"\n}","symbol":"Configuration in .prettierrc","correct":"{\n  \"plugins\": [\"prettier-plugin-eex\"],\n  \"overrides\": [{\"files\": \"*.html.eex\", \"options\": { \"parser\": \"html-eex\" }}]\n}"},{"note":"Plugin should be passed to prettier's format/check options, not used directly.","wrong":"const prettierPluginEex = require('prettier-plugin-eex');","symbol":"use with require","correct":"const prettier = require('prettier');\nprettier.format(code, { parser: 'html-eex', plugins: [require('prettier-plugin-eex')] });"}],"quickstart":{"code":"// 1. Install\n// yarn add -D prettier prettier-plugin-eex\n\n// 2. Create .prettierrc.js in project root\nmodule.exports = {\n  plugins: ['prettier-plugin-eex'],\n  overrides: [\n    {\n      files: ['*.html.eex', '*.html.leex'],\n      options: {\n        parser: 'html-eex',\n        printWidth: 120,\n        eexMultilineLineLength: 100,\n        eexMultilineNoParens: ['link', 'form_for']\n      }\n    }\n  ]\n};\n\n// 3. Format a file\n// npx prettier --write app/**/*.html.eex\n\n// 4. Or use programmatically\nconst prettier = require('prettier');\nconst code = `<%= form_for @changeset, @action, fn f -> %>\\n  <%= text_input f, :name %>\\n<% end %>`;\nconst formatted = prettier.format(code, {\n  parser: 'html-eex',\n  plugins: [require('prettier-plugin-eex')],\n  printWidth: 80\n});\nconsole.log(formatted);","lang":"javascript","description":"Installation and basic usage of prettier-plugin-eex: setting up .prettierrc, formatting EEx files via CLI and programmatic API."},"warnings":[{"fix":"Update your Elixir to >=1.10 and Erlang OTP to >=22.","message":"Minimum Elixir version raised to 1.10 and Erlang OTP to 22 in v0.6.0.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"If you have a custom Prettier integration that relies on the embed method, update your code to work with the 'print' method.","message":"Changed from using 'embed' to 'print' function in v0.5.0 to fix error logging. Plugins relying on custom embed behavior may break.","severity":"breaking","affected_versions":"0.4.0 to 0.5.0"},{"fix":"Update CI scripts to expect non-zero exit on formatting errors.","message":"Non-zero exit status code returned when formatting errors occur (v0.5.0).","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Set 'prettierPath' in VS Code settings to './assets/node_modules/prettier' or use explicit plugins array in .prettierrc with absolute/relative path.","message":"Plugin auto-discovery may not work if prettier is installed globally or in a different node_modules path. Common in Phoenix projects with assets directory.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Keep an eye on releases and update prettier as needed.","message":"No deprecation warnings currently, but be aware that the plugin may require updating prettier peer dependency in future major versions.","severity":"deprecated","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install the plugin: yarn add -D prettier prettier-plugin-eex. Ensure you are running prettier from the directory containing node_modules.","cause":"Plugin not installed or not in node_modules path where Prettier looks.","error":"Error: Cannot find module 'prettier-plugin-eex'"},{"fix":"Add an override in .prettierrc for *.html.eex files with parser: 'html-eex'.","cause":"Prettier unable to determine parser for the file. Commonly occurs when using the plugin without specifying parser in overrides.","error":"Error: No parser and no filepath given, couldn't infer a parser."},{"fix":"Check your Elixir version (>=1.10) and ensure the EEx templates are syntactically valid.","cause":"Plugin encounters malformed EEx expression or unsupported Elixir version.","error":"TypeError: Cannot read properties of undefined (reading 'trim')"},{"fix":"Verify the file has .html.eex or .html.leex extension and your .prettierrc overrides match that pattern.","cause":"File is not recognized as EEx/LEEx; possibly wrong file extension or misconfigured parser.","error":"SyntaxError: Unexpected token (1:1)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}