.ejs formatting in VSCode

user_1923190 0
Viewed 3529

This is my problem - its unreadable

unreadable code

In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.

"files.associations": {
    "*.ejs": "html",
    "*.css": "postcss"
},
"emmet.includeLanguages": {
    "postcss": "css",
    "ejs": "html"
},
"emmet.syntaxProfiles": {
    "postcss": "css",
    "ejs": "html"
}
hexo vscode-settings ejs
2 Answers

I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)

  1. Install EJS language support plugin
  2. Now you have ejs support, highlighting, 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 with <? ... ?> tags.
  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

I would suggest using EJS language support which is according to them

Syntax highlighting for EJS, Javascript, and HTML tags. Includes javascript autocompletion.

and if you are interested in a Linter you should check out

EJS-Lint which according to them

EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores all other tags (i.e. <%=).

Note: This linter does not attempt to check for unclosed EJS tags, so if you get an error Unexpected token with a line number that doesn't contain any scriptlets, you most likely forgot to close a tag earlier.

It also is set up to handle old-style includes (<% include filename %>) by ignoring them. It does not lint included files regardless of the method of inclusion.

It can work with custom delimiters, just pass it in the options (if using the API) or pass the --delimiter (-d) flag on the CLI.

Admin1
Related