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?

5 Likes