AdonisJS Quick Tip
1.0Getting Data by the User's Timezone with Luxon's DateTime5 Min
2.0Debugging, Inspecting, and Freezing Code Execution4 Min
3.0How To Add AdonisJS Edge Support to your WebStorm Environment1 Min
4.0How To Add TailwindCSS to a New AdonisJS Project5 Min
5.0How To Serialize All AdonisJS Lucid Model Properties As Camel Case5 Min
6.0How To Add A Global Property To Your HttpContext in AdonisJS 59 Min
7.0How To Add A Custom Method to the Model Query Builder in AdonisJS5 Min
8.0How To Make Your AdonisJS Authentication Login Case-Insensitive3 Min
AdonisJS Quick Tip
How To Add AdonisJS Edge Support to your WebStorm Environment
A quick tip on how to add AdonisJS Edge syntax highlighting to your JetBrains WebStorm environment using the VSCode plugin and TextMate Bundles.
So, a couple of days ago I decided to try WebStorm as my text editor to mix things up a bit from Visual Studio Code. Now, one of the things you’ll notice when you try to use an AdonisJS project within WebStorm is that it currently doesn’t have support for the Edge templating engine; neither out of the box nor through a plugin.
I was searching the internet to see what others were using to get some syntax highlighting and I happened across this comment post by Ekaterina Prigara, who mentions:
You can add syntax highlighting for Edge templates via using the TextMate syntax file. Download this repo, then go to the IDE preferences - Editor - TextMate Bundles, click Add and select the downloaded source code of the plugin.
I gave this a go and while it’s not perfect, it does a pretty good job and is definitely better than nothing. So, I wanted to share this method with you all since I know a few of you are using WebStorm.
Adding Edge Support
First, download the source code from the Visual Studio Code Edge plugin. You can either download the zip and extract it or clone it onto your machine.
git clone https://github.com/duyluonglc/vscode-edge.git
Next, jump into WebStorm and do the following.
Within preferences, expand “Editor”
Under editor, click “TextMate Bundles”
Within the TextMate Bundles panel, click the + icon in the top-right corner
Go to and select the
vscode-edgefolder you downloaded/cloned from GitHub
Ensure it’s checked within the TextMate Bundles list
Click “Apply”, then “Okay”
That should do it, you should now see syntax highlight within your Edge templates.
Anonymous (KiteLouisa304)Commented 3 months ago
No way… Are you kidding me! Thanks Alot