Skip to content

VSCode extension with snippets to write fast HTML inside of .ex files when writing Phoenix Application with Elixir.

License

Notifications You must be signed in to change notification settings

azyzz228/heex-snippets

Repository files navigation

HEEx Snippets

Write fast HTML inside of .ex files with these snippets when writing Phoenix Application with Elixir.

Available at:

Features

This extension with code snippets aims to accelerate html production inside of ~H sigil in Phoenix Framework (especially useful when writing LiveView or functional components).

This extensions works great in conjunction with emmet. Here is the link on how to make emmet work. While emmet provides support for simple HTML tags, this extension provides useful snippets for writing logic in HEEx.

Snippet suggestions are triggered after ;, so to use the snippets, simply type in ;<snippet> and there will be VSCODE auto suggestion with the snippet.

Available snippets

Phoenix specific snippets

snippet generated code
pe <%= %>
ln <.link navigate={~p"/"}></.link>
lp <.link patch={~p"/"}></.link>
if <%= if do %><% end %>
ifelse <%= if do %><% else %><% end %>
for <%= for item <- @list_of_items do %> <% end %>
lc <.live_component module={$1} id={$2} />
slot <:slot></:slot>
noreply {:noreply, socket}
ok {:ok, socket}
socket `socket = \n\tsocket\n\t

And all phx- bindings: phx-value-*, phx-click, phx-click-away, phx-change, phx-submit, phx-feedback-for, phx-disable-with, phx-trigger-action, phx-auto-recover, phx-blur, phx-focus, phx-window-blur, phx-window-focus, phx-keydown, phx-keyup, phx-window-keydown, phx-window-keyup, phx-key, phx-viewport-top, phx-viewport-bottom, phx-mounted, phx-update, phx-remove, phx-hook, phx-mounted, phx-disconnected, phx-connected, phx-debounce, phx-throttle, phx-track-static

Simple HTML tags

Use of emmet is assumed for simple tags. Meanwhile, this extension provides the snippets below:

for-loop'ed

snippet generated code
divfl <div :for={item <- list_of_items} class=""></div>
pfl <p :for={item <- list_of_items} class=""></p>
lifl <li :for={item <- list_of_items} class=""></li>
h1fl <h1 :for={item <- list_of_items} class=""></h1>
h2fl <h2 :for={item <- list_of_items} class=""></h2>
h3fl <h3 :for={item <- list_of_items} class=""></h3>
h4fl <h4 :for={item <- list_of_items} class=""></h4>
h5fl <h5 :for={item <- list_of_items} class=""></h5>
h6fl <h6 :for={item <- list_of_items} class=""></h6>
spanfl <span :for={item <- spanst_of_items} class=""></span>

Custom Function Components

Custom component snippets are triggered after ;.. To generate the tag for custom component, type in ;.CUSTOM_COMPONENT, there will be auto suggestion for generating <.CUSTOM_COMPONENT></.CUSTOM_COMPONENT>. See known issues.

Known Issues

TODO:

  • "sa" for socket.assigns

  • "iif" - for inline if -> :if={}

  • "ifor" - for inline for -> :for={}

  • Custom Function Component suggestion does not appear as you type in but appears when you delete what you have written. So, to effectively use it, to get <.CUSTOM></.CUSTOM>, you need to type ;.CUSTOMX then hit the delete / backspace.

  • A lot of HTML tags are not included in this snippet. HTML tags and other Phoenix Framework related snippets will be populated if demanded by community.

Release Notes

See CHANGELOG.md


Enjoy!

About

VSCode extension with snippets to write fast HTML inside of .ex files when writing Phoenix Application with Elixir.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published