How To Set Up the Babel Plugin in WebStorm

By Garrett McCullough | June 14, 2015

Note, this post was written for Babel 5. It has been re-written for Babel 6, “How To Set Up the Babel 6 Plugin in WebStorm”.

I’ve been enjoying programming in ECMAScript 6 recently. I use the Babel plugin for WebStorm to compile ES6 code down to ES5 code that can be run in the browser.

Babel has several advantages over Traceur. Babel and Traceur both support all (or nearly all) of the ECMAScript 6 features but Babel already has plans to begin support for proposed ECMAScript 7 features. When I last looked at Traceur, it required a run time JavaScript library to support some of the ECMAScript 6 features. Reportedly, Babel also produces more readable code.

But I always have trouble remembering how to set up the plugin and I haven’t tried setting up Babel on a permanent basis because I wasn’t sure if I’d continue using it (versus Traceur).

To install Babel on your computer,
npm install -g babel

For my reference (and yours, if you choose), here’s how to set up Babel in WebStorm:

  1. Create a Scope
    WebStorm screenshot: Adding a new scope

    1. Name the Scope
      WebStorm screenshot: Naming a new Scope
    2. Add files to the Scope
      WebStorm screenshot: Adding files to a Scope
  2. Set JavaScript version to ECMAScript 6
    WebStorm screenshot: Change JavaScript version
  3. Add the Babel file watcher
    WebStorm screenshot: Babel plugin preferences

    1. Set the arguments
      $FilePathRelativeToProjectRoot$ --source-maps --out-dir out
    2. Set the Working Directory
      $ProjectFileDir$
    3. Set the Output Path to Refresh
      out
    4. Set the file scope to the scope you created earlier
  4. Files will now be transpiled to ECMAScript 5 in the out directory
Posted in ECMAScript 6, JavaScript and tagged ,

8 Comments

  1. Maty on August 13, 2015 at 11:13 pm

    Hi what about debbuging via webstorm is it working ?

    Reply
    • Garrett McCullough on August 18, 2015 at 9:01 pm

      Sorry, I don’t use WebStorm for debugging. I pretty much only debug in the browser or terminal window (for NodeJS apps).

      I need to learn more about WebStorm debugging.

      Reply
  2. Adam Seldon on December 7, 2015 at 10:42 pm

    Thank you, found this information useful, and have bookmarked for future reference 🙂

    Reply
    • Garrett McCullough on December 8, 2015 at 2:34 pm

      Adam,

      Glad you liked it. This blog post was for Babel 5. I have a new post coming soon for Babel 6.

      Garrett

      Reply
    • Garrett McCullough on December 12, 2015 at 10:07 pm

      Adam,

      I finished my blog post about Babel 6 and WebStorm. If you upgrade, you may find it helpful
      http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/

      Garrett

      Reply
  3. Johnny Chan on May 28, 2016 at 5:20 am

    This instruction is just what I needed! In particular Step 3 (on setting up arguments, work directory, and output path). I like the way you output the transpiled files under `/out` – so I can just add this directory to the `.gitignore` file! 🙂

    Reply
    • Garrett McCullough on May 30, 2016 at 7:24 am

      Thanks Johnny! I’m glad it was helpful to you!

      Reply

Leave a Comment