CODEWITHSUNDEEP
javascripthtmlnode.jsvisual-studio-codeejs
William Jones
William Jones

Reputation: 1129

Visual Studio Code isn't recognising EJS

I am trying to follow this tutorial and write some code in EJS in VS Code. I ran npm i express ejs as per the video's instructions to install both Express and EJS, and no errors popped up in the console. However, in the bottom right (in the blue bar) it still says HTML, and when I click on this to change the language, EJS doesn't appear in the list.

Am I missing something here? Is there another step I was meant to follow? Any help would be greatly appreciated.

Upvotes: 11

Views: 34429

Answers (9)

Ayyoob Ajward
Ayyoob Ajward

Reputation: 1

tried everything and finally fixed downloading the following extension - EJS Language Support -

https://marketplace.visualstudio.com/items?itemName=leonzalion.vscode-ejs

EJS Language Support

add these code to settings.json in vscode

 "files.associations": {
 "*.ejs": "html"
 },

"emmet.includeLanguages": {
 "ejs": "html",
 },

"html.format.templating": true

Upvotes: 0

Eniola Ademola
Eniola Ademola

Reputation: 78

  1. Head over to https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support and install EJS Language support

  2. Click on ctr + shift + p and search for settings.json

  3. Past this below:

"emmet.includeLanguages": {
  "ejs": "html"
},
"html.format.templating": true

  1. Make sure there isn't error or misspelling in your code

  2. Reload your windows and BOOM! error is solved! : )

Upvotes: 0

bobito
bobito

Reputation: 1

folder link, not file link

I admit I was clicking on a folder link too quickly created in the Explorer sidebar like "views\pages\index.esj", so ensure you created a file, not a folder :)

Upvotes: 0

Dimuthu89
Dimuthu89

Reputation: 23

What worked for me, I followed the exact sets shown by Al Mahdi above; but I did not get the option to change the file to ejs. So what I did was renamed the file in the Explorer tab in VS code to "filename.ejs" which was in a views folder(not sure if you did this step). Then everything worked perfectly fine for me.

enter image description here"

Upvotes: 0

Al Mahdi
Al Mahdi

Reputation: 810

Working solution (September 2021)

  1. Install the EJS language support vscode extension

  1. And add these settings to VScode,

     "files.associations": {
     "*.ejs": "html"
 },
 "emmet.includeLanguages": {
     "ejs": "html",
 },
 "html.format.templating": true

Have fun šŸ˜Ž

Upvotes: 18

Victor Gorban
Victor Gorban

Reputation: 1671

I found the solution (how to setup VSCode, no troubles):

  1. Install EJS language support plugin
  2. Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>

are formatted incorrectly (at least with default html formatter).

  1. To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
  2. To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
  3. If, for some reason, you still don't have what you want, try configure file association to html: Ctrl+Shift+P => Change language mode => set HTML

I hope I helped somebody to setup VSCode for .ejs files

Upvotes: 0

Mahmood Afzali
Mahmood Afzali

Reputation: 304

VS Code does not have pre-installed syntax for EJS. You must download the extension plugin for it. try using the following link:

Or type the following command in the VS Code Terminal:

ext install DigitalBrainstem.javascript-ejs-support

Upvotes: 1

Doros Barmajia
Doros Barmajia

Reputation: 512

Finally, I found the cause of this problem.

Foremost of all, I installed the EJS language support extension, then I edited settings.json by adding this lines:

"files.associations": {
    "*.ejs": "html"
},
"emmet.includeLanguages": {
    "ejs": "html"
}

I did all that, and my ejs code still not recognized.

enter image description here

After a while, I found that the responsible for that in my case is the HTMLHint extension (Mike Kaufman).

So, I applied with success one of this 2 solutions:

  • uninstall "HTMLHint".
  • edit settings.json by adding this:
"htmlhint.options": {
    "spec-char-escape": false,
    "doctype-first": false
}

enter image description here

NB: I finally uninstalled the EJS language support extension.

Upvotes: 7

Tsvetan Ganev
Tsvetan Ganev

Reputation: 8836

By default VSCode does not have syntax highlighting for EJS template files. You need to install a plugin like this one - EJS language support.

You also need to configure the file association for .ejs files. In order to do so type the following command (using CTRL + SHIFT + P) - Change language mode and then select Configure file association for .ejs, then select HTML from the dropdown.

Upvotes: 18

Related Questions