EJS Snippets & Syntax Highlighting
Boost your productivity with the ultimate Embedded JavaScript (EJS) toolkit for VS Code. Features intelligent snippets, rich syntax highlighting, and modern developer tools like go-to-definition and linting.
✨ Features
🎨 Rich Syntax Highlighting
Distinguish your logic from your markup instantly.
- Control Flow (
<% ... %>): distinct coloring.
- Output (
<%= ... %>): clearly visible variables.
- Unescaped (
<%- ... %>): warns you of raw output.
- Comments (
<%# ... %>): faded out to reduce noise.
⚡ IntelliSense & Hover
Not sure what a tag does? Just hover over it!
- Hover over
<%= to see "Output Tag".
- Hover over
<%- to see "Unescaped Output Tag".
🔍 Go To Definition
Navigate your partials with ease.
Cmd + Click (or F12) on any include('partials/header') path to jump straight to the file.
🚨 Real-time Linter
Catch mistakes before you run your code.
- Detects unmatched tags (e.g., an opening
<% without a closing %>).
- Highlights the exact line where the error occurred.
🛠️ Configurable
Customize the extension to fit your workflow in .vscode/settings.json:
{
"ejs.delimiters": "%", // Change default delimiter
"ejs.includePaths": ["./views"] // Add custom include paths
}
🚀 Snippets
Type a prefix and press Tab to expand.
Advanced Scaffolding
| Prefix |
Description |
Output |
html5 |
HTML5 Boilerplate |
Complete HTML structure with dynamic title/body |
ejsif |
Full If/Else Block |
Scaffolds if (cond) { ... } else { ... } |
ejsfor |
Full ForEach Loop |
Scaffolds array iteration |
ejsli |
List Item Loop |
Generates <li> tags for an array |
ejsinc |
Include Partial |
<%- include('path') %> |
Essentials
| Prefix |
Description |
Snippet |
pejs |
Output |
<%= $0 %> |
uescape |
Unescaped |
<%- $0 %> |
ejs |
Scriptlet |
<% $0 %> |
com |
Comment |
<%# $0 %> |
if |
If Block |
<% if ($1) { ... %> |
forof |
For...Of |
<% for (const x of y) { ... %> |
(And many more: switch, case, try, map, filter, reduce, script, style, link)
🔧 Installation
- Open VS Code.
- Press
Cmd+P (Mac) or Ctrl+P (Windows).
- Type
ext install sourabhr10122002.ejs-snippets-and-syntax-highlighting.
Enjoying the extension?
Please leave a review on the Marketplace! ⭐⭐⭐⭐⭐
