VSCode extension for Eta

[nebrelbug]

A common request from Eta users is VSCode syntax highlighting. We should create a VSCode extension with syntax highlighting for Eta templates! (Bonus: include snippets and/or formatting)

Theoretically, we should be able to fork https://github.com/Digitalbrainstem/ejs-grammar. It has about 200K users and seems to have quite a few features.

We could instead try to create a Language Server, which might be more powerful at the possible cost of being more complex to create. Here's one fairly minimal example: https://github.com/ebebbington/drash-markup-language.

Resources

• https://github.com/Digitalbrainstem/ejs-grammar (this is the most popular VSCode extension for EJS)
• https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
• https://github-lightshow.herokuapp.com/ (interactively test language grammars)
• EJS TextMate bundle

[shadowtime2000]

I am in the process of creating a VSCode extension.

[shadowtime2000]

I kind of finished the syntax highlighting, still yet to publish the extension on the market place repo

[nebrelbug]

@shadowtime2000 sweet! It looks good!

One thing to remember is that we should include the white space trimming control characters, - and _, right after the opening tags and after the closing tags. Also that ~ can be used instead of =, and they can have white space in front of them 👍

[shadowtime2000]

@nebrelbug Done! Do you think its ready for publishing?

[nebrelbug]

@shadowtime2000 fantastic work!

One potential problem is that it doesn't handle strings and multiline comments (or tags that are commented out).

It's possible to create a regular expression that matches complete Eta tags. Do you know if it's possible to use a regular expression to match embeds which should be highlighted, rather than using "beginning" and "end"?

[shadowtime2000]

@nebrelbug Using some old TextMate guides I fixed the Javascript syntax highlighting and allowed you to do something like this:

<% console.log("%>"); %>

[nebrelbug]

@shadowtime2000 unfortunately the above code doesn't seem to be working for me while testing the extension:

[shadowtime2000]

It seems to be working for me.

[nebrelbug]

@shadowtime2000 oops, looks like I had another extension enabled that was messing things up 😂

Having opening delimiters inside embedded blocks still seems to be broken:

[shadowtime2000]

@nebrelbug Should be working now

[shadowtime2000]

Just for organization, I assigned myself.

[nebrelbug]

@shadowtime2000 this is fantastic! I think this extension really highlights some of the ways (better string parsing, multi-line comments) that Eta improves over alternatives like EJS.

My one suggestion would be to change autoClosingPairs from "<% ", " %>" back to "<%", "%>" (without the spaces). Having the spaces means that the tags don't auto-close if you type <%=, for example.

I think the extension is definitely ready to publish! It's super helpful and the syntax highlighting is beautiful. The only thing it needs is an explanatory README!

[shadowtime2000]

eta-vscode has been published so I am going to close this issue.