CODEWITHSUNDEEP
visual-studio-code
mikebz
mikebz

Reputation: 3335

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

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.

Upvotes: 71

Views: 50810

Answers (7)

viztastic
viztastic

Reputation: 1995

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

Upvotes: 112

pablovilas
pablovilas

Reputation: 613

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

Upvotes: 29

André Luiz Reis
André Luiz Reis

Reputation: 2333

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.

Upvotes: 64

loretoparisi
loretoparisi

Reputation: 16271

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.

Upvotes: 6

Winuxue
Winuxue

Reputation: 21

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

Upvotes: 1

Dirk Vermeer
Dirk Vermeer

Reputation: 378

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

Upvotes: 21

BDH
BDH

Reputation: 43

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.

Upvotes: 0

Related Questions