Helpful VSCode snippets for building with LiveView

Learning Resources Guides/Tuts/Tips/Info
, ,
1

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?

7 Likes
2

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
3 Likes
3

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

3 Likes