romenigld

romenigld

VSCode Custom User Snippets For '*_live.html.heex' Templates Not Working

I am trying to use the snippet’s code from the liveview course of the pragprog which I loved to use on the files *_live.html.heex.
The snippet’s code is working very well ins the the render functions like:

def render(assigns) do
    ~H"""
    (efor + TAB)
    """
end

but inside the *_live.html.heex files is not working. What I need to do for take this working?
I have created the snippets code doing inside the VSCode menu:
Code > Preferences > Configure User Snippets
and then inside the elixir.json file I put this:

{
	// Place your snippets for elixir here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	// Snippets for the LiveView Module name of the APP
	// "lv_module": {
	// 	"scope": "elixir, html-eex",
	// 	"prefix": "lv",
	// 	"body": [
	// 		"defmodule ${1}Web.${2}Live do",
	// 		"  use ${1}Web, :live_view",
	// 		"end"
	// 	],
	// 	"description": "LiveView module"
	// },
	// Snippets of the course Phoenix Live View By PragProg
	"lv_module": {
		"prefix": "lv",
		"body": [
		  "defmodule ${1}Web.${2}Live do",
		  "  use ${1}Web, :live_view",
		  "end"
		],
		"description": "LiveView module"
	  },
	  "lc_module": {
			"prefix": "lc",
			"body": [
				"defmodule ${1}Web.${2}Component do",
				"  use ${1}Web, :live_component",
				"end"
			],
			"description": "LiveComponent module"
		},
	  "lv_mount": {
		"prefix": "mount",
		"body": [
		  "def mount(_params, _session, socket) do",
		  "  socket = assign(socket, ${1:key}: ${2:value})",
		  "  {:ok, socket}",
		  "end"
		],
		"description": "LiveView mount function"
	  },
	  "lv_rend": {
		"prefix": "rend",
		"body": [
		  "def render(assigns) do",
		  "  ~H\"\"\"",
		  "  ${0}",
		  "  \"\"\"",
		  "end"
		],
		"description": "LiveView render function"
	  },
	  "lv_handle_event": {
		"prefix": "he",
		"body": [
		  "def handle_event(${1:event}, _, socket) do",
		  "  socket = assign(socket, ${2:key}: ${3:value})",
		  "  {:noreply, socket}",
		  "end"
		],
		"description": "LiveView handle_event function"
	  },
	  "lv_handle_info": {
		"prefix": "hi",
		"body": [
		  "def handle_info(${1:message}, socket) do",
		  "  socket = assign(socket, ${2:key}: ${3:value})",
		  "  {:noreply, socket}",
		  "end"
		],
		"description": "LiveView handle_info function"
		},
		"lv_handle_params": {
			"prefix": "hp",
			"body": [
				"def handle_params(params, _url, socket) do",
				"  {:noreply, socket}",
				"end"
			],
			"description": "LiveView handle_params function"
		},
		"lv_template": {
			"prefix": "lt",
			"body": [
				"~H\"\"\"",
				"${0}",
				"\"\"\""
			],
			"description": "LiveView inline template"
	  },
	  "lv_test_module": {
			"prefix": "lvtest",
			"body": [
				"defmodule ${1}Web.${2}Test do",
		  "  use ${1}Web.ConnCase, async: true",
		  "",
		  "  import Phoenix.LiveViewTest",
		  "",
		  "  ${0}",
				"end"
			],
			"description": "LiveView test module"
		},
	  "lv_test": {
			"prefix": "test",
			"body": [
		  "test \"${1:description}\", %{conn: conn} do",
		  "  {:ok, view, _html} = live(conn, \"${2:path}\")",
				"  ${0}",
				"end"
			],
			"description": "LiveView test"
		},
		"eex_datalist": {
			"prefix": "data",
			"body": [
				"<datalist id=\"${1}\">",
				"  ${0}",
				"</datalist>",
				""
			],
			"description": "EEx datalist"
		},
		"eex_input": {
			"prefix": "input",
			"body": [
				"<input type=\"text\" name=\"${1}\" value=\"${2}\"",
				"       placeholder=\"${3}\" />"
			],
			"description": "EEx text input"
		},
		"eex_hidden_input": {
			"prefix": "hidden",
			"body": [
				"<input type=\"hidden\" name=\"${1}\" value=\"${2}\" />"
			],
			"description": "EEx hidden input"
		},
		"eex_checkbox_input": {
			"prefix": "checkbox",
			"body": [
				"<input type=\"checkbox\" id=\"${1}\" name=\"${2}\" value=\"${3}\"/>"
			],
			"description": "EEx checkbox input"
		},
		"eex_render_block": {
			"prefix": "et",
			"body": [
				"<%= $1 %>"
			],
			"description": "<%= %> render block"
		},
		"eex_end_tag": {
			"prefix": "eend",
			"body": [
				"<% end %>$1"
			],
			"description": "<% end %> end tag"
		},
		"for": {
			"prefix": "efor",
			"body": [
				"<%= for ${1:item} <- @$1s do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx for"
		},
		"fori": {
			"prefix": "efori",
			"body": [
				"<%= for ${1:item} <- @$1s do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx for comprehension with items"
		},
		"eex_ifa": {
			"prefix": "eifa",
			"body": [
				"<%= if $1, do: \"{$1}\" %>"
			],
			"description": "EEx if for attribute"
		},
		"eex_if": {
			"prefix": "eif",
			"body": [
				"<%= if $1 do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx if"
		},
		"eex_if_else": {
			"prefix": "eife",
			"body": [
				"<%= if $1 do %>",
				"  $2",
				"<% else %>",
				"  $3",
				"<% end %>"
			],
			"description": "EEx if else"
		},
		"eex_else": {
			"prefix": "eelse",
			"body": [
				"<% else %>"
			],
			"description": "EEx else"
		},
		"eex_cond": {
			"prefix": "econd",
			"body": [
				"<%= cond do %>",
				"  <% $1 -> %>",
				"    $2",
				"  <% true -> %>",
				"    $3",
				"<% end %>"
			],
			"description": "EEx cond"
		},
		"eex_unless": {
			"prefix": "eunless",
			"body": [
				"<%= unless $1 do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx  unless"
		}
}

and this is my settings.json file:

{
//   "editor.fontFamily": "Fira Code iScript, FiraCode-Retina, Consolas, 'Courier New', monospace",
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs":"active",

  //ElixirLinter
  "elixirLinter.useStrict": true,
  "elixirLinter.defaultSeverity": 10,
  "elixirLinter.consistencySeverity": 10,
  "elixirLinter.designSeverity": 10,
  "elixirLinter.refactoringSeverity": 10,
  "elixirLinter.readabilitySeverity": 10,
  "elixirLinter.warningsSeverity": 10,

  //ElixirLS
  "elixirLS.suggestSpecs": false,
  "elixirLS.dialyzerEnabled": true,
  "elixirLS.signatureAfterComplete": false,
  "elixirLS.fetchDeps": false,

  // Based on Elixir formatter's style
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,

  // Provides smart completion for "do" and "fn ->" blocks. Does not run the Elixir formatter.
  "editor.formatOnType": true,

  // // Misc
  "editor.wordBasedSuggestions": true,
  "editor.trimAutoWhitespace": false,
  "editor.acceptSuggestionOnEnter": "on",
  "explore.confirmDelete": false,
  "liveServer.settings.donotShowInfoMsg": true,

  // Beautify
  "beautify.language": {
      "js": {
          "type": [
              "javascript",
              "json",
              "jsonc"
          ],
          "filename": [
              ".jshintrc",
              ".jsbeautifyrc"
          ]
      },
      "css": [
          "css",
          "less",
          "scss"
      ],
      "html": [
          "htm",
          "html",
          "html-eex"
      ]
  },
  "terminal.integrated.shell.osx": "/bin/zsh",
  "[javascript]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html-eex]": {
      "editor.defaultFormatter": "HookyQR.beautify"
  },
  "terminal.integrated.automationShell.osx": "",

  //Emmet
  "emmet.excludeLanguages": [
      "markdown"
  ],
  "emmet.includeLanguages": {
    // "elixir": "html",
    "html-eex": "html"
  },
  "files.associations": {
      "*.eex": "html-eex",
      "*.leex": "html-eex",
      "*.heex": "html-eex",
  },
"emmet.triggerExpansionOnTab": true,
  "json.schemas": [],
  "editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "name": "comment",
            "scope": ["comment"],
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "name": "Keyword Storage",
            "scope": ["keyword", "storage", "keyword.control"],
            "settings": {
                // "fontStyle": "italic"
            }
        },
        {
            "name": "Entity",
            "scope": [
                "entity.name.type.class", //class names
                "entity.other.attribute-name",
                "entity.name.method",
                "entity.name.tag"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "name": "Variable",
            "scope": [
                "variable.language",
                "meta.paragraph.markdown",
                "support.type.property-name.json",
                "string.other.link.title.markdown"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "name": "Markdown",
            "scope": [
                "meta.paragraph.markdown",
                "string.other.link.title.markdown",
                "markup.underline.link.markdown"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "name": "Json",
            "scope": ["support.type.property-name.json"],
            "settings": {
                "fontStyle": "italic"
            }
        },
      ]
    },
    "editor.rulers": [
        120
    ],
    "workbench.editorAssociations": {
        "*.beam": "default"
    },
    "workbench.iconTheme": "eq-material-theme-icons-light",
    "workbench.colorTheme": "Material Theme Darker",
    "terminal.integrated.automationProfile.linux": {}

}

Marked As Solved

romenigld

romenigld

I fixed searching the snippets of the vscode:
Code > Preferences > Configure User Snippets

first I tried the phoenix-heex.json and not work’s.
So I seek other file called heex and selected the file html-eex.json and copy and paste just the code for HTML templates on the other snippets.

{
	// Place your snippets for html-eex here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"eex_datalist": {
		"prefix": "data",
		"body": [
			"<datalist id=\"${1}\">",
			"  ${0}",
			"</datalist>",
			""
		],
		"description": "EEx datalist"
	},
	"eex_input": {
		"prefix": "input",
		"body": [
			"<input type=\"text\" name=\"${1}\" value=\"${2}\"",
			"       placeholder=\"${3}\" />"
		],
		"description": "EEx text input"
	},
	"eex_hidden_input": {
		"prefix": "hidden",
		"body": [
			"<input type=\"hidden\" name=\"${1}\" value=\"${2}\" />"
		],
		"description": "EEx hidden input"
	},
	"eex_checkbox_input": {
		"prefix": "checkbox",
		"body": [
			"<input type=\"checkbox\" id=\"${1}\" name=\"${2}\" value=\"${3}\"/>"
		],
		"description": "EEx checkbox input"
	},
	"eex_render_block": {
		"prefix": "et",
		"body": [
			"<%= $1 %>"
		],
		"description": "<%= %> render block"
	},
	"eex_end_tag": {
		"prefix": "eend",
		"body": [
			"<% end %>$1"
		],
		"description": "<% end %> end tag"
	},
	"for": {
		"prefix": "efor",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx for"
	},
	"fori": {
		"prefix": "efori",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx for comprehension with items"
	},
	"eex_ifa": {
		"prefix": "eifa",
		"body": [
			"<%= if $1, do: \"{$1}\" %>"
		],
		"description": "EEx if for attribute"
	},
	"eex_if": {
		"prefix": "eif",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx if"
	},
	"eex_if_else": {
		"prefix": "eife",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% else %>",
			"  $3",
			"<% end %>"
		],
		"description": "EEx if else"
	},
	"eex_else": {
		"prefix": "eelse",
		"body": [
			"<% else %>"
		],
		"description": "EEx else"
	},
	"eex_cond": {
		"prefix": "econd",
		"body": [
			"<%= cond do %>",
			"  <% $1 -> %>",
			"    $2",
			"  <% true -> %>",
			"    $3",
			"<% end %>"
		],
		"description": "EEx cond"
	},
	"eex_unless": {
		"prefix": "eunless",
		"body": [
			"<%= unless $1 do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx  unless"
	}

}

and this work’s on the files *_live.html.heex.
It’s amazing!

Also Liked

romenigld

romenigld

I just updated the code snippets for generating code with Phoenix LiveView and VSCode.
I accept suggestions!
I include the:

  • Name of the module of the App(this is for changing for the specified project app - ‘MyAppName’)
  • Name of the module of the App with the Web( ‘MyAppNameWeb’)
  • new tag components
  • render_slot
  • the sigil ~H
  • the form
  • the label, input type and error tag f

elixir.json:

{
	// Place your snippets for elixir here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	// Snippets for the LiveView Module name of the APP
	// "lv_module": {
	// 	"scope": "elixir, html-eex",
	// 	"prefix": "lv",
	// 	"body": [
	// 		"defmodule ${1}Web.${2}Live do",
	// 		"  use ${1}Web, :live_view",
	// 		"end"
	// 	],
	// 	"description": "LiveView module"
	// },
	// Snippets of the course Phoenix Live View By PragProg

	"app_name": {
		"prefix": "an",
		"body": [
			"MyAppModuleName"
		],
		"description": "The name of the App"
	},
	"app_name_web": {
		"prefix": "anw",
		"body": [
			"MyAppNameWeb"
		],
		"description": "The name of the App with Web( MyAppModuleWeb )"
	},
	"lv_module": {
		"prefix": "lv",
		"body": [
		  "defmodule ${1:Module}Web.${2:ModuleName}Live do",
		  "  use ${1:Module}Web, :live_view",
		  "end"
		],
		"description": "LiveView module"
	  },
	  "lc_module": {
			"prefix": "lc",
			"body": [
				"defmodule ${1:Module}Web.${2:Name}Component do",
				"  use ${1:Module}Web, :live_component",
				"end"
			],
			"description": "LiveComponent module"
		},
		"lc_module_helpers": {
			"prefix": "lh",
			"body": [
				"defmodule ${1:Module}Web.Live.LiveHelpers do",
				"  use Phoenix.LiveComponent",
				"",
				"  def ${2:name}(assigns) do",
				"   ~H\"\"\"",
				"   ${0}",
				"   \"\"\"",
				"  end",
				"",
				"end"
			],
			"description": "LiveComponent Helpers module"
		},
	  "lv_mount": {
		"prefix": "mount",
		"body": [
		  "def mount(_params, _session, socket) do",
		  "  socket = assign(socket, ${1:key}: ${2:value})",
		  "  {:ok, socket}",
		  "end"
		],
		"description": "LiveView mount function"
	  },
	  "lv_rend": {
		"prefix": "rend",
		"body": [
		  "def render(assigns) do",
		  "  ~H\"\"\"",
		  "  ${0}",
		  "  \"\"\"",
		  "end"
		],
		"description": "LiveView render function"
	  },
	  "lv_handle_event": {
		"prefix": "he",
		"body": [
		  "def handle_event(${1:event}, _, socket) do",
		  "  socket = assign(socket, ${2:key}: ${3:value})",
		  "  {:noreply, socket}",
		  "end"
		],
		"description": "LiveView handle_event function"
	  },
	  "lv_handle_info": {
		"prefix": "hi",
		"body": [
		  "def handle_info(${1:message}, socket) do",
		  "  socket = assign(socket, ${2:key}: ${3:value})",
		  "  {:noreply, socket}",
		  "end"
		],
		"description": "LiveView handle_info function"
		},
		"lv_handle_params": {
			"prefix": "hp",
			"body": [
				"def handle_params(params, _url, socket) do",
				"  {:noreply, socket}",
				"end"
			],
			"description": "LiveView handle_params function"
		},
		"lv_h_sigil": {
			"prefix": "sh",
			"body": [
				"~H\"\"\"",
				"${0}",
				"\"\"\""
			],
			"description": "The '~H' sigil. LiveView inline template. "
	  },
		"lv_component_tag": {
			"prefix": "<.",
			"body": [
				"<.${1:name}>",
				"  $2",
				"</.${1:name}>"
			],
			"description": "<. > component tag block"
		},
		"lv_render_slot": {
			"prefix": "rs",
			"body": [
				"<%= render_slot(@inner_block) %>",
			],
			"description": "'<%= render_slot(@inner_block) %>' render_slot function with the tag block"
		},
		"lv_component_render": {
			"prefix": "lct",
			"body": [
				"<.live_component module={${1:ModuleName}} id=\"${2:id-name}\" />"
			],
			"description": "LiveView Component render block"
		},
		"lv_component_render_with_module_name": {
			"prefix": "lctm",
			"body": [
				"<${1:ModuleName} id=\"${2:id-name}\" />"
			],
			"description": "LiveView Component render block without the imported module name"
		},
	  "lv_test_module": {
			"prefix": "lvtest",
			"body": [
				"defmodule ${1:ModuleName}Web.${2:ModuleTestName}Test do",
		  "  use ${1}Web.ConnCase, async: true",
		  "",
		  "  import Phoenix.LiveViewTest",
		  "",
		  "  ${0}",
				"end"
			],
			"description": "LiveView test module"
		},
	  "lv_test": {
			"prefix": "test",
			"body": [
		  "test \"${1:description}\", %{conn: conn} do",
		  "  {:ok, view, _html} = live(conn, \"${2:path}\")",
				"  ${0}",
				"end"
			],
			"description": "LiveView test"
		},
		"eex_datalist": {
			"prefix": "data",
			"body": [
				"<datalist id=\"${1}\">",
				"  ${0}",
				"</datalist>",
				""
			],
			"description": "EEx datalist"
		},
		"eex_input": {
			"prefix": "input",
			"body": [
				"<input type=\"text\" name=\"${1}\" value=\"${2}\"",
				"       placeholder=\"${3}\" />"
			],
			"description": "EEx text input"
		},
		"eex_hidden_input": {
			"prefix": "hidden",
			"body": [
				"<input type=\"hidden\" name=\"${1}\" value=\"${2}\" />"
			],
			"description": "EEx hidden input"
		},
		"eex_form": {
			"prefix": "eform",
			"body": [
				"<div>",
				"  <.form let={f} for={@changeset} id={@id} phx-change=\"validate\" phx-target={@myself}>",
				"    <div class=\"mb-4\">",
				"      <%= label f, :${1:name} %>",
				"       <%= ${2:type} f, :${1:name} %>",
				"       <%= error_tag f, :${1:name} %>",
				"    </div>",
				"    <div class=\"flex\">",
				"      <%= submit \"${3:Button Name}\", phx_disable_with: \"Creating...\", class: \"btn-primary\" %>",
				"    </div>",
				"  </.form>",
				"</div>"
			],
			"description": "EEx form"
		},
		"eex_label_input_error_tags": {
			"prefix": "liet",
			"body": [
				"      <%= label f, :${1:name} %>",
				"      <%= ${2:type} f, :${1:name} %>",
				"      <%= error_tag f, :${1:name} %>",
			],
			"description": "EEx for the form use the label, type of the input and errot_tag f"
		},
		"eex_checkbox_input": {
			"prefix": "checkbox",
			"body": [
				"<input type=\"checkbox\" id=\"${1}\" name=\"${2}\" value=\"${3}\"/>"
			],
			"description": "EEx checkbox input"
		},
		"eex_render_block": {
			"prefix": "et",
			"body": [
				"<%= $1 %>"
			],
			"description": "<%= %> render block"
		},
		"eex_end_tag": {
			"prefix": "eend",
			"body": [
				"<% end %>$1"
			],
			"description": "<% end %> end tag"
		},
		"for": {
			"prefix": "efor",
			"body": [
				"<%= for ${1:item} <- @$1s do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx for"
		},
		"fori": {
			"prefix": "efori",
			"body": [
				"<%= for ${1:item} <- @$1s do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx for comprehension with items"
		},
		"eex_ifa": {
			"prefix": "eifa",
			"body": [
				"<%= if $1, do: \"{$1}\" %>"
			],
			"description": "EEx if for attribute"
		},
		"eex_if": {
			"prefix": "eif",
			"body": [
				"<%= if $1 do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx if"
		},
		"eex_if_else": {
			"prefix": "eife",
			"body": [
				"<%= if $1 do %>",
				"  $2",
				"<% else %>",
				"  $3",
				"<% end %>"
			],
			"description": "EEx if else"
		},
		"eex_else": {
			"prefix": "eelse",
			"body": [
				"<% else %>"
			],
			"description": "EEx else"
		},
		"eex_cond": {
			"prefix": "econd",
			"body": [
				"<%= cond do %>",
				"  <% $1 -> %>",
				"    $2",
				"  <% true -> %>",
				"    $3",
				"<% end %>"
			],
			"description": "EEx cond"
		},
		"eex_unless": {
			"prefix": "eunless",
			"body": [
				"<%= unless $1 do %>",
				"  $2",
				"<% end %>"
			],
			"description": "EEx  unless"
		}
}

and for use to HTML file templates put on the html-eex.json:

{
	// Place your snippets for html-eex here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"lv_component_tag": {
		"prefix": "<.",
		"body": [
			"<.${1:name}>",
			"  $2",
			"</.${1:name}>"
		],
		"description": "<. > component tag block"
	},
	"lv_render_slot": {
		"prefix": "rs",
		"body": [
			"<%= render_slot(@inner_block) %>",
		],
		"description": "'<%= render_slot(@inner_block) %>' render_slot function with the tag block"
	},
	"lv_component_render": {
		"prefix": "lct",
		"body": [
			"<.live_component module={${1:ModuleName}} id=\"${2:id-name}\" />"
		],
		"description": "LiveView Component render block"
	},
	"lv_component_render_with_module_name": {
		"prefix": "lctm",
		"body": [
			"<${1:ModuleName} id=\"${2:id-name}\" />"
		],
		"description": "LiveView Component render block without the imported module name"
	},
	"eex_datalist": {
		"prefix": "data",
		"body": [
			"<datalist id=\"${1}\">",
			"  ${0}",
			"</datalist>",
			""
		],
		"description": "EEx datalist"
	},
	"eex_input": {
		"prefix": "input",
		"body": [
			"<input type=\"text\" name=\"${1}\" value=\"${2}\"",
			"       placeholder=\"${3}\" />"
		],
		"description": "EEx text input"
	},
	"eex_hidden_input": {
		"prefix": "hidden",
		"body": [
			"<input type=\"hidden\" name=\"${1}\" value=\"${2}\" />"
		],
		"description": "EEx hidden input"
	},
	"eex_form": {
		"prefix": "eform",
		"body": [
			"<div>",
			"  <.form let={f} for={@changeset} id={@id} phx-change=\"validate\" phx-target={@myself}>",
			"    <div class=\"mb-4\">",
			"      <%= label f, :${1:name} %>",
			"       <%= ${2:type} f, :${1:name} %>",
			"       <%= error_tag f, :${1:name} %>",
			"    </div>",
			"    <div class=\"flex\">",
			"      <%= submit \"${3:Button Name}\", phx_disable_with: \"Creating...\", class: \"btn-primary\" %>",
			"    </div>",
			"  </.form>",
			"</div>"
		],
		"description": "EEx form"
	},
	"eex_label_input_error_tags": {
		"prefix": "liet",
		"body": [
			"      <%= label f, :${1:name} %>",
			"      <%= ${2:type} f, :${1:name} %>",
			"      <%= error_tag f, :${1:name} %>",
		],
		"description": "EEx for the form use the label, type of the input and errot_tag f"
	},
	"eex_checkbox_input": {
		"prefix": "checkbox",
		"body": [
			"<input type=\"checkbox\" id=\"${1}\" name=\"${2}\" value=\"${3}\"/>"
		],
		"description": "EEx checkbox input"
	},
	"eex_render_block": {
		"prefix": "et",
		"body": [
			"<%= $1 %>"
		],
		"description": "<%= %> render block"
	},
	"eex_end_tag": {
		"prefix": "eend",
		"body": [
			"<% end %>$1"
		],
		"description": "<% end %> end tag"
	},
	"for": {
		"prefix": "efor",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx for"
	},
	"fori": {
		"prefix": "efori",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx for comprehension with items"
	},
	"eex_ifa": {
		"prefix": "eifa",
		"body": [
			"<%= if $1, do: \"{$1}\" %>"
		],
		"description": "EEx if for attribute"
	},
	"eex_if": {
		"prefix": "eif",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx if"
	},
	"eex_if_else": {
		"prefix": "eife",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% else %>",
			"  $3",
			"<% end %>"
		],
		"description": "EEx if else"
	},
	"eex_else": {
		"prefix": "eelse",
		"body": [
			"<% else %>"
		],
		"description": "EEx else"
	},
	"eex_cond": {
		"prefix": "econd",
		"body": [
			"<%= cond do %>",
			"  <% $1 -> %>",
			"    $2",
			"  <% true -> %>",
			"    $3",
			"<% end %>"
		],
		"description": "EEx cond"
	},
	"eex_unless": {
		"prefix": "eunless",
		"body": [
			"<%= unless $1 do %>",
			"  $2",
			"<% end %>"
		],
		"description": "EEx  unless"
	}

}

Where Next?

Popular in Questions Top

9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
JulienCorb
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: &lt;h1&gt;Create Post&lt;/h1&gt; &lt;...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
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 2008090...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
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

We're in Beta

About us Mission Statement