Prettier eex plugin

Hey guys I’ve just released a prettier eex plugin.
It’s still a bit WIP, if you detect any errors just add a file path to .prettierignore and submit an issue so I could fix it.

It probably doesn’t work well with <style> and <script> tags, it something I have to work a bit more on.

If you got any questions ask here or on Github.

18 Likes

I’ll be taking a look for sure today! Thanks for this :smiley:

3 Likes

Release v0.2.0

Changes

  • decoding/encoding logic has been extracted to prettier-html-templates package

Fixed

  • In some cases expressions weren’t decoded inside script tags - thanks to @dnsbty

Extracting that logic allowed me to release an erb version, here is a link:

4 Likes

Release v0.3.0

Bug Fixes

  • Properly formats liveview files with form_for expressions
1 Like

Thank you so much for this plugin. I’ve been struggling with eex formatting for so log.

1 Like

Small FYI if you want to install this wonderful plugin for every Elixir/Phoenix project:

  1. Install the prettier and prettier-plugin-eex npm packages globally with:
npm install -g prettier prettier-plugin-eex
  1. Make sure that you have the Prettier VSCode Extension installed.

  2. Find the global path to which npm installed your prettier package. These are some common paths:

# macOS
/usr/local/lib/node_modules/prettier

# unix
/usr/local/lib/node_modules/prettier

# Windows
%USERPROFILE%\AppData\Roaming\npm\node_modules/prettier
  1. Set that global path as a Prettier: Prettier Path either in your Settings under Extensions > Prettier > Prettier: Prettier Path or in your settings.json directly:
"prettier.prettierPath": GLOBAL_PATH
# e.g. "prettier.prettierPath": "/usr/local/lib/node_modules/prettier"

Thank you @adamzapasnik for this great plugin!

3 Likes