EJS Formatting in VS Code

Found this article that walks through how to setup auto format for EJS. It's far from perfect, because you have to give up the <% -code %> being colored, and will instead appear as plain text. Also, it sees those code tags as a standard tag, so it will tab over the following tag, but it's better than nothing. -> https://www.slightedgecoder.com/2018/01/18/formatting-ejs-file-vs-code-visual-studio-code/

One thing you can do is swap back and forth in the editor for seeing the document as EJS or HTML. So if you need to format, just jump over to it being HTML and format, then jump back to EJS.

Try updating the settings under VS code.

Settings > extensions > Emmet:Include Languages > Edit in settings.json

then add:

"emmet.includeLanguages": {
      "ejs":"html"
}

When you write javascript code inside ejs files, auto formatting will add a space after "<%" which will break the code

example: <%- code %> will be formatted to <% - code%> and break the code

To solve this issue, add this line to your settings.json "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false

note that it will also remove spaces between mathematical & binary operators <>|=/*-+%

You could try using Beautify extension in VS Code and include the below code to settings.json file which is located in C:\Users\hp\AppData\Roaming\Code\User

"[html]": {        
    "editor.defaultFormatter": "HookyQR.beautify"  
 },
"beautify.language": {
    "html": ["ejs", "html"],
    "css": [],
    "js": [],
 }

Like other users I also use the 'html' language mode for my .ejs files as so:

go to select language mode (you'll see a language identifier on the bottom bar of your vscode window: i.e. HTML, Embedded JS, Python, etc...)

This will bring up a window to search for other languages settings to use for your file. Select a option below or choose to "Configure HTML based settings" and add the file association to html manually:

    {
        "git.ignoreMissingGitWarning": true,
        "[html]": {},
        "[ejs]": {},
        "files.associations": {
            "*.ejs": "html"
        },
     }

Here's the trick to making this show javascript formatting: in your EJS files include comments with the tags surrounding your javascript and your HTML formatter now shows JS formatting perfectly! Ex:

/*
<script>
*/
write your javascript code here...
    var srcElem = "<div>something cool goes here</div>"; 
    var id = "";

    function init() {
      //do more javascript stuff here
    }

/*
</script>
*/

Follow this blog, this blog suggests

1. Mapping "ejs" to "html" in VS Code
2. Use default "html" VS Code reformatting for "ejs"

Therefore, you don't need to download any extensions.

I added the EJS tags to the default list VSCode uses to my settings.json, which won't format any of the ejs tags without breaking other html code like spans.

"html.format.unformatted": "%,%_,%=,%-,%#,%%,-%,_%,a,abbr,area,audio,b,bdi,bdo,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,label,link,map,mark,math,meta,meter,noscript,object,output,picture,progress,q,ruby,s,samp,script,select,slot,small,span,strong,sub,sup,svg,template,textarea,time,u,var,video,wbr"