Formatting “.ejs” file in VS Code (Visual Studio Code)

featured
January 19, 2018
💫 Originally posted here. Broken? Let me know ~

Featured Image – Photo by Sai Kiran Anagani on Unsplash
When you use ExpressJS using EJS as a view engine in Visual Studio Code (VS Code hereafter), you might run into the following error message when trying to format an EJS page with a keyboard shortcut
(Windows: Shift + Alt + F, MacOS: Shift + Option + F, Ubuntu Ctrl + Shift + I).

Sorry, but there is no formatter for ‘ejs’-files installed.

Luckily all you need to do is to add a user setting by associating .ejs extension to be handled with an HTML formatter.

Here are 3 steps to enable EJS files to be formatted with an HTML formatter.

Step 1 – Open User Settings

Go to “File -> Preferences -> Settings”.

Step 2 – Search for “files.associations” setting

After searching for “files.assocations”, copy "files.assocations": {} to clipboard for the next step.

Step 3 – Add a custom file association

On the right side under “user settings” tab, add


Now you can reformat with a keyboard shortcut without an error.
The reformatted code looks like following.

Resource

Visual Studio Code documentation on file.associations.