Feb 012015

As I’ve promised, I will start documenting my experience with Aurelia. If you haven’t read my previous introduction article, click here to get an insight of what Aurelia is.

Since I’m writing this post during Sunday night, I will keep it short and just talk about tooling.

I am not the hacker-notepad-vim kind of guy and the first thing that I need when I work with any technology/framework is a good IDE. I’m a veteran user of Visual Studio + Resharper, so obviously my first choice when starting with Aurelia was to use this.

Unfortunately, VS 2013 + Resharper does not currently have any support for ES6 so it kind of stands in your way. Of course you can still use it as a text editor, but it’s even worse than using any notepad alternative since it always highlights the whole code as having errors and the formatting just messes things up (misaligned curly brackets or parenthesis, wrong spacing etc.).

After searching a bit on the internet and almost loosing all hope to have a nice IDE for this, I found out that JetBrains Webstorm IDE actually has support for ES6, so I will be using this from now on for my experiments.

Just as a hint, if you want to set Webstorm up, check out this short video on how to use Webstorm + Traceur. The default Aurelia template already transpiles ES6 to Javascript, but if you want a more integrated experience, you can configure the IDE to do it for you:



  • fops

    hi, just curious, did you check: https://github.com/AshleyGrant/aspnet-skeleton-navigation
    its using a typescript and visual studio setup

    • http://www.byteflux.me/ Sebastian Negomireanu

      Hi, I haven’t checked it, but it looks good, I’m really interested in that. ES6 looks as a good future for JavasScript, but the Type system from TypeScript is definitely a good addition especially for bigger projects (for which frameworks such as Aurelia are suited).

      Thanks for the link.

  • CMichaelGraham

    There are several sample Aurelia TypeScript VisualStudio solutions here https://github.com/cmichaelgraham/aurelia-typescript. They use a javascript bundle of the Aurelia libraries, created with r.js

  • http://www.jsrsoft.co.uk John R

    Hi. Have you got to DayTwo yet?

    I do have WebStorm 9.0.2 working of sorts.
    – found that a File Watcher traceur was working fine on welcome.js but not on those js files that import from aurelia, eg import {router} …
    But then it’s not really necessary as aurelia is EC6 and not Typescript, so I’ve disabled the watcher.
    – Run configs are awkward. One based on Javascript-debug and run a gulp watch run config before opening the brower – but the browser opens before the gulp task has started the server.

    Love to know what you’ve achieved.
    Thx, John

    • http://www.byteflux.me/ Sebastian Negomireanu

      Hi John,

      Yes I’ve actually gotten to Day 4 already but didn’t manage to post it on the blog yet :).

      It can happen that gulp watch starts the browser before the server is running, but afaik this is a known issue – you just need to refresh. On my machine I didn’t have this issue, but it’s a rather fast computer.

      My next post will cover setting up the project for easy debugging and using the logging mechanism to trace output.

      I was also not able to use the Traceour File Watcher properly and to be honest I just skipped that part. If you have browser debugging + gulp watch it is good enough for development.

      • http://www.jsrsoft.co.uk John R

        Fantastic. I wait enthusiastically!

        Since writing I’ve discovered that if I manually start gulp watch from Show Gulp Tasks on gulpfile.js context menu, I don’t need to stop and restart since if I edit files in the src tree they are detected and refreshed automatically in the server. This is very convenient as the Run config just needs to start the browser, and I have one less mouse click.

        I was wondering how to get Intelisence/code completion from Aurelia. I added the jspm_packages as a library, but I don’t think it’s working. Aurelia will be written in EC6, so I don’t know whether Webstorm would support that.

        Looking forward to your next post.