I was searching online for a ERB beautifier and couldn’t find a complete solution that I could use on my Ubuntu and MacOS setup. In order to solve this problem I created a task where it runs HTMLbeautifier that is capable of understanding embedded Ruby.
Step 0 Install HTML Beautifier :
Install the gem by writing gem install htmlbeautifier
on your terminal.
Step 1 Create a task file:
Click on the Tasks on the top of your VScode, then select the Configure Tasks, then select the Create tasks.json from template and after that click Other.
Now a json file will be created with the following formatting :
{
// 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
}
}
]
}
Now let’s break the commands in pieces. The "version":"2.0.0"
is used to defined which version of task are we going to use with our VScode. Then the label is the name of our task.
Now the command
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:
Wrapping up, we need a shortcut in order to run our task with ease. To do this open keybindings.json and paste the following
{
"key": "cmd+shift+r",
"command": "workbench.action.tasks.runTask",
"args": "ERB formatter"
}
This will run ERB formatter everytime your press cmd (if on MacOS) ,shift and r. That was pretty much all of it. Hope you find it useful.