Using Prettier With Elixir

A while back elixir added mix format as a way to provide an opinionated and standard set of formatting for ex and exs files.

There is however a gap when it comes to Phoenix eex and leex templates. Fortunately we can leverage prettier.js as a format solution to cover this gap.

1. Install the prettier main library and plugin

$ cd assets/
$ yarn add -D prettier prettier-plugin-eex

2. Add some basic configuration

file: .prettierrc.js

module.exports = {
  printWidth: 120,
  eexMultilineLineLength: 100,
  eexMultilineNoParens: ["link", "form_for"],
};

file: .prettierignore

deps/
_build/
.elixir_ls
assets
priv

3. Add a couple mix aliases

  defp aliases do
    [
    ...
      prettier: "cmd ./assets/node_modules/.bin/prettier --color --check .",
      "prettier.fix": "cmd ./assets/node_modules/.bin/prettier --color -w ."
    ]
  end

References

• Prettier eex plugin discussion
• Prettier EEX Plugin