ECMAScript 6 in WebStorm: Transpiling

Posted on by Ekaterina Prigara

WebStorm supports ECMAScript 6 syntax. This support actually includes not only the ECMAScript 2015 standard, but also the 2016, 2017, and 2018 standards and even some proposals to the language, for example, import(). While these features get more and more support in modern browsers and runtimes (see the Kangax compatibility table), to deploy your ES6 code you still often need to compile it to ES5.1, the JavaScript version supported by all browsers.

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: make sure ECMAScript 6 is set as the JavaScript version in WebStorm’s Preferences (Languages & Frameworks | JavaScript). And if you’re using React, select React JSX as your language version.

Select JavaScript version in Preferences

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

File with ES6 code

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 (note that for the client-side code you may still need some additional such as module bundlers). For production-ready code, it might be worth using Babel in your build process with webpack, Parcel, Grunt, Gulp, or npm — 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 and its preset for the latest JavaScript features in your project using npm (or yarn):
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

If you’re using React and JSX, you would also need to install @babel/preset-react.

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

Add file watcher in Preferences

In the File watcher configuration, check the path to Babel: it should be 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.

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

File watcher setup for Babel

Of course, you can modify the configuration or add more compilation options to the .babelrc configuration 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 React JSX 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 in the dist folder in the project root. The file names and their parent directories will be preserved.

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.

Working directory (under Working Directory and Environment Variables) — the directory where the program is executed. By default that’s the directory of the file.

Auto-save edited files to trigger the watcher (under Advanced Option) – disable this option if you want to run watcher only when you save the file.

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.

grunt-tool-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.

run-grunt-task

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, one of the ways to run and test it is using @babel/register.

  1. Make sure you have @babel/cli and @babe/register installed in your project.
  2. In your Node.js run/debug configuration in the Node parameters field add: -r @babel/register Don’t forget to specify the path to the JavaScript file you’d like to run.
  3. Save configuration and hit run or debug.

Alternatively (but we would recommend @babel/register), you can use @babel/node. To use it, you need to install it and the 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 in the Node.js run/debug configuration.

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 an additional 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

Comments below can no longer be edited.

136 Responses to ECMAScript 6 in WebStorm: Transpiling

  1. Habib says:

    May 26, 2015

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

    • Ekaterina Prigara says:

      May 26, 2015

      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:

    May 26, 2015

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

    • Ekaterina Prigara says:

      May 27, 2015

      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$-compiled.js.map

  3. Kyle Yancey says:

    May 27, 2015

    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:

      May 28, 2015

      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:

    June 3, 2015

    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? 🙂

    • Rune Bjerke says:

      June 3, 2015

      And look, the blog engine is messing up everything:

      — double hyphen
      – – hyphen space hyphen
      – hyphen

      • Ekaterina Prigara says:

        June 4, 2015

        Thanks for your comment, Rune. I’ll see how I can fix that.

  5. markd says:

    June 13, 2015

    Has anyone setup the debugger with babel-node?

    • gabe says:

      June 29, 2015

      +1 on this

    • Tyler says:

      October 1, 2015

      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:

      November 18, 2015

      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:

        November 18, 2015

        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: https://youtrack.jetbrains.com/issue/WEB-17151

  6. Matteo says:

    June 21, 2015

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

    • Ekaterina Prigara says:

      June 22, 2015

      You can debug ES6 code with the source maps.

      • Matteo says:

        July 3, 2015

        do you have a link with example ? sorry but i think i got blocked with silly problems

        • Ekaterina Prigara says:

          July 6, 2015

          Here’s a simple example of ES6 Node.js app by Axel Rauschmayer: https://github.com/rauschma/node-es6-demo
          You need to run npm install and then execute gulp task babel. The generated files will be saved in es5 directory. Put a breakpoint in the original es6 file and start a debug session for the generated file (since node can’t run es6 files). The breakpoint in the original file will be hit.

          • Konstantin Tarkus says:

            July 6, 2015

            This way “Unit Test > Right Click > Debug” feature doesn’t work..

            • Ekaterina Prigara says:

              July 7, 2015

              Sorry, I think I’m missing something: what Unit test? Can you please report an issue with more details on our issue tracker if you believe there’s an issue.

        • Randy says:

          November 18, 2015

          @Matteco @Konstantin Tarkus it’s a known bug that’s been around for 8 months 🙁 https://youtrack.jetbrains.com/issue/WEB-16397 Jetbrains does not appear to think it’s a priority.

  7. Logan says:

    June 29, 2015

    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:

    July 13, 2015

    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

    • Ekaterina Prigara says:

      July 13, 2015

      What is the error message you see? Can you please report an issue on our tracker providing more details on your project or contact our tech support. Thanks!

  9. Leo Pelekh says:

    July 17, 2015

    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:

      July 17, 2015

      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: https://youtrack.jetbrains.com/issue/WEB-17151

  10. Andrew Willems says:

    August 13, 2015

    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:

      August 14, 2015

      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:

        August 18, 2015

        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.

        • Ekaterina Prigara says:

          August 20, 2015

          Can you please run nvm alias default stable from your terminal and then restart WebStorm. That should fix the problem.

          • mrtpm says:

            February 18, 2016

            had this same problem… took a while to find this comment but it helped!

    • linguokun says:

      June 12, 2017

      Very thank you for your solution . I had encountered this problem. I wastes many hours, but now I solve it.

  11. llamerr says:

    September 4, 2015

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

    • Ekaterina Prigara says:

      September 4, 2015

      Which PhpStorm version do you use? We have added that not long time ago.

  12. Santi says:

    September 7, 2015

    Hi, is there any chance you guys could support experimental es7 features (https://babeljs.io/docs/usage/experimental/)? Syntax highlighting is working for some like object spreads and decorators but not for others like export extensions.

    • Ekaterina Prigara says:

      September 7, 2015

      Would be really great if you report a feature request about Export extensions support on our issue tracker: https://youtrack.jetbrains.com/issues/WEB?q=%23es7 So far we had quite few requests about ES7 features and we don’t rush with the support since this syntax is still in stage 1. Thank you!

  13. Dino Chiu says:

    October 8, 2015

    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:

      October 9, 2015

      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. Stefan Walther says:

    November 24, 2015

    See here for a detailed step-by-step guide how to debug ES6 in Webstorm (11) using gulp:
    https://github.com/stefanwalther/es6-debug-webstorm

  15. Janne Hämäläinen says:

    December 15, 2015

    How about giving an example of babel + webpack debugging ?

    • Ekaterina Prigara says:

      December 15, 2015

      You can find an example in our blog post on Debugging Webpack apps: http://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

      • Janne Hämäläinen says:

        December 18, 2015

        Yes, I checked that and example works. However if I have Babel transpiled sources inside webpack I cannot get debugger working realiably. It was able to stop in some class constructors, but not stopping in actual functions. Also seemed that it was missing some lines completely by stepping oover “ghost” lines.

        • Ekaterina Prigara says:

          December 18, 2015

          Can you please report us an issue about that on https://youtrack.jetbrains.com/issues/WEB, ideally with the sample project, so we could reproduce the problem and debug it. Would really appreciate that. Thank you!

          • Janne Hämäläinen says:

            January 14, 2016

            I modified your webpack example and put it here:
            https://github.com/jannhama/debugging-webpack/tree/master

            Tried quickly but couldn’t get it even hit single breakpoint. I’m using browsersync server with port 3000. Console log was correctly printed in IDE but no breakpoint hit.

          • Janne Hämäläinen says:

            January 25, 2016

            Created issue for this.

  16. Christopher Waldon says:

    December 20, 2015

    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.

    • Ekaterina Prigara says:

      December 21, 2015

      Thanks for sharing your experience!

  17. VIc York says:

    December 26, 2015

    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:

      December 28, 2015

      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:

      March 25, 2016

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

  18. Ferdinand Prantl says:

    January 4, 2016

    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:


    src/
    cards/
    Card.js
    players/
    Computer.js
    Human.js
    gulpfile.js

    The supposed build output:


    out/
    cards/
    Card.js
    Card.js.map
    players/
    Computer.js
    Computer.js.map
    Human.js
    Human.js.map

    You configuration sample will produce this:


    out/
    src/
    cards/
    Card.js
    Card.js.map
    players/
    Computer.js
    Computer.js.map
    Human.js
    Human.js.map

    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”?

    • Raul Cifuentes says:

      March 15, 2018

      Change the default macro variable $FileDirRelativeToTheProjectRoot$ to just $FileDir$ in Babel Watcher settings, so it read as $FileDir$ –out-dir dist –source-maps –presets env

  19. Ferdinand Prantl says:

    January 4, 2016

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

    For example, project sources:


    src/
    ____cards/
    ________Card.js
    ____players/
    ________Computer.js
    ________Human.js
    gulpfile.js

    The supposed build output:


    out/
    ____cards/
    ________Card.js
    ________Card.js.map
    ____players/
    ________Computer.js
    ________Computer.js.map
    ________Human.js
    ________Human.js.map

    You configuration sample will produce this:


    out/
    ____src/
    ________cards/
    ____________Card.js
    ____________Card.js.map
    ________players/
    ____________Computer.js
    ____________Computer.js.map
    ____________Human.js
    ____________Human.js.map

    • Ekaterina Prigara says:

      January 5, 2016

      Please try to use $FileParentDir$ macros instead of $FilePathRelativeToProjectRoot$ in Arguments.

  20. Maurice says:

    January 6, 2016

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

    • Ekaterina Prigara says:

      January 7, 2016

      Should be possible now, I believe (haven’t tested myself yet), but only with Node.js v4 (see https://youtrack.jetbrains.com/issue/WEB-16397#comment=27-1229849), waiting for our pull request to be merged in v5.

      • Lenny Markus says:

        January 8, 2016

        Hi Ekaterina,
        Has any progress been made on debugging code that has been transpiled on the fly using babel/register?

        I understand that sourcemaps are in-memory, and that it’s not an easy problem to solve. I’d just like to know what plans (if any) there are for supporting it.

        • Ekaterina Prigara says:

          January 11, 2016

          Hello Lenny, that is the same issue and as I said it was fixed when working with Node.js v4. Please file us a new issue and attach a sample project if debugger doesn’t work for you. Thank you!

          • Lenny Markus says:

            January 14, 2016

            Oh, I didn’t understand that from the original answer. Just tried it out.
            Works perfectly. Thanks again for everything!

            Quick sample repo, works with babel-register, no need to set up transpiling: https://github.com/lmarkus/es6-webstorm

            • Ekaterina Prigara says:

              January 14, 2016

              Good news! Thanks for the repo!

          • Lee Nave says:

            February 22, 2016

            Unfortunately you can’t hot-swap ES6 code in the webstorm debugger (i.e.,g using the Update button). When I try that with Lenny’s sample project, I get “index.js: Failed to compile new version of script: SyntaxError: Unexpected token export”.

            (Note: I changed line 10 of a.js to “setTimeout(alpha, 5000);” so that there would be a process to hot-swap.

          • Lee Nave says:

            February 22, 2016

            Whoops, make that “setInterval” 🙂

            • Ekaterina Prigara says:

              March 1, 2016

              Sorry for not replying sooner.
              Unfortunately, that doesn’t work. We’ve reproduced the problem, here’s a link to the issue that you can vote for and follow for updates: https://youtrack.jetbrains.com/issue/WEB-20516

  21. Steven Schattenberg says:

    February 4, 2016

    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?

    • Steven Schattenberg says:

      February 4, 2016

      Nevermind. I see that I am missing some plugins.

  22. Calvin Lee says:

    February 16, 2016

    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:

    March 20, 2016

    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 🙁

    • Ekaterina Prigara says:

      March 21, 2016

      Do you get this error message from Babel? Might be this issue: https://phabricator.babeljs.io/T7170

    • Ben H. says:

      March 27, 2016

      Run Node with the –harmony_default_parameters flag. You are using default parameters in function calls without this feature.

  24. Brian says:

    April 12, 2016

    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.

    Thanks

    • Brian says:

      April 12, 2016

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

    • Ekaterina Prigara says:

      April 14, 2016

      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:

      April 14, 2016

      Actually found a more detailed example on setting up File watcher to put all the output in one folder: http://mcculloughwebservices.com/2015/12/10/webstorm-babel-6-plugin/

      • Stavros Kefaleas says:

        March 3, 2017

        This is the correct way to do it.
        Please replace your original post instructions with this one.

  25. Lau Chung says:

    July 9, 2016

    How do you minify with Babel 6 in phpstorm?
    babel-plugin-uglify doesn’t support Babel 6.
    I just installed
    member-expression-literals
    merge-sibling-variables
    minify-booleans
    property-literals
    simplify-comparison-operators
    but not enough for minification.

    • Ekaterina Prigara says:

      July 10, 2016

      From the Babel documentation it seems that these plugins you’ve mentioned are recommended for minification. You might also try to set up a build process with build tools like Webpack, Gulp or Grunt that would run uglify right after the compilation with babel.

      • Lau Chung says:

        July 11, 2016

        Regarding setting up a build process with Webpack or Grunt, do you mean adding one more filewatcher to monitor the bundle scripts and trigger webpack once the bundle scripts are regenerated by the babel filewatcher? Can you give me some suggestions on it?

  26. Darren says:

    August 10, 2016

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

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

    }

    This page came up first, but I found the following solution to work:
    http://stackoverflow.com/questions/34943631/path-aliases-for-imports-in-webstorm

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

  27. Vladislav says:

    August 28, 2016

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

  28. Eduardo Alvarez says:

    October 7, 2016

    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

    • Ekaterina Prigara says:

      October 10, 2016

      Can you please send a bit more details on your file watcher configuration to our tech support: https://www.jetbrains.com/support/
      Please also attach the IDE log files (menu Help – Show logs in Finder). Thank you!

  29. Jeff Gomez says:

    October 7, 2016

    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:

      October 10, 2016

      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..

  30. Henrik says:

    March 21, 2017

    After updating my Webstorm install to version 2017.1 I suddenly can’t run my code that contains arrow functions.

    I get an syntax error saying “Unexpected token” for the arrow function.

    Node.js version is 6.10.0, npm is 4.4.1 and I have ticked the box Ecmascript 6 as in your article.

    I have also tried to Invalidate the cache/restart without success.

    Can anyone advice me further?

  31. Igor says:

    April 14, 2017

    phpstorm
    Sees other methods!
    http://f4.s.qip.ru/188zyAODf.png

    • Dennis Ushakov says:

      April 17, 2017

      Thank you for the report. Please follow WEB-26037 for the updates.

  32. Javier Martínez says:

    April 24, 2017

    Hello:

    In the past I was able to inspect ES6 Map objects using Debugger. But now when I debug server-side only ES6 code with Node.js 6, if I click on any variable which is a Map object only __proto property is showed. No Map values.

    Should I have to configure anything?. My workaround is to create a new variable watch with this code: […map.values()] but this worked in the past without workarounds.

    Thank you

    Regards

    • Ekaterina Prigara says:

      April 25, 2017

      Hello,

      What WebStorm version do you use? It seems that the issue should have been fixed in WebStorm 2017.1: https://youtrack.jetbrains.com/issue/WEB-21216

      • Javier Martínez says:

        April 25, 2017

        Hello Ekaterina:

        WebStorm 2017.1.1
        Build #WS-171.4073.40, built on April 11, 2017
        JRE: 1.8.0_112-release-736-b16 x86_64
        JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
        Mac OS X 10.11.6

        Thanks

        • Ekaterina Prigara says:

          April 26, 2017

          It seems that the issue I’ve linked to was only fixed for the Node.js version 7+. Sorry for not saying that earlier. Do you plan to continue using Node.js 6? Should we report an issue for better support in Node.js 6? But to be honest, with Node.js 8 being released so soon it doesn’t seem very likely that we will support debugging maps in Node.js 6.

          • Javier Martínez says:

            April 26, 2017

            Hi,

            Tested for node 7.9.0 and not working either. Create Node.js project from the scratch and just a few lines of code creating and adding values to Map object. If I debug, Map object inspection is empty except for __proto__ subobject.

            Have you tested that this functionality works?

            Thanks

          • Javier Martínez says:

            May 12, 2017

            Hello Ekaterina:

            Any update about my last comment?.

            Thank you

            Regards

            • Ekaterina Prigara says:

              May 12, 2017

              In my previous comment I’ve asked you to share a screenshot with your example, so I was waiting for it.

              • Javier Martínez says:

                May 12, 2017

                Hello Ekaterina:

                I answered your comment on April 28. You can see it as the last comment of this post (sorry I got it wrong when clicking on Reply): https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/#comment-293143

                Anyway, here you have the screenshot but using Nodejs.js REMOTE Debug.
                https://drive.google.com/file/d/0B6pCXqcLCV-UaW8wZ040WHdwN3M/view?usp=sharing

                Thank you

                Regards

              • Ekaterina Prigara says:

                May 17, 2017

                Thanks for the reply. Sorry that we’ve missed it earlier.
                The fact that you were using a remote debug configuration was critical here and we were able to reproduce the issue with Node.js v7.9 and v7.10. However, we do not plan to fix this issue for these versions. The reason is that the Node.js Remote configuration requires the use of the old Node.js debugging protocol that is now deprecated. WebStorm and Node.js 6.4+ support a new recommended Chrome Debugging Protocol. To use it you need to run your application with the --inspect-brk= flag instead of --debug-brk= and then connect to the process using the Chromium Remote debug configuration in WebStorm.

  33. Javier Martínez says:

    April 28, 2017

    Hello again:

    After watching your screenshot I have realised that you are using Node.js debugging. I didn’t mention that in my case I am using Nodejs.js Remote Debug.

    I have tested Node.js v7 with normal debugging and it works properly. But the same with remote debugging is not working.

    Should it work? Maybe is another bug?. Or you don’t have this feature?. I would swear that this worked sometime in the past.

    Thank you

  34. Dave Schinkel says:

    May 16, 2017

    And now create-react-app just broke your test instructions above, yay! Great job FB. Some of us prefer mocha over jest. But create-react-app only works with Jest. Therefore, due to the fact that react-create-app has this wonderful “magic” in the react-scripts in that project, You can’t just add a .babelrc file anymore or use node-babel with WebStorm test configs for mocha due to this if your team wants to use create-react-app vs. just creating a custom React config, which to me isn’t that hard especially with npm scripts instead of using Gulp or Webpack.

  35. Julian Wilson says:

    May 22, 2017

    I would like to add that you should be careful which JavaScript you choose to run in your Node configuration! For some reason, you can choose an ES6 file and it will hit breakpoints fine but the reloading will not work properly. If you just select your transpiled ES5 module it will work fine though.

  36. Chris Wolcott says:

    June 28, 2017

    I am having a problem setting up a File Watcher to perform exactly what I want to do. Here is the current directory structure.

    public
    modules
    charts
    js
    abc.js
    abc.js.map
    mno.js
    mno.js.map
    xyz.js
    xyz.js.map
    source
    abc.js
    mno.js
    xyz.js

    I have set up a scope to only include the file[myProject]:public/modules/charts/source/*

    My current File Watcher will transpile all files from source and add them to the js directory not just the one I am editing.

    File Type: Javascript
    Scope: {The one defined above}

    Program: /Users/wolcottce/PhpstormProjects/myProject/node_modules/.bin/babel
    Arguments: $FileParentDir$/source –out-dir $FileParentDir$/js –source-maps –presets env
    Output paths to refresh: js/$FileName$:js/$FileName$.map

    Working Directory: $ContentRoot$

    I believe that using $FileParentDir$/source in the arguments is causing all files to be transpiled. If I change $FileParentDir$/source to $FilePathRelativeToProjectRoot$ only the currently modified file is transpiled, but it is placed in the following directory hierarchy:

    public
    modules
    charts
    js
    public
    modules
    charts
    sources
    abc.js
    abc.js.map

    Any suggestions on how to have only the current file that was edited and saved to be transpiled by the File Watcher and placed in the correct directly or am I misunderstanding how File Watcher works?

    • Chris Wolcott says:

      June 28, 2017

      Sorry the directory hierarchies aren’t indented properly.

    • lena_spb says:

      June 28, 2017

      I believe that using $FileParentDir$/source in the arguments is causing all files to be transpiled

      Yes – you are passing a directory to compiler, so all files in it are transpiled.

      You can try the following configuration:

      Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env
      Output paths to refresh: $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js:$ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$\$FileNameWithoutExtension$.js.map
      Working Directory: $FileDir$

      When using this setup, public/modules/charts/source/components/subdir1/comp1.js will be transpiled to public/modules/charts/js/components/subdir1/comp1.js. Is it a solution you are looking for?

      • cwolcott says:

        June 29, 2017

        Thank you very much for your response. I have a couple of problems with the suggestion. But lets tackle the first issue.

        1) Arguments: $FileName$ –out-dir $ProjectFileDir$\public\modules\charts\js\$FileDirPathFromParent(source)$ –source-maps –presets env

        When the file watcher executes it can’t find the $FileName$ “abc.js”. It exists in public\modules\charts\source.

        I have change Show console: Always so I can see the output.

        When I define the following:

        Arguments: $FilePathRelativeToProjectRoot$ –out-dir $FileParentDir$\js –source-maps –presets env

        The console shows (Below are the real directories instead of my examples):
        /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel
        public/modules/sysbio/clinical/source/dashboards.js
        –out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js
        –source-maps –presets env

        So this looks correct. It will be transpiling dashboard.js from the public/modules/sysbio/clinical/source directory and attempting to put it in /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js

        But the next line of output shows:
        public/modules/sysbio/clinical/source/dashboards.js -> /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js/public/modules/sysbio/clinical/source/dashboards.js

        Again the file being transpile is correct but the output haas the correct path with the input path added to it.

        Could this have something to do we how my scope is define?

        • lena_spb says:

          June 29, 2017

          When the file watcher executes it can’t find the $FileName$ “abc.js”. It exists in public\modules\charts\source.

          Did you change Working Directory to $FileDir$ per my suggestion? Seems you are still using $ContentRoot$

  37. cwolcott says:

    June 29, 2017

    Sorry, you are correct. I changed the Working Directory to $FileDir$. So the console now shows the command being executed as:

    /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/node_modules/.bin/babel dashboards.js –out-dir /Users/wolcottce/PhpstormProjects/SysBioCube-Migration/public/modules/sysbio/clinical/js –source-maps –presets env

    But I now get the following error that all the commands after the filename do not exist:

    –out-dir doesn’t exist. /Users/wolcottce/PhpstormProjects/SysBioCube-Migration\public\modules\clinical\js\ doesn’t exist. –source-maps doesn’t exist. –presets doesn’t exist. env doesn’t exist

    Here is the Arguments: $FileName$ –out-dir $ProjectFileDir$/public/modules/sysbio/clinical/js –source-maps –presets env

    • lena_spb says:

      June 29, 2017

      Looks like a copy/paste issue. Please re-type all options (--out-dir, --source-maps, --presets), make sure that each option name starts with 2 dashes

  38. cwolcott says:

    June 30, 2017

    Thank you lena_spb. You were exactly right. I starred to much at the screen and did not see that I was missing the extra dashes. The cut and paste was the problem.

    Everything is working perfectly to transpile 1 file at a time after it has been saved if it is within the defined scope.

    My last question is what does the “Output paths to refresh” parameter do?

    • Ekaterina Prigara says:

      June 30, 2017

      As it’s mentioned in the blog post, the IDE will watch these paths for external changes and make sure that the changes are synchronized with the project.

  39. Nagendra says:

    November 20, 2017

    Hi,

    Is it possible to migrate IBM Dojo tool kit to react JS.
    If yes, can you please guide me.

    Thank you.
    Regards,
    Nagendra.

    • Ekaterina Prigara says:

      November 28, 2017

      Sorry, we don’t have any experience in this area. I’m sure you can find some tutorials on this topic elsewhere.

  40. amin says:

    November 30, 2017

    so after wards we need to link produced js file or it should remain the old one???

    • Ekaterina Prigara says:

      November 30, 2017

      Not sure I understand your question correctly. In the HTML file you need to add a link the compiled file – the browser might not support all the language features you’re using in your source code.

      • Amin says:

        December 1, 2017

        Sorry about the way of my question was asked. But any way u answered my question. Tnx.

  41. fansiyao says:

    December 12, 2017

    How do I use babel-polyfill to combine westrom ?

  42. Milan B says:

    February 22, 2018

    How do I disable this watcher forever? I would prefer if it would never ask me again, for any project.

    • Ekaterina Prigara says:

      February 27, 2018

      No, sorry, there’s no such option in preferences. But you can disable the File Watchers plugin completely in Preferences | Plugins, then you won’t see these suggestions.

      • Milan B says:

        February 27, 2018

        Thanks Ekaterina! Haven’t realized it’s a plugin. This helps in my case, thank you ^_^

  43. Bivek says:

    April 1, 2018

    This was helpful

  44. Makoto says:

    October 10, 2018

    These instructions are out of date. Babel changed their package names – babel-cli is now @babel/cli.

    • Ekaterina Prigara says:

      October 10, 2018

      Thank you for your feedback. We will update the blog post. We recommend referring to the official WebStorm and Babel documentation for up-to-date information.

      • Makoto says:

        October 13, 2018

        Thank you!! This page is the first result on Google when searching for “WebStorm babel”, so it’s good that it’s updated now. I looked in the WebStorm documentation (https://www.jetbrains.com/help/webstorm/) with search terms such as “ECMAScript 6”, “Babel”, and “transpiling”, so I don’t think these instructions are on there.

  45. Matthew T Adams says:

    October 19, 2018

    Please update this for WebStorm 2018.2 & Babel 7.

    • Ekaterina Prigara says:

      October 19, 2018

      The blog post is up-to-date. A week ago I have tested all the steps with WebStorm 2018.2 and Babel 7 and made the required changes. Have you noticed some errors?

      • Matthew T Adams says:

        October 19, 2018

        Yes. For some reason, I’m getting the output below in the terminal window. Looks like an environmental issue with node; I use nvm & everything works just fine from the command line, just not from within webstorm.

        Here’s the terminal output:

        /Users/matthewadams/dev/node_modules/.bin/babel src/main/**/*.js
        env: node: No such file or directory

        Process finished with exit code 127

  46. vitolau says:

    December 20, 2019

    there is no babel under  node_modules/./bin,
    from win10 user

    • Ekaterina Prigara says:

      December 20, 2019

      Hello,
      Have you successfully installed the following dependencies in your project: @babel/core, @babel/cli, @babel/preset-env and @babel/polyfill?
      Once they are installed, babel should be available in the node_modules/.bin folder; that’s not OS-specific.