Prettier EEX Plugin

0.6.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'prettier-plugin-eex' ↓

cause Plugin not installed or not in node_modules path where Prettier looks.

fix

Install the plugin: yarn add -D prettier prettier-plugin-eex. Ensure you are running prettier from the directory containing node_modules.

error Error: No parser and no filepath given, couldn't infer a parser. ↓

cause Prettier unable to determine parser for the file. Commonly occurs when using the plugin without specifying parser in overrides.

fix

Add an override in .prettierrc for *.html.eex files with parser: 'html-eex'.

error TypeError: Cannot read properties of undefined (reading 'trim') ↓

cause Plugin encounters malformed EEx expression or unsupported Elixir version.

fix

Check your Elixir version (>=1.10) and ensure the EEx templates are syntactically valid.

error SyntaxError: Unexpected token (1:1) ↓

cause File is not recognized as EEx/LEEx; possibly wrong file extension or misconfigured parser.

fix

Verify the file has .html.eex or .html.leex extension and your .prettierrc overrides match that pattern.

Warnings

breaking Minimum Elixir version raised to 1.10 and Erlang OTP to 22 in v0.6.0. ↓

fix Update your Elixir to >=1.10 and Erlang OTP to >=22.

breaking Changed from using 'embed' to 'print' function in v0.5.0 to fix error logging. Plugins relying on custom embed behavior may break. ↓

fix If you have a custom Prettier integration that relies on the embed method, update your code to work with the 'print' method.

breaking Non-zero exit status code returned when formatting errors occur (v0.5.0). ↓

fix Update CI scripts to expect non-zero exit on formatting errors.

gotcha 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. ↓

fix Set 'prettierPath' in VS Code settings to './assets/node_modules/prettier' or use explicit plugins array in .prettierrc with absolute/relative path.

deprecated No deprecation warnings currently, but be aware that the plugin may require updating prettier peer dependency in future major versions. ↓

fix Keep an eye on releases and update prettier as needed.

Install

npm install prettier-plugin-eex

yarn add prettier-plugin-eex

pnpm add prettier-plugin-eex

Imports

default

wrong

import prettierPluginEex from 'prettier-plugin-eex'

correct

// Automatically loaded by Prettier when placed in project root or in .prettierrc plugins

No explicit import needed; Prettier auto-discovers plugins in node_modules or via plugins config.

Configuration in .prettierrc

wrong

{
  "plugins": ["prettier-plugin-eex"],
  "parser": "html-eex"
}

correct

{
  "plugins": ["prettier-plugin-eex"],
  "overrides": [{"files": "*.html.eex", "options": { "parser": "html-eex" }}]
}

Set parser only in overrides for specific file extensions to avoid conflicts with other file types.

use with require

wrong

const prettierPluginEex = require('prettier-plugin-eex');

correct

const prettier = require('prettier');
prettier.format(code, { parser: 'html-eex', plugins: [require('prettier-plugin-eex')] });

Plugin should be passed to prettier's format/check options, not used directly.

Quickstart

Installation and basic usage of prettier-plugin-eex: setting up .prettierrc, formatting EEx files via CLI and programmatic API.

// 1. Install
// yarn add -D prettier prettier-plugin-eex

// 2. Create .prettierrc.js in project root
module.exports = {
  plugins: ['prettier-plugin-eex'],
  overrides: [
    {
      files: ['*.html.eex', '*.html.leex'],
      options: {
        parser: 'html-eex',
        printWidth: 120,
        eexMultilineLineLength: 100,
        eexMultilineNoParens: ['link', 'form_for']
      }
    }
  ]
};

// 3. Format a file
// npx prettier --write app/**/*.html.eex

// 4. Or use programmatically
const prettier = require('prettier');
const code = `<%= form_for @changeset, @action, fn f -> %>\n  <%= text_input f, :name %>\n<% end %>`;
const formatted = prettier.format(code, {
  parser: 'html-eex',
  plugins: [require('prettier-plugin-eex')],
  printWidth: 80
});
console.log(formatted);