jtormey
Helpful VSCode snippets for building with LiveView
Hello!
Having written a lot of LiveView code, I’ve made some VS Code snippets to speed up writing callbacks for LiveViews and LiveComponents. I thought I’d share here in case anyone finds them useful, and to see if others have have their own snippets to share.
Guide on creating snippets here: Snippets in Visual Studio Code
And the snippets:
{
"LiveView mount callback": {
"prefix": "lv_mount",
"body": [
"def mount(${1:_params}, ${2:_session}, socket) do",
"\t{:ok, socket$0}",
"end"
]
},
"LiveView handle_params callback": {
"prefix": "lv_params",
"body": [
"def handle_params(${1:params}, ${2:_uri}, socket) do",
"\t{:noreply, socket$0}",
"end"
]
},
"LiveView handle_info callback": {
"prefix": "lv_info",
"body": [
"def handle_info($1, socket) do",
"\t{:noreply, socket$0}",
"end"
]
},
"LiveView (or LiveComponent) handle_event callback": {
"prefix": "lv_event",
"body": [
"def handle_event(\"$1\", ${2:_params}, socket) do",
"\t{:noreply, socket$0}",
"end"
]
},
"LiveView (or LiveComponent) render callback": {
"prefix": "lv_render",
"body": [
"def ${1:render}(assigns) do",
"\t~H\"\"\"",
"\t$0",
"\t\"\"\"",
"end"
]
},
"LiveComponent mount callback": {
"prefix": "lc_mount",
"body": [
"def mount(socket) do",
"\t{:ok, socket$0}",
"end"
]
},
"LiveComponent update callback": {
"prefix": "lc_update",
"body": [
"def update(assigns, socket) do",
"\t{:ok, socket$0}",
"end"
]
},
"LiveComponent preload callback": {
"prefix": "lc_preload",
"body": [
"def preload(list_of_assigns) do",
"\tlist_of_assigns$0",
"end"
]
}
}
Maybe this would be useful as an addition to one of the Elixir VS Code packages out there?
Most Liked
AdamR
Live view scaffold. It populates module name based on the file name and path. Easily adjustable for components so eg, you can have lvc for live view component. If you’re not a fun of render in the same file, just remove it.
"Live view module": {
"prefix": "lvv",
"body": [
"defmodule ${RELATIVE_FILEPATH/^([^\\/\\\\]+[\\/\\\\])|(\\.ex|\\.exs)$|([^._\\/\\\\]+)|_|([\\/\\\\])/${3:/capitalize}${4:+.}/g} do",
"\tuse ${WORKSPACE_FOLDER/.*[\\\\|\\/]+(.*)/${1:/capitalize}/}Web, :live_view",
"\t# import Phoenix.Component",
"\t# import Phoenix.HTML.Form",
"\n\tdef render(assigns) do",
"\t\t~H\"\"\"",
"\t\t\t$0",
"\t\t\"\"\"",
"\tend",
"\n\tdef mount(_params, _session, socket) do",
"\n\t\t{:ok, socket}",
"\tend",
"\n\tdef handle_event(\"event\", _params, socket) do",
"\n\t\t{:noreply, socket}",
"\tend",
"\n\tdef handle_info(\"msg\", socket) do",
"\n\t\t{:noreply, socket}",
"\tend",
"\nend",
],
"description": "Live view module scaffold"
}
Will produce
defmodule MyappWeb.Folder.AnotherFolder do
use MyappWeb, :live_view
# import Phoenix.Component
# import Phoenix.HTML.Form
def render(assigns) do
~H"""
"""
end
def mount(_params, _session, socket) do
{:ok, socket}
end
def handle_event("event", _params, socket) do
{:noreply, socket}
end
def handle_info("msg", socket) do
{:noreply, socket}
end
end
blakedietz
If you like this you might find my plugin of use: Phoenix LiveView snippets - Visual Studio Marketplace
Popular in Guides/Tuts
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








