AdonisJS Quick Tip
1.0Getting Data by the User's Timezone with Luxon's DateTime05:544:32
2.0Debugging, Inspecting, and Freezing Code Execution11:163:36
3.0How To Add AdonisJS Edge Support to your WebStorm Environment01:521:18
4.0How To Add TailwindCSS to a New AdonisJS Project04:485:14
5.0How To Serialize All AdonisJS Lucid Model Properties As Camel Case06:234:55
6.0How To Add A Global Property To Your HttpContext in AdonisJS 508:528:37
7.0How To Add A Custom Method to the Model Query Builder in AdonisJS09:504:31
8.0How To Make Your AdonisJS Authentication Login Case-Insensitive06:003:21
9.0Http Method Spoofing & Helper Components in AdonisJS09:174:29
10.0How To Use Vue 3 with TypeScript in an AdonisJS Project10:136:55
11.0How To Create Your Own Global Helpers in AdonisJS08:189:43
12.0Minify Your AdonisJS HTML in 5 Minutes06:231:03
13.0How To Redirect Back to the Previous Page After Login with AdonisJS03:043:41
14.0Remember Me in AdonisJS Authentication04:130:26
15.0How To Seamlessly Share AdonisJS Sessions & Authentication Across Subdomains04:230:12
16.0Exploring My Favorite AdonisJS Model Query Builder Macros: Tips and Examples09:241:59
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 11 months ago
No way… Are you kidding me! Thanks Alot