Wrong indentation on EJS files with VSCode

Question

I'm facing a problem with EJS files on VSCode, each time I save the file, the formatter applies a wrong indentation.

Below each EJS identifier the next line is shifted to the right missing the correct vertical alignment.

I'm using HTML format for *.ejs and installed the EJS extension from DigitalBrainstem

    <% if(locals.metadata && locals.metadata.length>0) { %>
        <% var supplier=metadata[0] %>
            <% } %>

                <main class="site-content">

Another example in the picture below

You can see in the both examples, it looks like a ladder, each line is automatically indented to the right and cannot keep opening/closure code blocks aligned.

Answer 1

Just was looking for the solution to this myself. If installing the ESJ language support plugin didn't work on its own. Go to the settings and search for Format: templating you'll see the option to honor some templating language tags. Activate it. This worked for me at least.

Answer 2

I found the solution:

1. Install EJS language support plugin
2. Now you have ejs support and snippets, but some tags like

<? for( let item of array ) { ?>
(some data)
<? } ?>

are formatted incorrectly (at least with default html formatter).

3. To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation.
4. To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.

I hope I helped somebody to setup VSCode for .ejs files