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 file / scheme association in user preferences.

Answer 1

Actually, you can.

As Andre points out, now you can do this in the workspace settings.Go to Visual Studio Code Settings: File >> Preferences >> User Settings

 // Place your settings in this file to overwrite the default settings { // Configure file associations to languages (eg "*.extension": "html"). These have precedence over the default associations of the languages installed. "files.associations": {"*.ejs": "html"} } 

Click on the 'Plain text' tab at the bottom of the VS Code window and change it to HTML , screenshot below:

Answer 2

Go to Visual Studio Code Settings. File >> Preferences >> User Settings

Add this line in the settings.json.

// Place your settings in this file to overwrite the default settings
{                
    // Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
    "files.associations": {"*.ejs": "html"}     
}

Restart Visual Studio Code.

Answer 3

There is an extension for .ejs support. Launch VS Code Quick Open (Ctrl+P), paste the following command, and type enter.

ext install ejs-language-support

Answer 4

Following the directions given by documentation I changed this file c:\\Program Files(x86)\\Microsoft VS Code\\resources\\app\\extensions\\html\\package.json so it looks like this:

{
    "name": "html",
    "version": "0.1.0",
    "publisher": "vscode",
    "engines": { "vscode": "*" },
    "extensionDependencies": [
                     "html"
                ],
    "contributes": {
        "languages": [{
            "id": "html",
            "aliases": ["ejs"],
            "extensions": [".ejs"]
        }]
    }
}

tried..works for me..too lazy to create a new folder atm

Answer 5

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.

Answer 6

The new release, allow us add textmate snippets:
https://code.visualstudio.com/updates#_add-textmate-snippets
maybe we can add this one for ejs support:
https://github.com/gregory-m/ejs-tmbundle/blob/master/Syntaxes/JavaScript%20Template.tmLanguage

Answer 7

In Visual Studio 2015 Community I was able to associate the ejs extension with the html editor:

Tools > Options > Text Editor > File Extension

Enter "ejs" in the extension. Pick "HTML Editor" from the dropdown selection. Click Add. Click OK.

If you have an ejs file open, close it and reopen.