EJS Language Support
Language support for EJS (Embedded JavaScript) templates in TypeScript, TSX, JavaScript, JSON, and CSS files.
Features
- Syntax highlighting for EJS tags in:
- TypeScript (
.ts.ejs
)
- TSX (
.tsx.ejs
)
- JavaScript (
.js.ejs
)
- JSON (
.json.ejs
)
- CSS (
.css.ejs
)
- Support for all EJS syntax:
- Output tags (
<%=
and <%-
)
- Control flow tags (
<%
)
- Comments (
<%#
)
- Proper language support within EJS tags:
- JavaScript expressions
- TypeScript types and syntax
- JSX/TSX elements
- JSON structure and validation
- CSS properties and values
- Nested EJS tag support (EJS within strings, objects, etc.)
Installation
To install build locally and install it in Cursor or VS Code, run:
bun run build
cursor --install-extension dannyhw.ejs-language-support
Usage
Files will be automatically recognized by their extensions:
.tsx.ejs
- TSX files with EJS
.ts.ejs
- TypeScript files with EJS
.js.ejs
- JavaScript files with EJS
.json.ejs
- JSON files with EJS
.css.ejs
- CSS files with EJS
The syntax highlighting will automatically work for these file types.
File Associations
The extension automatically configures file associations for all supported file types. You don't need to manually set these up.
If for some reason the automatic configuration doesn't work, you can manually add the following to your VS Code settings.json:
"files.associations": {
"*.tsx.ejs": "tsx-ejs",
"*.ts.ejs": "ts-ejs",
"*.js.ejs": "js-ejs",
"*.json.ejs": "json-ejs",
"*.css.ejs": "css-ejs"
}
Examples
JavaScript
<%# This is a comment %>
const config = {
<% if (isDevelopment) { %>
apiUrl: 'http://localhost:3000',
debug: true
<% } else { %>
apiUrl: '<%= process.env.API_URL %>',
debug: false
<% } %>
};
module.exports = config;
TSX/TypeScript
<%# This is a comment %>
<% if (condition) { %>
<div className="<%= className %>">
<%= content %>
</div>
<% } %>
JSON
{
"name": "<%= props.projectName %>",
<% if (props.type === "library") { %>
"private": false,
"publishConfig": {
"access": "public"
},
<% } %>
"version": "1.0.0"
}
CSS
.container {
<% if (props.isDarkMode) { %>
background-color: #1a1a1a;
color: #ffffff;
<% } else { %>
background-color: #ffffff;
color: #1a1a1a;
<% } %>
padding: <%= props.spacing %>px;
}
Development
Local Testing
For quick development and testing, use the dev
command which will:
- Remove any existing .vsix files
- Build a new extension package
- Uninstall the current version from Cursor
- Install the new version
bun run dev
Making Changes
- Clone the repository
- Make your changes to the grammar files in the
syntaxes
directory
- Test your changes using
bun run dev
- Verify syntax highlighting works as expected
- Submit a pull request
The main files you might want to modify are:
syntaxes/tsx-ejs-injection.tmLanguage.json
- TSX grammar
syntaxes/ts-ejs-injection.tmLanguage.json
- TypeScript grammar
syntaxes/js-ejs-injection.tmLanguage.json
- JavaScript grammar
syntaxes/json-ejs-injection.tmLanguage.json
- JSON grammar
syntaxes/css-ejs-injection.tmLanguage.json
- CSS grammar
Contributing
Found a bug? Please open an issue on GitHub.
Want to contribute? Great! Here's how:
- Fork the repository
- Create a new branch for your feature
- Make your changes
- Test thoroughly using the development instructions above
- Submit a pull request
License
MIT