https://github.com/azyzz228/heex-snippets
VSCode extension with snippets to write fast HTML inside of .ex files when writing Phoenix Application with Elixir.
https://github.com/azyzz228/heex-snippets
elixir phoenix-framework snippets
Last synced: 8 months ago
JSON representation
VSCode extension with snippets to write fast HTML inside of .ex files when writing Phoenix Application with Elixir.
- Host: GitHub
- URL: https://github.com/azyzz228/heex-snippets
- Owner: azyzz228
- License: mit
- Created: 2023-05-09T19:58:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-23T08:31:58.000Z (over 2 years ago)
- Last Synced: 2025-10-20T21:50:02.507Z (8 months ago)
- Topics: elixir, phoenix-framework, snippets
- Language: JavaScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=aziz-abdullaev.heex-snippets
- Size: 1.69 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# HEEx Snippets
Write fast HTML inside of `.ex` files with these snippets when writing Phoenix Application with Elixir.
Available at:
- [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=aziz-abdullaev.heex-snippets)
- [Open VSX Repo](https://open-vsx.org/extension/aziz-abdullaev/heex-snippets)
## 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](https://github.com/elixir-lsp/vscode-elixir-ls/issues/243#issuecomment-1422409957) 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 `;` and there will be VSCODE auto suggestion with the snippet.
## Available snippets
### Phoenix specific snippets
| snippet | generated code |
|---|---|
|pe|`<%= %>`|
|ln|`<.link navigate={~p"/"}>`|
|lp|`<.link patch={~p"/"}>`|
|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>`|
|noreply|`{:noreply, socket}`|
|ok|`{:ok, socket}`|
|socket|`socket = \n\tsocket\n\t|> $0`|
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|`
`|
|pfl|``|
|lifl|`|h1fl|``|
|h2fl|``|
|h3fl|``|
|h4fl|``|
|h5fl|``|
|h6fl|``|
|spanfl|``|
### 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>`. 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>`, 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!**