Previous
Sign Up to Track Progress
Next

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.

Tom Gobich
Author
Tom Gobich
Published
Dec 08, 21
Duration
1m 52s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

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

  

    

      Copied!

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.

Join The Discussion! (3 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Anonymous (KiteLouisa304)
    Commented 2 years ago

    No way… Are you kidding me! Thanks Alot

    0

    Please sign in or sign up for free to reply

  2. Anonymous (GuanRahal260)
    Commented 1 year ago

    This won't work if you previously declared that .edge files should be treated as HTML files (or any other reference language). In the Editor section of the settings, under the File Types category, you will need to find the reference language you selected in the left-hand list and remove the "*.edge" extension from the "File name patterns" table.
    Then it will work.

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 1 year ago

      Thank you for sharing!!

      0

      Please sign in or sign up for free to reply