How To Add AdonisJS Edge Support to your WebStorm Environment

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.

1. Select “Preferences”

2. Within preferences, expand “Editor”

3. Under editor, click “TextMate Bundles”

4. Within the TextMate Bundles panel, click the + icon in the top-right corner

5. Go to and select the vscode-edge folder you downloaded/cloned from GitHub

6. Ensure it’s checked within the TextMate Bundles list

7. Click “Apply”, then “Okay”

That should do it, you should now see syntax highlight within your Edge templates.