.tmLanguage & VS Code Support

This is more to start a community discussion, but support for VS Code is lacking. There is one plugin out there, but it’s just a fork of TextMate support for EJS.

It looks like VS Code needs a .tmLanguage file to offer support for a language. This a grammar format TextMate uses to identify keywords, comments, control flow, etc. when rendering an .ejs file. The documentation seemed vague to me. This is why the above and only EJS extension forked the TextMate .tmLanguage file.

I have had issues with EJS support for a while. I moved from Sublime Text to Atom because of the EJS support breaking in Sublime. The best support I’ve seen for EJS is in WebStorm via a Java plugin from JetBrains.

I’ve found a list of various .tmLanguage files for EJS and tried them all in VS Code. They all have various features that kind of work. I am proposing we build one officially supported .tmLanguage file that can be shared by Sublime, VS Code, TextMate, and any other editor that supports this format (I think Atom and Webstorm also do).

I’m not sure if this is something best suited for the official EJS language repo or organization or done as a community project. I’m willing to help out and even do a bulk of the work, it’s when I got into the guts of it that things got tricky and I needed some help and brainstorming. Hence me reaching out to the community to see if there is already something in works, interest in getting this off the ground, etc.

List of EJS.tmLanguage files:

• @samholmes - most elaborate I’ve found, used by and currently broken in Sublime
• tmBundles - repo of text mate language bundles
• @gregory-m - current VS Code extension built off of this and doesn’t provide much support

Please let me know thoughts, next steps, or anything I’m missing or overlooking.

In my opinion, these would be ‘must haves’:

• File include’s
• Comments
• JS Control Flow (if/else/loops) between closing %> and opening <%
• HTML in-line values. Ex. <img src="<%= ejs %>">

Current Screenshot of EJS in VS Code:

Current Screenshot of EJS in WebStorm:

[ezekg]

I gave it a try at vscode-ejs, but I can’t seem to get partial blocks (e.g. if (foo) {) and matching parentheses to stay within the <% and %> patterns—it seems that you can’t limit the scope of embedded languages so I’ve given up for now. The erb hack at least gives me decent syntax highlighting, albeit not JavaScript, but it’s better than the current ejs package.

Edit: what we’ll probably need to do is partially reimplement the JS grammar within the EJS grammar, fixing any multiline expectations when between EJS tags. Right now, it seems that those expectations are what’s causing issues with the grammar e.g.

<% if (true) { /* The vscode JS grammar takes over here and expects a closing bracket */ %>
  <h1>Test</h1>
<% } %>

The same issue is apparent something like this as well,

<% [1, 2, 3].map(num => { /* The vscode JS grammar takes over here and expects a closing bracket AND a closing parenthesis */ %>
  <span><%= num %></span>
<% }) %>

[Betanu701]

All,

I have created a new EJS Language definition. If you want to test it out and let me know if you have any issues. https://github.com/Digitalbrainstem/ejs-grammar

For now, if you open VSCode installation directory, find the other languages and create a new folder called “ejs” and place the code from my repo in there. I will be working on getting it integrated into VSCode. But you should now have access to select “Javascript EJS” from the languages.

I tried to get as much as I could in it. Let me know if I should add anything.