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.
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.
Working solution (September 2021)
And add these settings to VScode,
"files.associations": { "*.ejs": "html" }, "emmet.includeLanguages": { "ejs": "html", }, "html.format.templating": true
Have fun 😎
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.
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:
"htmlhint.options": {
"spec-char-escape": false,
"doctype-first": false
}
NB: I finally uninstalled the EJS language support extension.
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
I found the solution (how to setup VSCode, no troubles):
EJS language support
plugin<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
ejs.delimeter = '?'
. Now you have correct indentation with <? ... ?>
<? ... ?>
tags. Snippets Ranger
plugin, then find needed extension and edit its file. The Snippets Ranger
is very handy tool. Ctrl+Shift+P
=> Change language mode
=> set HTML
I hope I helped somebody to setup VSCode for .ejs files
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.
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 :)
Head over to https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support and install EJS Language support
Click on ctr + shift + p and search for settings.json
Past this below:
"emmet.includeLanguages": {
"ejs": "html"
},
"html.format.templating": true
Make sure there isn't error or misspelling in your code
Reload your windows and BOOM! error is solved! : )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.