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

eclark
I’ve been working on a phoenix project lately and I wanted to use the latest versions of everything. Webpack 5 had some breaking changes ...
New
Logan
Here is an example of a Mix application that utilizes Cowboy to handle websocket connections. If anyone has an idea about making this wor...
New
dgamidov
Hi folks, Just a short instruction. Maybe it will help somebody. https://v4-alpha.getbootstrap.com/getting-started Install boostrap...
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
tomciopp
TLS 1.3 has been out for a little over a year now, but it has been unavailable in Phoenix due to erlang’s handling of ssl. With the most ...
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
emilsoman
Hello, While answering a StackOverflow question on how to debug an elixir node running remotely, I thought it may be helpful to write a...
New
TwistingTwists
This is a thread to note down things/best practices encountered in LiveBeats App as I explore the source code. Found this usage of r...
New
bluegene
Hi guys, I’ve been on a personal journey to learn Elixir for the past two years. During this journey I’ve been using the spaced repetiti...
New
tonydang
I recently got inertia-phoenix (an Inertia.js adapter for Phoenix) working with Svelte. Setting up the server-side rendering (SSR) with S...
New

Other popular topics Top

belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
sacepums
Hey guys. I'm new to elixir and im really stocked about it. But I ran into a bit of problem - I need to convert a date sting, for examp...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
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
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New

We're in Beta

About us Mission Statement