Enable Formatting with ERB files in VScode

Costa Alexoglou
Jul 18, 2018 · 2 min read

Step 0 Install HTML Beautifier :

Step 1 Create a task file:

{// See https://go.microsoft.com/fwlink/?LinkId=733558// for the documentation about the tasks.json format"version": "2.0.0","tasks": [{    "label": "echo",    "type": "shell",    "command": "echo Hello"}         ]}

Step 2 Modify the Task file:

{"version": "2.0.0","tasks": [{    "label": "ERB formatter",    "type": "shell",    "command": "ext=$(echo ${file})  && if [ ${ext##*.} == erb ]; then htmlbeautifier ${file} ${file}; else echo 'Not an ERB file'; fi",    "presentation": {        "reveal": "never",        "panel": "new",        "echo": false       },    "group": {    "kind": "build",    "isDefault": true     }}            ]}
ext=$(echo ${file})
if [ ${ext##*.} == erb ]; then
htmlbeautifier ${file} ${file};
else
echo 'Not an ERB file';
fi
// The ${file} is a predefined variable that gives you the active file in your VScode tab.
// The following command ${ext##*.} is taking the biggest substring of a string (signle # would take the smallest part) until it meets the last period character. For example the name test.erb , would give you the output erb and the name test.txt would give you txt
// Now if the erb condition is met, then we should run htmlbeautifier with input and output the absolute path of the file

Step 3 Create a shortcut:

{"key": "cmd+shift+r","command": "workbench.action.tasks.runTask","args": "ERB formatter"}

Costa Alexoglou

Written by

Co-founder & Project Design Engineer @ www.loceye.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade