HTML && EEx snippets

README.md

VSCode snippets

The other files in this gist are snippets for the file extensions of .html.eex and .eex. They should give you all you need (or a good jumping of point) to work with the mentioned file types within VScode. I would like to thank stefanjarina for my starting point with his eex snippets. If enough people enjoy the following files I'll make it into VSCode extension for easier installation, but for now you can follow the below instructions.

Installation

1. Open VSCode.
2. Find Preferences in your menu bar/toolbar.
3. Select User Snippets.
4. Type in eex and your results should be Eex.json and HTML (Eex).json.
5. Select the one you want (I would recommend doing both anyway).
6. Select all text in that file and delete it.
7. Copy all the text in the appropriate file in this gist.
8. Paste that text into the appropriate .json file.
9. Save.
10. Enjoy.

Usage

Assuming you are completely new to snippets/suggestions. You start typing the trigger and then you should have a pop up box with the suggestion(s). You then can press TAB. The boiler plate content will then be pasted (which is the point of them normally). Your cursor will be where you would want to type in your specifics. Press TAB again and the cursor will jump to the next point or to the end where you can continue your work as normal.

HTML

The simplest is to look through the file and where it says trigger that's what you need to type to get prompted for the body section to be added. Here are a few examples though.

Trigger	Content
.div	div tag with class <div class=""> </div>
#div	div tag with id <div id=""> </div>
p	p tag <p> </p>
img	image tag "<img class=" " src=" ">
h1	h1 tag "<h1> </h1>
.h1	h1 class tag "<h1 class=" "> </h1>
#h1	h1 id tag "<h1 id=" "> </h1>

The patterns you see above are common throughout the snippets. If one is not there that should be you should be able to easily add it by looking at the others for reference if needs be.

There are also some specific ones that are more vague but added for my own personal ones such as:

``span # trigger
<span =" "  =" "> </span> # content
<span some="example" to="explain">Hopefully it's done that</span> # What it may look like when filled in.

Where each back-tick represents the amount of attribute value pair.

EEx (copied from stefanjarina repo README)

Basic

Trigger	Content
e=	render block <%= %>
e-	exec block <% %>
e#	comment <%# %>
end	end tag <% end %>
lt	link <%= link \"${1:text}\", to: ${2:url} %>
render	render <%= render \"${1:partial}.html\", ${2:local_var: @local} %>

Control flow

Trigger	Content
for	for <%= for $1 <- $1 do %>
if	if <%= if $1 do %>
ife	if else <%= if $1 do %> <% else %>
cond	cond <%= cond do %>
unless	unless <%= unless $1 do %>

Forms

Trigger	Content
ff	form_for <%= form_for @${1:changeset}, ${2:url}, ${3:[]}, fn f -> %>
et	form error <%= error_tag ${1:f}, :${2:field} %>
la	form label <%= label ${1:f}, :${2:field}, \"${3:Text}\" %>
ti	form text input <%= text_input ${1:f}, :${2:field} %>
pi	form password input <%= password_input ${1:f}, :${2:field} %>
subm	form submit <%= submit ${1:Text} %>
submc	form submit with class <%= submit ${1:Text}, class: \"${3:btn btn-primary}\" %>

Eex.json

{
	//
	// EEx
	//
	"eex_render_block": {
		"prefix": "e=",
		"body": ["<%= $1 %>$0"],
		"description": "<%= %> render block"
	},
	"eex_exec_block": {
		"prefix": "e-",
		"body": ["<% $1 %>$0"],
		"description": "<% %> exec block"
	},
	"eex_comment_block": {
		"prefix": "e#",
		"body": ["<%# $1 %>$0"],
		"description": "<%# %> comment block"
	},
	"eex_end_tag": {
		"prefix": "end",
		"body": ["<% end %>$0"],
		"description": "<% end %> end tag"
	},
	"for": {
		"prefix": "for",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex for"
	},
	"eex_if": {
		"prefix": "if",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex if"
	},
	"eex_if_else": {
		"prefix": "ife",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% else %>",
			"  $3",
			"<% end %>$0"
		],
		"description": "eex if else"
	},
	"eex_else": {
		"prefix": "else",
		"body": [
			"<% else %>$0"
		],
		"description": "eex else"
	},
	"eex_cond": {
		"prefix": "cond",
		"body": [
			"<%= cond do %>",
			"  <% $1 -> %>",
			"    $2",
			"  <% true -> %>",
			"    $3",
			"<% end %>$0"
		],
		"description": "eex cond"
	},
	"eex_unless": {
		"prefix": "unless",
		"body": [
			"<%= unless $1 do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex unless"
	},
	"eex_form_for": {
		"prefix": "ff",
		"body": [
			"<%= form_for @${1:changeset}, ${2:url}, ${3:[]}, fn f -> %>",
			"  $4",
			"<% end %>$0"
		],
		"description": "eex form_for"
	},
	"eex_error_tag": {
		"prefix": "et",
		"body": [
			"<%= error_tag ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form error tag"
	},
	"eex_text_input": {
		"prefix": "ti",
		"body": [
			"<%= text_input ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form text input"
	},
	"eex_label": {
		"prefix": "la",
		"body": [
			"<%= label ${1:f}, :${2:field}, \"${3:Text}\" %>$0"
		],
		"description": "eex form label"
	},
	"eex_submit": {
		"prefix": "subm",
		"body": [
			"<%= submit ${1:Text} %>$0"
		],
		"description": "eex form submit"
	},
	"eex_submit_c": {
		"prefix": "submc",
		"body": [
			"<%= submit ${1:Text}, class: \"${3:btn btn-primary}\" %>$0"
		],
		"description": "eex form submit with class"
	},
	"eex_password_input": {
		"prefix": "pi",
		"body": [
			"<%= password_input ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form password input"
	},
	"eex_link": {
		"prefix": "lt",
		"body": [
			"<%= link \"${1:text}\", to: ${2:url} %>$0"
		],
		"description": "eex link"
	},
	"eex_render": {
		"prefix": "render",
		"body": [
			"<%= render \"${1:partial}.html\", ${2:local_var: @local} %>$0"
		],
		"description": "eex render"
	}
}

HTML (Eex).json

{
	//
	// HTML
	//
	// H1s
	"H1": {
		"prefix": "h1",
		"body": [
			"<h1>$1</h1>$0"
		],
		"description": "Header 1"
	},
	"H1 class": {
		"prefix": ".h1",
		"body": [
			"<h1 class=\"$1\">$2</h1>$0"
		],
		"description": "Header 1 class"
	},
	"H1 ID": {
		"prefix": "#h1",
		"body": [
			"<h1 id=\"$1\">$2</h1>$0"
		],
		"description": "Header 1 ID"
	},
	// H2s
	"H2": {
		"prefix": "h2",
		"body": [
			"<h2>$1</h2>$0"
		],
		"description": "Header 2"
	},
	"H2 class": {
		"prefix": ".h2",
		"body": [
			"<h2 class=\"$1\">$2</h2>$0"
		],
		"description": "Header 2 class"
	},
	"H2 ID": {
		"prefix": "#h2",
		"body": [
			"<h2 id=\"$1\">$2</h2>$0"
		],
		"description": "Header 2 ID"
	},
	// H3s
	"H3": {
		"prefix": "h3",
		"body": [
			"<h3>$1</h3>$0"
		],
		"description": "Header 3"
	},
	"H3 class": {
		"prefix": ".h3",
		"body": [
			"<h3 class=\"$1\">$2</h3>$0"
		],
		"description": "Header 3 class"
	},
	"H3 ID": {
		"prefix": "#h3",
		"body": [
			"<h3 id=\"$1\">$2</h3>$0"
		],
		"description": "Header 3 ID"
	},
	// H4s
	"H4": {
		"prefix": "h4",
		"body": [
			"<h4>$1</h4>$0"
		],
		"description": "Header 4"
	},
	"H4 class": {
		"prefix": ".h4",
		"body": [
			"<h4 class=\"$1\">$2</h4>$0"
		],
		"description": "Header 4 class"
	},
	"H4 ID": {
		"prefix": "#h4",
		"body": [
			"<h4 id=\"$1\">$2</h4>$0"
		],
		"description": "Header 4 ID"
	},
	// H5s
	"H5": {
		"prefix": "h5",
		"body": [
			"<h5>$1</h5>$0"
		],
		"description": "Header 5"
	},
	"H5 class": {
		"prefix": ".h5",
		"body": [
			"<h5 class=\"$1\">$2</h5>$0"
		],
		"description": "Header 5 class"
	},
	"H5 ID": {
		"prefix": ".h5",
		"body": [
			"<h5 id=\"$1\">$2</h5>$0"
		],
		"description": "Header 5 ID"
	},
	// Ps
	"Paragraph": {
		"prefix": "p",
		"body": [
			"<p>$1</p>$0"
		],
		"description": "Paragraph tag"
	},
	"Paragraph class": {
		"prefix": ".p",
		"body": [
			"<p class=\"$1\">$2</p>$0"
		],
		"description": "Paragraph class tag"
	},
	// Commons
	"Comment": {
		"prefix": "#",
		"body": [
			"<%# "
		],
		"description": "Comment tag"
	},
	"Italic": {
		"prefix": "i",
		"body": [
			"<i>$1</i>$0"
		],
		"description": "Italic tag"
	},
	"Bold": {
		"prefix": "b",
		"body": [
			"<b>$1</b>$0"
		],
		"description": "Bold tag"
	},
	"Anchor": {
		"prefix": "a",
		"body": [
			"<a>$1</a>$0"
		],
		"description": "Anchor tag"
	},
	"Image": {
		"prefix": "img",
		"body": [
			"<img class=\"$1\" src=\"$2\">$0"
		],
		"description": "List item class tag"
	},
	// ULs
	"Unordered list": {
		"prefix": "ul",
		"body": [
			"<ul>",
			"    $1",
			"</ul>"
		],
		"description": "Unordered list tag"
	},
	"Unordered list class": {
		"prefix": ".ul",
		"body": [
			"<ul class=\"$1\">",
			"    $2",
			"</ul>$0"
		],
		"description": "Unordered list class tag"
	},
	"Unordered list ID": {
		"prefix": "#ul",
		"body": [
			"<ul id=\"$1\">",
			"    $2",
			"</ul>$0"
		],
		"description": "Unordered list ID tag"
	},
	// LIs
	"List item": {
		"prefix": "li",
		"body": [
			"<li>$1</li>$0"
		],
		"description": "List item tag"
	},
	"List item class": {
		"prefix": ".li",
		"body": [
			"<li class=\"$1\">$2</li>$0"
		],
		"description": "List item class tag"
	},
	"List item ID": {
		"prefix": "#li",
		"body": [
			"<li id=\"$1\">$2</li>$0"
		],
		"description": "List item ID tag"
	},
	"List item custom": {
		"prefix": "`li",
		"body": [
			"<li $1=\"$2\">$3</li>$0"
		],
		"description": "List item custom tag"
	},
	// DIVs
	"Div class": {
		"prefix": ".div",
		"body": [
			"<div class=\"$1\">",
			"    $2",
			"</div>$0"
		],
		"description": "Div class tag"
	},
	"Div ID": {
		"prefix": "#div",
		"body": [
			"<div id=\"$1\">",
			"    $2",
			"</div>$0"
		],
		"description": "Div ID tag"
	},
	"Div custom": {
		"prefix": "`div",
		"body": [
			"<div $1=\"$2\">",
			"    $3",
			"</div>$0"
		],
		"description": "Div class tag"
	},
	// SPANs
	"Span": {
		"prefix": "span",
		"body": [
			"<span>$1</span>$0"
		],
		"description": "Span tag"
	},
	"Span class": {
		"prefix": ".span",
		"body": [
			"<span class=\"$1\">$2</span>$0"
		],
		"description": "Span class tag"
	},
	"Span custom": {
		"prefix": "`span",
		"body": [
			"<span $1=\"$2\">$3</span>$0"
		],
		"description": "Span custom tag"
	},
	"Span custom 2": {
		"prefix": "``span",
		"body": [
			"<span $1=\"$2\" $3=\"$4\">$5</span>$0"
		],
		"description": "Span custom 2 tag"
	},
	//
	// EEx
	//
	"eex_render_block": {
		"prefix": "e=",
		"body": ["<%= $1 %>$0"],
		"description": "<%= %> render block"
	},
	"eex_exec_block": {
		"prefix": "e-",
		"body": ["<% $1 %>$0"],
		"description": "<% %> exec block"
	},
	"eex_comment_block": {
		"prefix": "e#",
		"body": ["<%# $1 %>$0"],
		"description": "<%# %> comment block"
	},
	"eex_end_tag": {
		"prefix": "end",
		"body": ["<% end %>$0"],
		"description": "<% end %> end tag"
	},
	"for": {
		"prefix": "for",
		"body": [
			"<%= for ${1:item} <- @$1s do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex for"
	},
	"eex_if": {
		"prefix": "if",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex if"
	},
	"eex_if_else": {
		"prefix": "ife",
		"body": [
			"<%= if $1 do %>",
			"  $2",
			"<% else %>",
			"  $3",
			"<% end %>$0"
		],
		"description": "eex if else"
	},
	"eex_else": {
		"prefix": "else",
		"body": [
			"<% else %>$0"
		],
		"description": "eex else"
	},
	"eex_cond": {
		"prefix": "cond",
		"body": [
			"<%= cond do %>",
			"  <% $1 -> %>",
			"    $2",
			"  <% true -> %>",
			"    $3",
			"<% end %>$0"
		],
		"description": "eex cond"
	},
	"eex_unless": {
		"prefix": "unless",
		"body": [
			"<%= unless $1 do %>",
			"  $2",
			"<% end %>$0"
		],
		"description": "eex unless"
	},
	"eex_form_for": {
		"prefix": "ff",
		"body": [
			"<%= form_for @${1:changeset}, ${2:url}, ${3:[]}, fn f -> %>",
			"  $4",
			"<% end %>$0"
		],
		"description": "eex form_for"
	},
	"eex_error_tag": {
		"prefix": "et",
		"body": [
			"<%= error_tag ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form error tag"
	},
	"eex_text_input": {
		"prefix": "ti",
		"body": [
			"<%= text_input ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form text input"
	},
	"eex_label": {
		"prefix": "la",
		"body": [
			"<%= label ${1:f}, :${2:field}, \"${3:Text}\" %>$0"
		],
		"description": "eex form label"
	},
	"eex_submit": {
		"prefix": "subm",
		"body": [
			"<%= submit ${1:Text} %>$0"
		],
		"description": "eex form submit"
	},
	"eex_submit_c": {
		"prefix": "submc",
		"body": [
			"<%= submit ${1:Text}, class: \"${3:btn btn-primary}\" %>$0"
		],
		"description": "eex form submit with class"
	},
	"eex_password_input": {
		"prefix": "pi",
		"body": [
			"<%= password_input ${1:f}, :${2:field} %>$0"
		],
		"description": "eex form password input"
	},
	"eex_link": {
		"prefix": "lt",
		"body": [
			"<%= link \"${1:text}\", to: ${2:url} %>$0"
		],
		"description": "eex link"
	},
	"eex_render": {
		"prefix": "render",
		"body": [
			"<%= render \"${1:partial}.html\", ${2:local_var: @local} %>$0"
		],
		"description": "eex render"
	}
}