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.
- Open VSCode.
- Find
Preferences
in your menu bar/toolbar. - Select
User Snippets
. - Type in
eex
and your results should beEex.json
andHTML (Eex).json
. - Select the one you want (I would recommend doing both anyway).
- Select all text in that file and delete it.
- Copy all the text in the appropriate file in this gist.
- Paste that text into the appropriate
.json
file. - Save.
- Enjoy.
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.
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.
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} %> |
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 %> |
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}\" %> |