EJS Template Syntax Highlighting in VS Code
EJS Colorizer is a free, open source VS Code extension that adds EJS syntax highlighting to Visual Studio Code. It is available now on the Visual Studio Code Marketplace and GitHub.
The State of EJS Tooling in VS Code
EJS is a widely used templating engine for Node.js, but the VS Code extension space for it has gone largely unmaintained. Most available options bundle snippets, formatters, or other features alongside syntax highlighting, and many have not seen updates in years. EJS Colorizer does one thing: it colorizes EJS templates using current VS Code extension standards. It was built from scratch against the current VS Code extension API to fill that gap.
EJS Syntax Highlighting Features
EJS Colorizer colorizes all standard EJS tag types inside .ejs files. JavaScript content inside EJS tags is delegated to VS Code’s built-in JavaScript grammar, giving full JS highlighting without reimplementing it. HTML content outside tags is delegated to VS Code’s built-in HTML grammar. The extension requires no configuration and works with any color theme.
The following tag variants are supported:
| Tag | Purpose |
|---|---|
<% %> | Scriptlet — executes JavaScript, produces no output |
<%= %> | Escaped output |
<%- %> | Unescaped output |
<%# %> | Comment — not executed, not rendered |
<%_ %> | Whitespace-slurping scriptlet |
-%> | Trims trailing newline |
_%> | Trims trailing whitespace |
How EJS Colorizer Works
EJS Colorizer is a grammar-only extension built on TextMate grammar files. It has no runtime JavaScript, no dependencies, and no build step. The grammar uses a negative lookahead on the generic scriptlet pattern (<%(?![=\-_#])) to ensure correct tokenization regardless of internal pattern evaluation order, a correctness detail that older grammar implementations skip.
The extension registers embeddedLanguages in its manifest, which enables bracket matching, comment toggling, and other declarative language features to work correctly inside EJS tag regions, not just outside them.
The grammar was developed and tested against real-world EJS templates including files with inline ternary expressions inside HTML attributes, multiline scriptlet blocks, adjacent tags, and EJS inside <script> elements.
Known Limitations
EJS tags inside HTML comments (<!-- <%= value %> -->) are not colorized. The HTML grammar applies a flat comment color across the entire comment region, which overrides EJS token colors. This is a limitation of how VS Code layers TextMate grammars and does not affect functionality.
When a %> closing tag is immediately followed by a > character with no space, the HTML grammar may misparse the sequence and color subsequent content incorrectly. Adding a space before the > resolves this. Both limitations are inherent to the TextMate grammar system. A semantic token provider would resolve them and is being considered for a future release.
Installation
Search for EJS Colorizer in the VS Code Extensions panel, or install directly from the Marketplace listing. The extension requires VS Code 1.116.0 or later.
Source code is available at github.com/ConnorOnTheWeb/ejs-colorizer.