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

Question

I use Visual Studio Code on Mac to work with Node.js. applications.

Is there a way to get Visual Studio Code to recognize EJS files as HTML markup? I did not see any association of files and schemes in the user settings.

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"} } 

Go to 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 → Settings> User Settings

Add this line to settings.json.

 // 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"} } 

Restart Visual Studio Code.

Answer 3

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

 ext install ejs-language-support 

Answer 4

Following the directions, I changed this file to 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"] }] } } 

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

Answer 5

Locate the html extension in the VSCode extensions folder:

../app/extensions/html

what's on macOS x

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

and on Windows -

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

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

 { "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 an ejs extension in the extensions folder, and then add:

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

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

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

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" }] } } 

change syntaxes/HTML.plist only to syntaxes/EJS.plist .

Then restart VSCode.

Answer 6

New version that allows adding textmate fragments:
https://code.visualstudio.com/updates#_add-textmate-snippets
maybe we can add this to support ejs:
https://github.com/gregory-m/ejs-tmbundle/blob/master/Syntaxes/JavaScript%20Template.tmLanguage

Answer 7

In the Visual Studio 2015 community, I managed to associate the ejs extension with the html editor:

Tools> Options> Text editor> File extension

Type "ejs" into the extension. Select "HTML Editor" from the drop-down list. Click Add. Click OK.

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