ECMAScript 6 in WebStorm: Transpiling

For some time now WebStorm has supported ECMAScript 6 (a.k.a. ECMAScript 2015), the future standard for JavaScript. While its features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still need to compile it to ES5.1, the current version of JavaScript.

In this blog post we’ll have a look at some of the options that WebStorm offers to help you with this task.

But first things first: set ECMAScript 6 as the JavaScript version in WebStorm’s Preferences (Languages & Frameworks | JavaScript).


WebStorm will start providing smart coding assistance for ES6, including code completion, on-the-fly inspections, navigation for modules and classes, and more.


At the moment Babel is the most commonly used transpiler. You can configure and use it via WebStorm’s File watchers. This approach is good for compiling files on the fly for some experiments and debugging. For production-ready code, it might be worth using Babel in your build process — and WebStorm can also help you here too.

In this blog post:

Setting up Babel File watcher

File watcher is a WebStorm built-in tool that allows you to automatically run some command-line tools on file changes. For Babel WebStorm has pre-configured File watchers. Let’s see how to enable it.

Install Babel CLI in your project via npm:

npm install --save-dev babel-cli

Now go to Preferences | Tools | File watchers, click + button and select Babel file watcher from the list.


In the File watcher configuration, specify the path to Babel CLI in the project node_modules folder (e.g. node_modules/.bin/babel on OS X). On Windows it has to be an exe, bat, or cmd file.

In addition to that, you need to install Babel 6 preset for transpiling ECMAScript 6 locally in your project (for JSX you need babel-preset-react plugin instead). To do that open the Terminal at your application root directory and run:

npm install --save-dev babel-preset-es2015

Add .babelrc file to your project with the following code to enable the preset:

"presets": ["es2015"]

All other Watcher settings are predefined, so it is now ready to use. With this default setup, compiled files will be located next to the original files.


Of course, you can modify the configuration or add more compilation options to the .babelrc file to better fit your project needs.

Configuring File watcher

Here’re the settings that you can modify in the File watcher:

File type — specify the file type that the watcher will “watch” for you and run the program. If you’re using file extensions .es6 or .jsx, select ECMAScript 6 or JSX Harmony respectively in the drop-down list.

Scope — select the scope the watcher will “watch.” By default the scope includes all project files; however, you may want to exclude your test files or some other files that you want to edit without triggering the watcher. You can create a new Scope and set the exclusion rules in Preferences | Appearance & Behavior | Scopes.

Arguments — this is where you can specify the options for Babel CLI.
With the default configuration in WebStorm, the generated ES5 files and source maps will be saved next to ES6 files with “-compiled” added to the file name.

Working directory — the directory where the program is executed. By default that’s the directory of the file.

Output paths to refresh — in this field you should specify the path to the compiled files (it could be a directory where the files are saved or the files themselves, separated with colon). The IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.

Let’s see how we can configure Babel File watcher to make it save all the compiled files in out directory. We’ll need to:

1. Create directory out, right-click on it in the Project view and select Mark as excluded.
2. Change the arguments to: $FilePathRelativeToProjectRoot$ --source-maps --out-dir out (so that the files would be compiled and saved with their parent folders in out folder)
3. Set Working directory to the project root: $ProjectFileDir$
4. Set out as Output paths to refresh.


Visit WebStorm’s Help portal for more details on File watchers.

Setting up task runners: Grunt and Gulp

As mentioned earlier, you can set up Babel as a task for your build tool or task runner. Since WebStorm provides integration with Grunt and Gulp, you can start the task for traspiling your ES6 files from the Show tasks window.


Read about using Babel with Grunt or Gulp.

Make sure the project’s gruntfile.js (or gulpfile.js) is ready and all the required dependencies are installed (as well as the task runner itself). Then press Alt+F11 to see Run Grunt/Gulp task popup or open Grunt or Gulp tool window, select the task for transpiling you’ve created, and double-click it or press Enter to run.


You can create a new Run configuration for your task and start it with the Run… action (Ctrl-Alt-R on Mac or Crtl-Shift-F10 on Windows and Linux).

Using ES6 in Node.js

When you’re developing a Node.js application in ES6, the easiest way to run and test it is using babel-node. Please note that babel-node is not meant for using in production.

  1. Make sure you have babel-cli properly installed in your project.
  2. In your Node.js run/debug configuration specify the path to the babel-node executable (in the .bin folder on macOS, .cmd or .exe file on Windows) in your node_modules folder  in the Node interpreter field. Don’t forget to specify the path to the JavaScript file you’d like to run.
  3. Save configuration and hit run or debug.

Enabling source maps for debug

If you’d like to debug your code using WebStorm or Chrome, make sure the tools you’re using generates source maps. For example, when using Babel only, you need to add "sourceMaps": "both" option to your .babelrc file or pass it as a command-line argument.
If you’re using Babel as a part of a more complex build process, you might need a addition configuration for generating source maps, e.g. use gulp-sourcemaps with Gulp or add devtool: "source-map" option when using Webpack.

Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is executed in the browser.

Apart from choosing a transpiler, there are some other choices you need to make to start using ES6, like choosing a module system. We recommend consulting Axel Rauschmayer’s excellent blog post on Deploying ES6.

Develop with pleasure!
– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , , . Bookmark the permalink.

85 Responses to ECMAScript 6 in WebStorm: Transpiling

  1. Habib says:

    Okay, so after Babel’s watch we will have following file structure:
    – index.js (original)
    – index-compiled.js (Babel)
    – (Babel)
    Cool, but what is the idea?
    How to set up working project from compiled files after that?

    • Ekaterina Prigara says:

      Please see another configuration described in the blog post that places compiled files in a separate folder or consider using a build tool of your choice to build a working project. Whatever you prefer best.

  2. Greg M says:

    Would you please update the first Babel screenshot so that we can see the full arguments & output paths? Thanks

    • Ekaterina Prigara says:

      That are the default values for this type of file watcher.
      Arguments: –source-maps –out-file $FileNameWithoutExtension$-compiled.js $FilePath$
      Output paths to refresh: $FileNameWithoutExtension$-compiled.js:$FileNameWithoutExtension$

  3. Kyle Yancey says:

    Is there any way to make this the default behavior for javascript files in all projects? Or create a custom project template?

    • Ekaterina Prigara says:

      WebStorm will prompt you to enable a Babel file watcher in every project with ES6 files. Unfortunately, you can’t enable file watchers by default.

  4. Rune Bjerke says:

    Just a small note, your blog engine whateveramajig is converting the two hyphens in sequence into a longer —, so every time someone copies and pastes from the example above it has to be corrected from — o u t – d i r to – – o u t – d i r (same for –source-maps)

    Also, I’ve done this N+1 times now: the last “out” parameter in the Babel line for “$FilePathRelativeToProjectRoot$ –source-maps –out-dir out” wraps to the next line, so I’ve accidentally not copied it and had to correct it afterwards. Might be helpful to put it on a separate line so clumsy-fingers like myself don’t do this? :)

  5. markd says:

    Has anyone setup the debugger with babel-node?

    • gabe says:

      +1 on this

    • Tyler says:

      I don’t think it is possible… Babel is a transpiler. It creates different source code. I use babel with webstorm and I have to debug the out files from babel.

      I could be wrong and someone is running native babel code, but I don’t think that is what Babel does.

    • Anthony Ettinger says:

      I am also wondering this. People say its possible to debug…but I don’t know if they mean use the webstorm node debugger with server side code using babel.

      I tried changing path to node to use babel-node and it crashes when I run the debugger. It works fine when I run babel-node server.js from the command line.

      • Ekaterina Prigara says:

        Hello Anthony, the trick with babel-node is that the source maps that we need for debugging (to map compiled files executed back to the original files) in case of babel-node are generated in memory and in a different way from “ordinary” source maps. We need to support them from scratch, here’s an issue:

  6. Matteo says:

    Is it possible to debug es6 code right now or only the compiled “old” js ?

  7. Logan says:

    Is it possible to use the ES6 and JSX features at the same time? Currently I get syntax errors if I use ES6 syntax within a JSX file.

  8. Michael Romanoff says:

    after I enable JavaScript ECMAscript 6 as on your 1 screen. I still have squiggly underlines all over. Restart WB didn’t help. It looks like editor still didn’t pick up ES6 syntax for some reason. I have Mac 10.10.4 and WS 10.0.4

  9. Leo Pelekh says:

    The issue with the file watcher approach is that one has to “require” the compiled “-compiled” files as node cannot execute ES6. This means that the ‘compiled’ files need to be checked in to repository and deployed. Am I missing something?

    Also for me I can only put break-points in compiled files (not ES6), though it does break in ES6 file.

    I feel that things would be much easier with babel-node debugging support.

    • Ekaterina Prigara says:

      File watchers can be good for testing out some ideas and debugging.
      You can set us your production build process using some popular build tools like Grant or Gulp. Moreover, you can configure file watcher to store your file in dist/build directory and then deploy that.
      For debugging you need to make sure that you have source maps.
      For node-babel support please vote for and follow:

  10. Andrew Willems says:

    Initially I could not get either the Babel or Traceur file watchers to work. I kept getting errors that ended with the following line: “env: node: No such file or directory”. I eventually found this web site that helped me solve the problem. I include my solution here just in case others encounter a similar problem. I had to copy my PATH variable to the clipboard (from, e.g., “echo $PATH” or from the .bash_profile file), go into WebStorm Preferences… > Tools > File Watchers, double click on Babel (which I had already previously created), click on the browse button (i.e. “…”) beside the “Environment variables” text box, click the “+” at the bottom, enter “PATH” in the lefthand “Name” column, and paste the copied PATH variable into the righthand “Value” column. The screen shots in your otherwise very helpful tutorial above show nothing in the “Environment variables” text box, so I still don’t know why I needed this filled in but you didn’t. Perhaps you could explain this apparent discrepancy. (e.g. Is there another place in Preferences where environment variables are set more generally rather than just for File Watchers?) Otherwise, thanks for showing how to get WebStorm to do ES6 transpiling…very useful!

    • Ekaterina Prigara says:

      Hi Andrew,
      Thank you for your feedback and advice to other users.
      Normally, WebStorm should understand your environment variable and use them to the IDE. Are you by any chance use nvm for managing you Node.js versions? Can you please check the output of nvm alias default command. If not, can you please send us your log file (menu Help – Show Log) by reporting a new issue here or using tech support form. Thanks!

      • Andrew Willems says:

        Yes, I do use nvm for managing my Node.js versions. In fact, I did just recently have problems with node/npm/nvm and ended up removing and re-installing all of them, so that may (or may not) have contributed to my problem. Again, if you could enlighten me on how using or not using nvm affects my ability to use WebStorm file watchers (or any other WebStorm tools), that would be greatly appreciated. (e.g. Is using nvm and WebStorm simultaneously problematic?) As for your other questions/suggestions, I get no output at all from nvm alias default. I just sent my log file to your tech support form, so maybe that will help your team.

  11. llamerr says:

    Is there a reason why PHPStorm doesn’t have Babel support from the start? (only Traceur available)

  12. Santi says:

    Hi, is there any chance you guys could support experimental es7 features ( Syntax highlighting is working for some like object spreads and decorators but not for others like export extensions.

  13. Dino Chiu says:

    Hi, I’m trying to use the babel to watch the *.jsx files , And I’ve followed your guide to setting WebStorm as 1.Set the Languages & Frameworks | JavaScript | JavaScript language version, choose ECMAScript 6. 2.Add a file watcher for babel buy default arguments .
    But It’s still can not complier the *.jsx to *.js what WebStorm said the syntax was large glaring errors inside .
    I’m sure the syntax is ok , cause I’ve used the babel’s online verify those ….
    Could you help me ? witch setting did I miss ?

    • Ekaterina Prigara says:

      Sorry, I’m not sure I’ve understood correctly whether you got error from WebStorm or Babel? Is your code looks ok in WebStorm when you switched language version to JSX? Can you please provide more details and sample code. You can contact our tech support, that might be easier than to reply here.

  14. See here for a detailed step-by-step guide how to debug ES6 in Webstorm (11) using gulp:

  15. How about giving an example of babel + webpack debugging ?

  16. Christopher Waldon says:

    I just spent a while trying to debug errors in Babel. I eventually realized that I had my javascript set to “Prefer Strict mode”, which apparently meant that Babel was being executed in strict mode. This may be a really dumb newbie mistake, since I’m relatively new to Javascript, but I thought I would share the experience in case anyone else has trouble configuring this. After changing the Javascript setting to no longer prefer strict mode, I did have to restart WebStorm to get Babel running properly.

  17. VIc York says:

    I have to be doing something wrong here. I’ve followed these instructions, but the file watcher isn’t triggering at all.

    • Ekaterina Prigara says:

      Please check the checkboxes in the file watcher configuration: the first two should be enabled. Please also check that you don’t have any syntax errors in the file reported by WebStorm. If you do, but still want file watcher to work, check “Trigger file wathcer regardless of syntax errors”.

    • Zheka Dzecina says:

      Hi Vic
      I had the same problem. You need restart your project in WebStorm

  18. Ferdinand Prantl says:

    Thanks for the hint how to configure the Babel watcher to build a structure below “src” into a separate “out” directory! However, a usual project with such JavaScript files does not place the “src” directory itself into “out”; just its content.

    For example, project sources:


    The supposed build output:


    You configuration sample will produce this:


    Notice the extra “src” sub-directory in the “out” directory. Is there a way to set up the WebStorm’s Babel watcher to omit the “src”?

  19. Ferdinand Prantl says:

    The “code” tag does not preserve whitespace… Here once more the three directory structure samples from above, indented by underscores:

    For example, project sources:


    The supposed build output:


    You configuration sample will produce this:


  20. Maurice says:

    Hi, is it already possible to debug babel-node in webstorm?

  21. Steven Schattenberg says:

    I’m using Intellij IDEA 14.1.5. I’ve followed these instructions and I still get the squiggly lines under any ES6 code. I also do not see the file watcher menu. What am I doing wrong?

  22. Calvin Lee says:

    In my case it does not work when setting “program” as (on the “Edit Watcher” window):
    pragram: …\myproject_folder\node_modules\.bin\babel

    After I change to “babel.cmd”, the problem has been solved.

    (Windows 10, WebStorm 11)

  23. Jen says:

    Heya! My WebStorm is working great with arrow functions. However, when I try to use default parameters I get a

    SyntaxError: Unexpected token =

    Please help :(

  24. Brian says:

    So I’m trying to make the jump from Sublime to IntelliJ, and as you might expect it’s been a bit of a process. There are currently two issues that I’m having with this transpilation process in WebStorm.

    First, is that it’s much cleaner to transpile into a dist directory that mirrors your src directory, and File Watchers with babel-cli don’t make this possible as it currently stands. This is because using --out-file with babel-cli doesn’t create directories automatically, and there’s no way to get it to mirror the structure. Currently I’m just using npm scripts (babel src -d dist --watch) to get the desired behavior, but it’d be nice if it were baked into File Watchers.

    Second, IntelliJ doesn’t seem to understand how to resolve ES6 modules, so code completion is broken when using transform-es2015-modules-commonjs. Coming from Sublime, I used TernJS which has an es_modules plugin which resolves all of this fine. Consider adding support for resolving ES Modules, since many of us want to standardize on a single module syntax when writing server / client code, and ES6 modules are (obviously) going to be a thing.


    • Brian says:

      The second bit back: I didn’t have node core enabled for the project.

    • Ekaterina Prigara says:

      Hello Brian,
      Thank you for your feedback.
      You can specify whatever command line option you need in the arguments field of the File watcher. You can remove -out-file parameter and configure it to put all files in one folder.
      Having Babel configured via npm scripts is also a good option for compiling ES6.
      WebStorm understands ES6 imports and provides code completion and navigation for them: please make sure that ECMAScript 6 is selected as a JavaScript version in Preferences – JavaScript. If it doesn’t work for you, please send us a code sample or screenshot and provide a bit more details.

    • Ekaterina Prigara says:

      Actually found a more detailed example on setting up File watcher to put all the output in one folder:

  25. Lau Chung says:

    How do you minify with Babel 6 in phpstorm?
    babel-plugin-uglify doesn’t support Babel 6.
    I just installed
    but not enough for minification.

  26. Darren says:

    On googling how to get Webstorm to resolve ES6 paths that had been configured in Webpack
    resolve: {

    modules: [path.resolve(‘src’), path.resolve(‘node_modules’)],


    This page came up first, but I found the following solution to work:

    Basically in Preferences > Directories – Add your desired folder e.g. src as a Resource Root

  27. Vladislav says:

    Just wanted to say thanks for owner of the article. Pretty useful and helpfull!

  28. Eduardo Alvarez says:

    Hi i can’t run the file watcher there’s an error #13 “access denied” when I try to run it. I’m on Mac OS X El Capitan 10.11.6 and PyCharm 5.0.4

  29. Jeff Gomez says:

    I appreciate the hard work you put into this article, I really do. The article was detailed enough to encourage me to invest a few hours trying to follow and reproduce it, but in the end it lacked sufficient detail required to successfully establish the feature (namely ES6 syntax support in the IDEA). I really wish I had not found the article, it was an exercise in futility and I lost hours of productivity for nothing.

    It’s unfortunate, because I believe IntelliJ has a lot of potential, however when plugin support is this difficult to configure it badly degrades the usefulness of the entire IDE (I could’ve kept using Eclipse for free to get same level of Javascript support).

    • Ekaterina Prigara says:

      Sorry to hear that! Would be very helpful if you could provide at least some details on the problems you encountered.
      ES6 syntax support can be enabled in Preferences | Languages & Frameworks | JavaScript, that’s the only thing required to start working with ECMAScript 6 projects in IntelliJ IDEA..

Leave a Reply

Your email address will not be published. Required fields are marked *