Wrong indentation on EJS files with VSCode

user_12817400 0
Viewed 1806

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

wrong indentation to code

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.

visual-studio-code ejs indentation formatting html
2 Answers

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.

user_146318760

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).

  1. To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation.
  2. 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

user_90475720
Related