Is there a way to make Visual Studio Code recognize HTML syntax in EJS files

Question

I am using Visual Studio Code on a Mac to work on Node.js applications.

Is there a way to make Visual Studio Code recognize EJS files as HTML markup? I didn\'t see any

Answer 1

Locate the html extension in VSCode extensions folder:

../app/extensions/html

that on MacOS X is

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/html

and on Windows is

c:\Program Files(x86)\Microsoft VS Code\resources\app\extensions\html\package.json

Now edit the file package.json adding .ejs the extensions array only:

{
        "name": "html",
        "version": "0.1.0",
        "publisher": "vscode",
        "engines": { "vscode": "*" },
        "contributes": {
                "languages": [{
                        "id": "html",
                        "extensions": [ ".html", ".htm", ".shtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm", ".ejs" ],
                        "aliases": [ "HTML", "htm", "html", "xhtml" ],
                        "mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
                }],
                "grammars": [{
                        /* "language": "html", not yet enabled*/
                        "scopeName": "text.html.basic",
                        "path": "./syntaxes/HTML.plist"
                }]
        }

}

By the way, the correct way should be to create a ejs extension in the extensions folder and then adding:

ejs/
ejs/package.json
ejs/snippet/
ejs/snippet/ejs.json
ejs/syntaxes/
ejs/syntaxes/EJS.plist

Of course this should have the EJS syntax / grammar, but we can simply duplicate the html one, so from the extensions folder:

cd html/
cp -r * ../ejs/

The package.json then could be like

{
        "name": "ejs",
        "version": "0.1.0",
        "publisher": "vscode",
        "engines": { "vscode": "*" },
        "contributes": {
                "languages": [{
                        "id": "ejs",
                        "extensions": [ ".ejs" ],
                        "aliases": [ "EJS", "ejs" ],
                        "mimetypes": ["text/html", "text/x-jshtm", "text/template", "text/ng-template"]
                }],
                "grammars": [{
                        "scopeName": "text.html.basic",
                        "path": "./syntaxes/EJS.plist"
                }]
        }

}

so change syntaxes/HTML.plist just copied to syntaxes/EJS.plist.

Then restart VSCode.