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

Visual Studio-Code

Visual Studio-Code Problem Overview


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.

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

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 (e.g. "*.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:

enter image description here

Solution 2 - Visual Studio-Code

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.

Solution 3 - Visual Studio-Code

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

Solution 4 - Visual Studio-Code

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

Solution 5 - Visual Studio-Code

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.

Solution 6 - Visual Studio-Code

Solution 7 - Visual Studio-Code

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmikebzView Question on Stackoverflow
Solution 1 - Visual Studio-CodeviztasticView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeAndré Luiz ReisView Answer on Stackoverflow
Solution 3 - Visual Studio-CodepablovilasView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeDirk VermeerView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeloretoparisiView Answer on Stackoverflow
Solution 6 - Visual Studio-CodeWinuxueView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeBDHView Answer on Stackoverflow