Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Phoenix LiveView snippetsNew to Visual Studio Code? Get it now.

Phoenix LiveView snippets

phoenix-liveview-snippets

|
289 installs
| (0) | Free
A well documented set of snippets commonly used when writing LiveView code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Phoenix LiveView snippets

Description

A well documented set of snippets commonly used when writing LiveView code. The snippets touch on all aspects of development when writing LiveView code. Here's a high level list

  • Ecto
    • schema
  • Embedded elixir aka eex
  • LiveView
    • Lifecycle functions such as handle_event, render, preload, mount
    • LiveComponent
  • Phoenix
    • Context
    • Component

Getting started

Not sure where to start

All snippets support the prefix plvs. So if you don't know where to get started, just type plvs and wait for the snippet recommendation to come up. From there a browsable list is given to you.

Mnemonic layout

All snippets use a mnemonic layout that matches the component name name space. So for example if you want to render a form in Phoenix LiveView

You'll want to reach for Phoenix.Component.form/1 this mnemonically translates to pcf.

This applies to all snippets. See the table below to get a better understanding. Worst case, you just type plvs for a while and teach yourself which snippet mnemonics you would prefer to use.

Snippet index

Name Prefix Reference
Ecto: Schema changeset plvs,es,esc Reference
Ecto: Schema changeset optional attrs plvs,es,esoa Reference
Ecto: Schema changeset required attrs plvs,es,escra Reference
LiveView: @impl Phoenix.LiveComponent plvs,plv,@impl Reference
LiveView: @impl Phoenix.LiveView plvs,plv,@impl Reference
LiveView: New LiveView module plvs,plv,plvnlvm,defmodule Reference
LiveView: Phoenix.LiveComponent assign helper plvs,plc,plca,plcah Reference
LiveView: Phoenix.LiveComponent call plvs,plc,plcc Reference
LiveView: Phoenix.LiveComponent handle_event plvs,plc,plche Reference
LiveView: Phoenix.LiveComponent mount plvs,plc,plcm Reference
LiveView: Phoenix.LiveComponent preload plvs,plc,plcp Reference
LiveView: Phoenix.LiveComponent render plvs,plc,plcr Reference
LiveView: Phoenix.LiveComponent update plvs,plc,plcu Reference
LiveView: Phoenix.LiveView mount plvs,plv,plvm,def mount Reference
LiveView: Render slot plvs,plvrs Reference
LiveView: handle_call plvs,plv,plvhi,def,def handle_call Reference
LiveView: handle_cast plvs,plv,plvhi,def,def handle_cast Reference
LiveView: handle_event plvs,plv,plvhe,def,def handle_event Reference
LiveView: handle_info plvs,plv,plvhi,def,def handle_info Reference
LiveView: handle_params plvs,plv,plvhe,def,def handle_params Reference
LiveView: render implementation plvs,plv,plvr,def render Reference
LiveView: socket destructure plvs,plv,plvsd,socket Reference
LiveView: terminate plvs,plv,plvt,def terminate Reference
Phoenix: Component definition plvs,pc,pcd Reference
Phoenix: Context change plvs,pctx,pctxch Reference
Phoenix: Context create plvs,pctx,pctxcr Reference
Phoenix: Context delete plvs,pctx,pctxd Reference
Phoenix: Context get plvs,pctx,pctxg Reference
Phoenix: Context list plvs,pctx,pctxl Reference
Phoenix: Context update plvs,pctx,pctxu Reference
Phoenix: HTML inputs_for plvs,phtml,phtmlif,inputs_for,<%= for Reference
Phoenix: Phoenix.Component.form/1 plvs,pc,pcf Reference
eex: Comment plvs,eex,eexc,<%# Reference
eex: Replace with result plvs,eex,<%= Reference
eex: Return contents plvs,eex,eexr,<%% Reference
eex: case plvs,eex,eexcase,<% case Reference
eex: cond plvs,eex,eexcond,<% cond Reference
eex: for plvs,eex,eexfor,<% for Reference
eex: if plvs,eex,eexif,<% if Reference
eex: inline with output plvs,eex,<% Reference

Snippets

Ecto: Schema changeset

Prefixes

plvs,es,esc

Template

def changeset(${1:name}, attrs) do
  required_attrs = [$2]
  optional_attrs = [$3]

  ${1:name}
  |> cast(attrs, required_attrs ++ optional_attrs)
  |> validate_required(required_attrs)
end

Ecto: Schema changeset optional attrs

Prefixes

plvs,es,esoa

Template

optional_attrs = [$0]

Ecto: Schema changeset required attrs

Prefixes

plvs,es,escra

Template

required_attrs = [$0]

LiveView: @impl Phoenix.LiveComponent

Prefixes

plvs,plv,@impl

Template

@impl Phoenix.LiveComponent

LiveView: @impl Phoenix.LiveView

Prefixes

plvs,plv,@impl

Template

@impl Phoenix.LiveView

LiveView: New LiveView module

Prefixes

plvs,plv,plvnlvm,defmodule

Template

defmodule $1 do
  use $2, :live_view

  @impl Phoenix.LiveView
  def render(assigns) do
    ~H"""
    $0
    """
  end

  @impl Phoenix.LiveView
  def mount(${3: params}, ${4: session}, ${5: socket}) do
    $6
    {:ok, socket}
  end
end

LiveView: Phoenix.LiveComponent assign helper

Prefixes

plvs,plc,plca,plcah

Template

def assign_$1(socket, $1) do
  assign(socket, $1: $1)
end

LiveView: Phoenix.LiveComponent call

Prefixes

plvs,plc,plcc

Template



LiveView: Phoenix.LiveComponent handle_event

Prefixes

plvs,plc,plche

Template

@impl Phoenix.LiveComponent
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: Phoenix.LiveComponent mount

Prefixes

plvs,plc,plcm

Template

@impl Phoenix.LiveComponent
def mount(${1:socket}) do
  $0
  {:ok, ${2:socket}}
end

LiveView: Phoenix.LiveComponent preload

Prefixes

plvs,plc,plcp

Template

@impl Phoenix.LiveComponent
def preload(${1:list_of_assigns}) do
  $0
  $1
end

LiveView: Phoenix.LiveComponent render

Prefixes

plvs,plc,plcr

Template

@impl Phoenix.LiveComponent
def render(${1:assigns}) do
  ~H"""
  $0
  """
end

LiveView: Phoenix.LiveComponent update

Prefixes

plvs,plc,plcu

Template

@impl Phoenix.LiveComponent
def update(${1:assigns}, ${2:socket}) do
  $0

  {:ok, socket}
end

LiveView: Phoenix.LiveView mount

Prefixes

plvs,plv,plvm,def mount

Template

@impl Phoenix.LiveView
def mount(${1:params}, ${2:session}, ${3:socket}) do
  ${4:{:noreply, socket}}
end

LiveView: Render slot

Prefixes

plvs,plvrs

Template


LiveView: handle_call

Prefixes

plvs,plv,plvhi,def,def handle_call

Template

@impl Phoenix.LiveView
def handle_call(${1:msg}, ${2:from}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: handle_cast

Prefixes

plvs,plv,plvhi,def,def handle_cast

Template

@impl Phoenix.LiveView
def handle_cast(${1:msg}, ${2:socket}) do
  $0

  ${3:{:noreply, socket}}
end

LiveView: handle_event

Prefixes

plvs,plv,plvhe,def,def handle_event

Template

@impl Phoenix.LiveView
def handle_event(${1:event}, ${2:unsigned_params}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: handle_info

Prefixes

plvs,plv,plvhi,def,def handle_info

Template

@impl Phoenix.LiveView
def handle_info(${1:message}, ${2:socket}) do
  $0

  {:noreply, ${3:socket}}
end

LiveView: handle_params

Prefixes

plvs,plv,plvhe,def,def handle_params

Template

@impl Phoenix.LiveView
def handle_params(${1:event}, ${2:uri}, ${3:socket}) do
  $0

  ${4:{:noreply, socket}}
end

LiveView: render implementation

Prefixes

plvs,plv,plvr,def render

Template

@impl Phoenix.LiveView
def render(${1:assigns}) do
  ~H"""
  $0
  """
end

LiveView: socket destructure

Prefixes

plvs,plv,plvsd,socket

Template

%{ assigns: %{$1} } = $0

LiveView: terminate

Prefixes

plvs,plv,plvt,def terminate

Template

@impl Phoenix.LiveView
def terminate(${1: reason}, ${2:socket}) do
  $3
end

Phoenix: Component definition

Prefixes

plvs,pc,pcd

Template

def ${1:component}(${2:assigns}) do
  ~H"""
  $3
  """
end

Phoenix: Context change

Prefixes

plvs,pctx,pctxch

Template

@doc """
Returns an `%Ecto.Changeset{}` for tracking $1 changes.

## Examples

    iex> change_$1(%{field: value})
    %Ecto.Changeset{data: %${1/(.*)/${1:/pascalcase}/}{}}

"""
def change_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1, attrs \\\\ %{} ) do
  ${1/(.*)/${1:/pascalcase}/}.changeset($1, attrs)
end

Phoenix: Context create

Prefixes

plvs,pctx,pctxcr

Template

@doc """
Creates a $1.

## Examples

    iex> create_$1(%{field: value})
    {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

    iex> create_$1(%{field: bad_value})
    {:error, ...}

"""
def create_${1:name}(attrs \\\\ %{}) do
  %${1/(.*)/${1:/pascalcase}/}{}
  |> ${1/(.*)/${1:/pascalcase}/}.changeset(attrs)
  |> Repo.insert()
end

Phoenix: Context delete

Prefixes

plvs,pctx,pctxd

Template

@doc """
  Deletes a $1.

  ## Examples

      iex> delete_$1($1)
      {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

      iex> delete_$1($1)
      {:error, %Ecto.Changeset{}}
"""
def delete_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1) do
  Repo.delete($1)
end

Phoenix: Context get

Prefixes

plvs,pctx,pctxg

Template

@doc """
Gets a single $1.

## Examples

    iex> get_$1!(123)
    %${1/(.*)/${1:/pascalcase}/}{}

    iex> get_$1!(456)
    ** (Ecto.NoResultsError)

"""
def get_${1:name}!(id) do
  Repo.get!(${1/(.*)/${1:/pascalcase}/}, id)
end

Phoenix: Context list

Prefixes

plvs,pctx,pctxl

Template

@doc """
Returns the list of $1s.

## Examples

    iex> list_$1()
    [%${1/(.*)/${1:/pascalcase}/}{}, ...]

"""
def list_${1:name}s do
  Repo.all(${1/(.*)/${1:/pascalcase}/})
end

Phoenix: Context update

Prefixes

plvs,pctx,pctxu

Template

@doc """
Updates a $1.

## Examples

    iex> update_$1(%{field: value})
    {:ok, %${1/(.*)/${1:/pascalcase}/}{}}

    iex> update_$1(%{field: bad_value})
    {:error, %Ecto.Chnageset{}}

"""
def update_${1:name}(%${1/(.*)/${1:/pascalcase}/}{} = $1, attrs) do
  $1
  |> ${1/(.*)/${1:/pascalcase}/}.changeset(attrs)
  |> Repo.update()
end

Phoenix: HTML inputs_for

Prefixes

plvs,phtml,phtmlif,inputs_for,
  
  $0


Phoenix: Phoenix.Component.form/1

Prefixes

plvs,pc,pcf

Template


  $0


eex: Comment

Prefixes

plvs,eex,eexc,

eex: Replace with result

Prefixes

plvs,eex,

eex: Return contents

Prefixes

plvs,eex,eexr,

eex: case

Prefixes

plvs,eex,eexcase,
  

eex: cond

Prefixes

plvs,eex,eexcond,
  
    $2

eex: for

Prefixes

plvs,eex,eexfor,
  $0

eex: if

Prefixes

plvs,eex,eexif,
  $0

eex: inline with output

Prefixes

plvs,eex,
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft