jtormey

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

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

blakedietz

If you like this you might find my plugin of use: Phoenix LiveView snippets - Visual Studio Marketplace

Where Next?

Popular in Guides/Tuts Top

sergio
Wrote this guide on how to integrate DropzoneJS with Phoenix Liveview. Hope it helps someone out! https://sergiotapia.com/dropzonejs-dir...
New
New
marcelo
I wrote a small article on how to use current_user with coherence on Phoenix. There are already a couple of blogposts about it but I thin...
New
danschultzer
I wrote this blog post based on our experiences setting up continuous delivery for our first production umbrella Phoenix app. Coming from...
New
redfloyd
Greetings fellow alchemists ! I have started to write an open-source interpreter in Elixir (https://github.com/nicolasdilley/dwarf-inter...
New
zenw0lf
Hello all! For those wanting to try your hands at Elixir / Phoenix, I wrote a comprehensive tutorial on doing a simple JSON API with sai...
New
njwest
In the process of developing a Phx-based multiplayer experience, I found myself with so many browser tabs open with Elixir gaming resourc...
New
nelsonic
When we were figuring out how to use Phoenix LiveView we got stuck a few times. So in order to save other people time, we created a comp...
New
ben-pr-p
Hey all! I put together a starter-pack / instructions to set up Phoenix with the new parcel-bundler instead of brunch (or webpack). It’s...
New
slouchpie
Warmest greetings, comrades. I recently started using :dns_cluster (GitHub - phoenixframework/dns_cluster: Simple DNS clustering for dis...
New

Other popular topics Top

lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
vac
Hi, I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

We're in Beta

About us Mission Statement