EJS Colorizer

EJS Colorizer is a free, open source Visual Studio Code extension that delivers accurate EJS syntax highlighting using the Semantic Tokens API. Where earlier TextMate-based implementations corrupt the HTML grammar's internal state when EJS tags appear inside elements, EJS Colorizer uses a stateful HTML scanner and a purpose-built JavaScript lexer to place every token at its exact document offset. </p> is always the right color.

The extension requires no configuration and works with any VS Code color theme. It registers .ejs as the host language with a named, stable scope (text.html.ejs), making it fully composable with other extensions such as Alpine.js Tools.

Why v2 Uses the Semantic Tokens API

TextMate grammars are stateless regex engines. When EJS tags appear inside HTML elements, the HTML grammar's internal state machine gets corrupted and downstream tokens such as closing tags and attribute values end up the wrong color. The only reliable fix is to step outside the TextMate system entirely.

Version 2 replaces the TextMate grammar with a full semantic token provider. A stateful HTML scanner runs over a placeholder version of the document (EJS blocks replaced with equal-length spaces so character offsets are preserved), then a purpose-built JS lexer handles the content inside each EJS block. The result is correct colorization at every nesting level, including EJS inside attribute values and EJS inside <script> elements.

Features

• Accurate syntax highlighting

  All EJS tag types, HTML (tag names, attribute names, attribute values, comments, DOCTYPE), and JavaScript inside EJS blocks (keywords, strings, numbers, comments, operators) are colored correctly at every nesting level.

• Outline and Document Symbols

  The Outline panel and breadcrumbs show all EJS blocks as navigable symbols: control-flow blocks, include() calls, variable declarations, and output expressions.

• Emmet abbreviations

  Emmet expansion works inside HTML regions of EJS files. Type div.container>ul>li*3 and expand it into a full HTML structure without switching file types.

• Prettier formatting

  Format Document (Shift+Alt+F) uses the Prettier CLI from the project's node_modules or PATH, and respects the project's .prettierrc. Use @prettier/plugin-ejs for full EJS-aware formatting.

• Include navigation

  File-path completions inside include() list .ejs and .html files relative to the current file with directory traversal. Every include() path is a clickable document link (Ctrl/Cmd+click). Go to Definition (F12) jumps to the first line of the included file. A warning diagnostic fires when an include() path does not exist on disk.

• JavaScript syntax diagnostics

  All scriptlet and output block contents are joined into a single synthetic program before syntax checking, matching EJS runtime behavior. Split if, for, and while constructs spanning multiple blocks are accepted correctly.

• Folding

  Multi-line EJS blocks fold as a unit. Matching if, for, and while open-blocks ({) fold to their corresponding } close-block.

• Completions

  EJS tag snippets trigger on < or <%, covering if, if/else, for, forEach, and include block templates.

• Hover documentation

  Hover over any EJS delimiter to see an explanation of what it does.

EJS Tag Reference

Compatibility with Alpine.js Tools

EJS Colorizer registers text.html.ejs as a named, stable TextMate host scope. Alpine.js Tools targets that scope name for its JavaScript injection grammar, so both extensions can be active simultaneously in the same .ejs file with no tokenization conflicts. Alpine directive values receive full JavaScript highlighting from Alpine.js Tools on top of the EJS structure provided by EJS Colorizer.

Requirements

• VS Code 1.116.0 or later
• No other dependencies. vscode-html-languageservice is bundled.
• No configuration required

Installation

Search for EJS Colorizer in the VS Code Extensions panel, or install directly from the Marketplace. Source code is available on GitHub under the MIT license.

Related Extensions