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

AstonJ
This blog post hit my timeline earlier, and I’ve also been learning about some fantastic Elixir related tips via @pragdave’s new online c...
New
thetechnologyvault
One of our team members just published this getting started guide for Elixir/Phoenix devs to use the Nanobox platform: https://content.n...
New
zookzook
If you want to use the MongoDB in your next Killer-App-Project, but you did not dare ask because otherwise many would advise you to use P...
New
tobleron
Ok, so I am so excited to share with you the most interesting setup I have made for Elixir/Phoenix today. Why? Because if you trust me, i...
New
drapermd
So here is the code I came up with to generically generate an array param that will be stored on a jsonb property in ecto. It only handl...
New
water
I’ll post this here, It might help someone in the future. Feedback is greatly appreciated. I use it with direnv on NixOS, It should wor...
New
rogach
I’ve spent some time understanding how to do hot code reloading with releases built using mix release, and here I’d like to detail the st...
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
sergio
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
nietaki
Just a quick heads up: There seems to be a bug in Erlang/OTP 21.3, which can cause some errors when making http requests. If you’re using...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
boundedvariable
I am going through the kafka architecture. All the features what the kafka is providing are already in Erlang. I would like hear your opi...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement