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": {}
}
